Search code examples
javascriptphphtml5-videocurrent-time

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


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 !


Solution

  • 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.