JS currentTime in html video with php script for src don't working on Chrome

397 Views Asked by At

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 !

1

There are 1 best solutions below

0
On BEST ANSWER

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.