使用Javascript向html标签添加属性答案

【问题标题】：Add attribute to html tag with Javascript使用Javascript向html标签添加属性
【发布时间】：2015-05-08 19:45:04
【问题描述】：

我正在使用 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();
    });

【问题讨论】：

标签： javascript html html5-video dom-events

【解决方案1】：

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

自动播放：(...) 视频将自动开始播放，无需停下来完成数据加载。

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

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

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

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

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

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

【讨论】：

我知道自动播放应该只有在缓冲足够的数据时才开始播放视频，但实际上每个浏览器的行为不同，有时视频会卡住，这就是为什么我更喜欢先加载完整的视频和只有这样才能播放它
您的代码很好 - 需要更改的一件事是 setattribute，事实上，在加载文档后添加自动播放属性没有帮助。正确的解决方案是添加 video.play()
@EyalBinehaker 很好，你以完美的解决方案结束了。

【解决方案2】：

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

video.autoplay = true;

看here

【讨论】：

感谢您的帮助，事实上，加载文档后添加自动播放属性没有帮助。正确的解决方案是 video.play()。