使用 Razorfish / Parallax-JS 自动播放 HTML5 视频答案

【问题标题】：Autoplay HTML5 video with Razorfish / Parallax-JS使用 Razorfish / Parallax-JS 自动播放 HTML5 视频
【发布时间】：2014-11-22 19:01:09
【问题描述】：

在我从https://github.com/razorfish/Parallax-JS/ 插入 Razorfish / Parallax-JS 之前，我在网站的一个页面上使用视频作为背景，该页面会自动播放

我仍然可以右键单击背景并查看播放选项，但无论我做什么，我都无法再让视频自动播放。有人在 GitHub 上问了类似的问题，但没有答案。

我的视频标签会这样打开...

<video id="video_background" preload="auto" muted="" volume="0" autoplay >

我尝试了以下所有方法和许多不同的变体，但没有运气...

document.getElementById("video_background").setAttribute('autoplay', true);
$("#video_background")[0].load();
$("#video_background")[0].play();
$("#video_background").get(0).play();
$('#video_background').attr({'autoplay':'true'});

插件的所有其他部分都在工作，如果我能找到解决方案，那就太好了。

【问题讨论】：

对于布尔值，您应该在 jQuery 中使用 prop() 而不是 attr()。另请注意，true 和 false 是布尔属性的无效值。查看w3c boolean attributes，以及video element 上的其他子主题。不确定这是否能解决任何问题，所以我将其作为评论而不是答案。

标签： javascript jquery html video html5-video

【解决方案1】：

试试这个

<video id="video_background" autoplay loop muted preload="auto">

【讨论】：

如果你能解释一下为什么他应该试试这个就好了。

【解决方案2】：

您可以通过检测页面变化并告诉 HTML5 播放器在到达所需页面时播放来解决它。

$(window).on('hashchange',function(){ 
if(document.URL.indexOf("#intel") >= 0){ 
    var v = document.getElementsByTagName("video")[0];
    v.play();
}

});

【讨论】：