CODEWITHSUNDEEP
javascriptjqueryhtmlvideo
mpn
mpn

Reputation: 1018

Using event listening wait for readyState html5 video

Here is my javascript on loading of video.

var vid = $("#video");

$("#video").on("load",function() {
    if ( vid[0].ReadyState === 4 ) {
        console.log("loaded video!");
        console.log(vid);
        vid.fadeIn();
    }
});

I want to play my video everytime the video div refreshes after .load() runs. How do i loop this until readyState == 4? I tried using on("canplaythrough") but this is never recognized as a function...

Upvotes: 0

Views: 2842

Answers (1)

user1693593
user1693593

Reputation:

Make sure you set preload="auto" (and don't use autoplay) in the tag, then you can use the canplay event:

var vid = $("#video");

vid.on("canplay", function() {
  vid[0].play();
  vid.fadeIn(1000);
});

$("#change").on("click", function() {
  vid.hide();
  vid[0].src = "http://www.html5rocks.com/en/tutorials/video/basics/devstories.mp4";
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<video id="video" width="500" height="280" preload="auto" style="display:none">
  <source src="http://clips.vorwaerts-gmbh.de/big_buck_bunny.mp4" type="video/mp4">
  <source src="http://clips.vorwaerts-gmbh.de/big_buck_bunny.webm" type="video/webm">
  <source src="http://clips.vorwaerts-gmbh.de/big_buck_bunny.ogv" type="video/ogg">
</video>
<button id="change">Change source (mp4 only for this example)</button>

Upvotes: 1

Related Questions