Question

我的网站上的视频遇到了一些问题，希望有人可以提供帮助。

页面上有20个视频，我正在尝试同时播放。为此，我创建了一种预加载器，用于检查视频的readystate。

对于测试，我使用了20个相同的视频，其中一个唯一的ID作为get参数传递，因此它们是单独加载的。

这是html（这一次是20次）：

    <video width="277" height="276"  class="bgvid" loop="loop">
        <source src="<?=DOMAIN?>video/big_buck_bunny.webm?cb=16" preload="auto" type="video/webm">
        <source src="<?=DOMAIN?>video/big_buck_bunny.mp4?cb=16" preload="auto" type="video/mp4">
    </video>

javascript如下：

    function checkLoad(video, loaded) {
        console.log(video.readyState);
        if(video.readyState == 4) {
            loaded++;
        }
        return loaded;
    };



    function initVideo(){

        var count = $('.team').find('video.bgvid').length;
        var loaded = 1;
        var videos = document.getElementsByTagName('video');
        var isLoaded = false;

        $.each(videos, $.proxy(function(i, elm) {
            console.log(loaded + ' == ' + count);
            if (loaded == count) {
                isLoaded = true;
                return false;
            } else {
                loaded = checkLoad(elm, loaded);
            }
        }, this));

        if (!isLoaded) {
            setTimeout(initVideo, 300);
        } else {
            $.each(videos,function() {
                this.play();
            });
        }
    }

问题在于，有时视频的状态为2，当发生这种情况时，加载程序只是继续检查视频的readystate。有时它可以正常工作。如果它是2或4似乎是完全随机的。似乎在firefox中然后在chrome中工作得更好。

我应该在代码中检查/更改哪些内容？

谢谢！

Answer 1

我已将其整理出来。

由于未设置自动播放属性，因此视频无法正常加载。

由于源标记视频的所有内容都是一次性加载的，因此如果上一个视频的状态为4，我将其删除并逐个添加。

感谢您的帮助！

html5视频readystate随机2或4，视频无法加载

1 个答案: