Video.js - loadeddata event never fires

后端 未结 2 1569
不知归路
不知归路 2021-01-03 06:17

I am integrating Video.js into a project and having a few issues.

I have it in my HTML as:

相关标签:
2条回答
  • 2021-01-03 06:42

    I suspect you ran into the same issue I did. If your browser is using the HTML5 video (instead of Flash fallback) Some events, like loadedmetadata and loadeddata, may fire before Video.js binds the event listeners.

    This is particularly true if you are doing some preloading, and there is a delay between when the video start to load and when you initialising Video.js. It also seems to occur when there is a cached copy, which is why it works on every second refresh (invalidating the cache).

    The solution is to just throw your video initlisation stuff in the <head> instead of at the bottom of the document. If that is not ideal (which it wasn't for us), we added an event listener to the <head> and then checked for it after we initialised the player. For example

    In <head>:

    <script>
    var loadedmetadata = false;
    if (window.addEventListener) {
        window.addEventListener('loadedmetadata', function(ev) {
                loadedmetadata = true;
        }, true);
    }
    </script>
    

    And then later in your script:

    if (loadedmetadata === true && videoPlayer.techName === 'html5') {
        // call the callback you would have attached to
        // the event listener.
    } else {
        // add event listener here
    ]
    

    window.addEventListener is not supported in IE7/8, but thats okay, because they don't support HTML5 video anyway, so it won't ever fire. IE9 supports window.addEventListener and HTML5 video, so it will work as expected.

    We also check that the techName is html5, since the Flash player is created when we initialise the Video.js object, so the event shouldn't have fired previously.

    0 讨论(0)
  • 2021-01-03 06:45

    loadeddata won't necessarily fire before playback starts. In Flash it never does, with HTML5 the event is relayed from the video element so it depends on the browser behaviour.

    loadedalldata is when the entire video is downloaded, so is unlikely to occur before playback starts.

    You specify which function to remove from the event because you could have bound more than one function to the event, e.g.

    vidPlayer.addEvent("play", onPlay1 );
    vidPlayer.addEvent("play", onPlay2 );
    vidPlayer.removeEvent("play", onPlay1 ); // onPlay2() would still be executed
    
    0 讨论(0)
提交回复
热议问题