Play HTML5 video after its loaded

Question

I'm searching for a way to play html5 video after its fully loaded. And while video is still loading - showing video placeholder image. Before i've used setTimeout function, but its not the way to accomplish this.

setTimeout(function() {
    $('banner__video--fallback').fadeOut();
    $('.banner__video')[0].play();
}, 800);

So what is the way around this to play video after its loaded?

EDITED: With solution 'canplaythrough' video still start ot be playing before its fully loaded.

$('.banner__video')[0].addEventListener("canplaythrough", function () {
  $('banner__video--fallback').fadeOut();
  $('.banner__video')[0].play();
}, false);

Possible duplicate of [Wait until an HTML5 video loads](http://stackoverflow.com/questions/13864795/wait-until-an-html5-video-loads) — SLePort, Dec 04 '16 at 08:57

Alexandre Aimbiré · Accepted Answer · 2018-11-23T20:17:33.543

2

Why don't you just use HTML5 video attributes? There's no need for javascript.

<video autoplay poster="/placeholder.jpg">
    <source src="video.webm" type="video/webm">
    <source src="video.mp4" type="video/mp4">
</video>

autoplay plays the video as soon as it is loaded and poster assigns an image to stand in the video while it's loading.

You should read more here: http://www.w3schools.com/html/html5_video.asp

edited Nov 23 '18 at 20:17

answered Dec 05 '16 at 12:37

Alexandre Aimbiré

1,494
2
14
26

score 0 · Answer 2 · answered Jun 26 '20 at 14:32

0

I think this is a better option to play a video after its load:

var vid = document.getElementById("myVideo");
vid.oncanplaythrough = function() {
    alert("Can play through video without stopping");
};

answered Jun 26 '20 at 14:32

Atif Saleem

126
1
4

score -1 · Answer 3 · answered Dec 04 '16 at 08:50

-1

You can download video with ajax call like this: Another: Force Chrome to fully buffer mp4 video or just use canplaythrough property.

answered Dec 04 '16 at 08:50

mitch

2,235
3
27
46

So im trying to go with canplaythrough, but its been playing before its fully loaded $('.banner__video')[0].addEventListener("canplaythrough", function () { $('banner__video--fallback').fadeOut(); $('.banner__video')[0].play(); }, false); – Mary Oleksiuk Dec 04 '16 at 09:07
@MaryOleksiuk yes, because this event is trigger when enough data is loaded to play. Please try with ajax call (see the link). – mitch Dec 04 '16 at 09:13

Play HTML5 video after its loaded

3 Answers3