视频循环自动播放在 Chrome/safari 上不起作用（webkit 错误）

Posted 2023-03-05

【中文标题】视频循环自动播放在 Chrome/safari 上不起作用（webkit 错误）

【英文标题】：Video loop autoplay won't work on Chrome/safari (webkit bug)

【发布时间】：2015-10-04 00:00:12

【问题描述】：

大家好，我正在尝试让我的视频自动播放并在滑块中循环播放，但有些无法在 chrome 和 safari 上播放。我发现 webkit 浏览器有一个错误，它会在重新设置样式时停止视频自动播放功能...

这是视频和页面。 （在火狐上工作） http://dustintong.com/projects.html#ts

我认为你必须重新触发 .play() 不知道我做错了什么。 javascript 新手... 这是下面的代码。

JS

var myVideo = document.querySelector('video');
var mediaController = myVideo.controller;

mediaController.play();

HTML

<div id="video">
<video src="images/7-4s.mp4" autoplay loop muted> 
</video> </div>

【问题讨论】：

在 Safari 中自动播放视频无法正常工作。我们必须手动或通过脚本启动播放。但在 chrome 中它会正常工作。

【参考方案1】：

我想最好的解决方案是在你的视频标签之后添加这个脚本--

<script type="text/javascript">
    document.getElementById('videoid').play();
</script>

有点俗气，但效果很好:) 您也可以尝试将 preload 属性设置为 true。

【讨论】：

不起作用。预载=真？你能澄清一下吗？我是 JS 新手

preload 属性指定开发者是否以及如何认为在页面加载时应该加载视频。

【参考方案2】：

在 Safari 中，自动播放效果很好。 如果你把这个<video src="images/7-4s.mp4" autoplay loop muted> 你不需要任何js。 你可以试试这个插件https://github.com/videojs/video.js

【讨论】：

该死的插件工作了！！希望它不会增加很多页面加载时间