时间戳

首页 > 解决方案 > HTML5 视频未动态播放

javascript - HTML5 视频未动态播放

问题描述

我正在尝试制作 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>

标签： javascriptjqueryhtml

解决方案

此问题可能是由于srcHTML5 自动播放功能生效时未正确设置视频属性所致。不过，并非所有浏览器都清楚地报告此错误。如前所述，现在浏览器对自动播放内容也更加严格。例如，查看 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>

推荐阅读