CODEWITHSUNDEEP
javascripthtmlgoogle-chromevideo
brnrd
brnrd

Reputation: 3486

How can I get Chrome to load only a part of a video for a HTML5 video tag?

I have to play parts of videos on a page.

I'm using the #t=00:10:00,00:10:30 in the src to read only 30 seconds of the video starting at 10 minutes into it (as an example, those value are calculated in the js based on the user request).

<video id="html5-video-player" 
    src="http://url.of.the/videos/foo.mp4#t=00:10:00,00:10:30"
    type="video/mp4" style="height: 179px; width: 351px;"></video>

The video loads fine and plays ok. But as soon as the clip is stopped, Chrome request the rest of the video (~3GB) which is a problem for me.

Any idea how to prevent that extra loading?

I have the problem using Apache or Node.js (meloncholy/vid-streamer) as server so I guess the server is not the problem here. I'm getting the 206 Partial requests and the servers are responding correctly to them.

So I can only guess that it's Chrome that asks for more video.

Upvotes: 0

Views: 1573

Answers (1)

brnrd
brnrd

Reputation: 3486

I found a hacky solution to the problem:

I add a event listener on the pause event and remove the src and it stops loading.

video.addEventListener('pause', stopLoading, false);

var pauseTime = 0;

function stopLoading() {
    pauseTime = Math.round(video.currentTime);
    video.src = '';
}

I keep track here of the currentTime of the video so if the user hits play again, the video starts playing from that point.

For this I just have to convert the recorded time into a HH:MM:SS format and set the src back to the video with the correct time.

Any other ideas are welcomed.

Upvotes: 1

Related Questions