HTML5视频没有动态播放

Question

我正在尝试制作一个HTML视频。当它是静态的时，它工作得很好，但当我动态设置它时，它就不工作了。我错过了什么？

请注意，这在代码段中运行良好，但在我的本地版本上不起作用——为什么？

$(document).ready(function() {
var videoURl = 'https://www.w3schools.com/htmL/mov_bbb.mp4';
$('video').find('source').attr('src', videoURl);
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<video width="400" controls autoplay="autoplay">
<source src="" type="video/mp4">
</video>

Answer 1

此问题可能是由于HTML5自动播放功能生效时未正确设置视频的src属性所致。但并不是所有浏览器都清楚地报告了这个错误。如前所述，如今浏览器对自主播放的内容也普遍更加严格。例如，查看Chrome更新的自动播放策略。

为了使这个跨浏览器兼容，您可以在脚本中准备source元素，将其附加到video元素，然后触发视频的play()函数(请参阅下面的片段(。

$(document).ready(function() {
var videoURL = "https://www.w3schools.com/htmL/mov_bbb.mp4";
var source = $("<source>");
source.attr("src", videoURL);
source.attr("type", "video/mp4");
$("video").append(source);
$("video").get(0).play()
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<video width="400" controls></video>