Question

我正在使用javascript代码来检测视频是否已加载。

加载后我想为标签添加一个自动播放属性以使其播放，但我找不到添加该属性的方法。这是我使用的代码：

window.addEventListener('load', function() {
    var video = document.querySelector('#bgvid');
    var div = document.getElementById('#bgvid');

    function checkLoad() {
        if (video.readyState === 4) {
            alert('video is loaded')
            video.setAttribute("autoplay")
        } else {
            setTimeout(checkLoad, 100);
        }
    }

    checkLoad();
}, false);

*******************解决方案********************

首先，感谢 DontVoteMeDown 寻求帮助。

正确的代码应该是：

document.getElementById('bgvid').addEventListener('canplaythrough', function() {
    this.play();
    });

Answer 1

为什么不将属性添加到标记中？来自docs：

自动播放 :( ...）视频会在不停止完成加载数据的情况下自动开始播放。

所以我假设（确实不确定）视频会在加载视频的一部分后立即开始播放。

无论如何，如果您仍想添加该属性，video标记中有一些Events，来自docs：

canplay：当有足够的数据可以播放媒体时发送，至少有几帧;
canplaythrough：当就绪状态变为CAN_PLAY_THROUGH时发送，表示可以不间断地播放整个媒体（...）;

因此，您可以使用其中一个事件来设置属性，例如：

document.getElementById('bgvid').addEventListener('canplay', function() {
    this.setAttribute("autoplay", "autoplay");
});

有了这个，你可以避免使用超时，这不是最好的方法。

Answer 2

启用自动播放后无需检查其加载状态，视频只有在可以加载时才会播放。

video.autoplay = true;

看here

使用javascript添加attml到html标记

2 个答案: