html5 视频就绪状态随机 2 或 4，视频未加载答案

【问题标题】：html5 video readystate random 2 or 4, video not loadinghtml5 视频就绪状态随机 2 或 4，视频未加载
【发布时间】：2014-08-19 22:38:31
【问题描述】：

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

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

在测试中，我使用了 20 个相同的视频，它们具有作为 get 参数传递的唯一 id，因此它们被单独加载。

这是 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，当这种情况发生时，加载程序只会不断检查视频的就绪状态。有时它可以正常工作。如果它是 2 或 4，它似乎是完全随机的。在 Firefox 中似乎比在 chrome 中工作得更好。

我应该在我的代码中检查/更改什么？

谢谢！

【问题讨论】：

顺便说一句，我认为您要求很多用户的互联网连接同时加载 20 个视频...
嗨，Psychemaster，您是对的，但每个视频只有 150 - 200 kb。我们稍后会添加一些加载动画，这样就可以了：）这将是一个很棒的网页。
如果您将视频数量减少到总共 4 到 6 个，是否一切正常？这可能是浏览器支持的打开连接数的限制，因为您尝试同时播放所有 20 个。
您好 Krg，感谢您的回复。我已经尝试了 4 个视频，但同样的问题仍然存在。第一个视频的就绪状态为 4，而其他视频的就绪状态为 2。我从 w3c（大兔子电影）下载了示例 mp4/webm，所以电影应该没问题。

标签： javascript html video

【解决方案1】：

我已经整理好了。

由于未设置自动播放属性，视频无法很好地加载。

由于源标签是一次性加载视频的，所以如果前一个视频的就绪状态为4，我将它们删除并一个一个添加。

感谢您的帮助！

【讨论】：