发表新帖
发表新帖

The canplay/canplaythrough events for an HTML5 video are not called on Firefox. Why?

前端 未结
关注
8 1302
自闭症患者
自闭症患者 2020-12-15 17:23

I\'m building a jQuery plugin for managing HTML5 videos. I\'m trying to capture the canplay and canplaythrough events. In Chrome, the event is fired without problem. In Fire

相关标签:
8条回答
  • 死守一世寂寞
    2020-12-15 17:58

    The most likely reason you're seeing this probably has to do with timing issues. You stated in your accepted answer that putting jQuery into the head rather than the footer solves the problem. This tells me that the issue is DOM parsing and script execution order. The most likely culprit is that the "canplay" and "canplaythrough" events were being fired before jquery and your page script were parsed and the event handlers added - but only sometimes, depending on network traffic and load times. By putting the script in the head, you forced your event binding to occur before the DOM elements were created, thereby ensuring that you didn't miss any events.

    As an aside, the performance benefits of putting script elements at the bottom of the page are debatable. If you really want to tweak page performance, use something like LABjs to manage parallel script loading.

    0 讨论(0)
  • 自闭症患者
    2020-12-15 18:00

    After 1.5 days of trying different approaches from here (in vanilla). The events "canplay" and "canplaythrough" with addEventListner don't work in Edge. They work fine in every other Browser. So I ended up with a check of "ready-state" with setTimout :-(. Not realy elegant, but it works for me.

    Controller.prototype.backGroundControl = function () {
var vid = document.querySelector('#bgvid');
var bgImg = document.querySelector('#bgimg');
_this = this;

if (vid.readyState === 4){
    bgImg.style.opacity = "0"
} else{
    setTimeout(function(){
        _this.backGroundControl();
    },500)
}

    }

    0 讨论(0)
  • 醉酒成梦
    2020-12-15 18:01

    The problem is that your video element has triggered the canplaythrough event before you registered the event handler.

    As you pointed out in your own answer, you can put your scripts in the <head>, but this is bad for your page performance.

    A better way to fix your problem is to check the readystate attribute and execute your function manually in that case:

    var $video = $('video'),
    videoElement = $video[0];

$video.on('canplaythrough', callback);

// If the video is in the cache of the browser,
// the 'canplaythrough' event might have been triggered
// before we registered the event handler.
if (videoElement.readyState > 3) {
  callback();
}
    0 讨论(0)
  • 隐瞒了意图╮
    2020-12-15 18:01

    Even if my question didn't get any attention whatsoever, I think it's a good idea to give an explanation for people who may stumble on this in the future...

    The problem is really weird: if the jQuery core is included in the footer, some of the video events do not work. If the jQuery core is included in the head of the document, all events are called correctly.

    So the solution is to include the jQuery core in the html head even if "best practices" for optimization recommends placing all script at the end of the body for faster loading times.

    0 讨论(0)
  • 梦毁少年i
    2020-12-15 18:02

    If you expect the Firefox to load the whole audio after you trigger load then it would not do this. It will fire the loadstart but will not download anything. No progress events will be fired. And it will actually do no request to that file. You can see this behavior in the Firebug.

    Firefox will only start loading the file after you trigger 'play`.

    Proof. See console output.

    0 讨论(0)
  • 爱一瞬间的悲伤
    2020-12-15 18:08

    Adding:

    var video = $('video');
video.trigger('load');

    After adding the canplaythrough event listener fixed it for me on Firefox and Safari.

    0 讨论(0)
 看不清?
提交回复
热议问题