视频循环自动播放不适用于 Chrome/safari（webkit 错误）

Question

大家好，我正在尝试让我的视频自动播放并在滑块中循环播放，但有些内容无法在 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>

Answer 1

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

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

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

Answer 2

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

Video loop autoplay won't work on Chrome/safari (webkit bug)