使用 Javascript 将属性添加到 html 标签

Question

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

加载后，我想将 autoplay 属性添加到 <video> 标记以使其播放，但我找不到添加该属性的方法。这是我使用的代码：

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:

autoplay: (...) the video will automatically begin to play back as soon as it can do so without stopping to finish loading the data.

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

无论如何，如果您仍然想添加属性，video 标签有一些 Events，来自文档：

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

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

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

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

Answer 2

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

video.autoplay = true;

看here

使用 Javascript 将属性添加到 html 标签

Add attribute to html tag with Javascript

javascript

html

html5-video

dom-events