I am currently trying to modify the currentTime of an html5 video player that gets its source from a php script (headers method). the video is loading correctly and I have access to commands via JS:
I load the video via the php script into the html5 tag
<video controls id="MyVideo">
<source src="getVideo.php?nom=sunset_plaine&sens=1&qualite=hd" type="video/mp4" />
<!--<source src="datas/videos/voie_lactee_1_hd.mp4" type="video/mp4" />-->
</video>
I can control the video JS
var myvideo = document.getElementById("MyVideo");
myvideo.play();
after loading the video (event canplay), i can retrieve information about the video
console.log(myvideo.duration);
console.log(myvideo.currentTime);
I can not change the currentTime of the video, and the command does not return any errors
console.log(myvideo.currentTime);
myvideo.currentTime = 2.6;
console.log(myvideo.currentTime);
if I replace the php script with the direct link to the video, I can modify the currentTime
<video controls id="MyVideo">
<!--<source src="getVideo.php?nom=sunset_plaine&sens=1&qualite=hd" type="video/mp4" />-->
<source src="datas/videos/voie_lactee_1_hd.mp4" type="video/mp4" />
</video>
this code work perfectly on IE and FF,the problem occurs under chrome
Is there anyone who may be able to shed some light on this issue ?
Thanks !
I found a solution by playing with headers on my php script getVideos.php
:
I was just using one header before reading the video in the php script :
header('Content-Type: video/mp4');
I add this one and currentTime is now editable on Chrome (don't ask me why...) :
header("Content-Disposition: inline;");
I took the opportunity to add those also :
header('Accept-Ranges: bytes');
header('Content-Length: '. filesize($file_path_name));
header("Content-Transfer-Encoding: binary");
header('Connection: close');
That's all.