HTML/JS在Chrome中自动播放Clappr 360视频
HTML/JS在Chrome中自动播放Clappr 360视频
提问于 2018-10-01 21:36:56
我想实现一个360视频与Clappr作为我的主页的WordPress基础上的开始元素。我不是编码专家，但我尽了最大的努力。
我使用它来构建我的代码：https://ourcodeworld.com/articles/read/518/how-to-create-a-360-video-player-with-javascript-using-clappr
视频和一切工作正常，但是，不幸的是，Chrome改变了它的自动播放策略，视频不能在Chrome中播放。在Firefox中，自动播放效果很好。
然后我找到了这个解决方案：https://github.com/clappr/clappr/issues/1639#issuecomment-395414240
但是，我的360视频仍然不能在Chrome中自动播放！我真的不知道该怎么做，因为代码片段几乎是一样的。
如果有任何帮助或提示，我将非常高兴！谢谢!
<html>
<head>
<script src="https://cdn.jsdelivr.net/gh/clappr/clappr@latest/dist/clappr.min.js"></script>
<script src="https://cdn.rawgit.com/thiagopnts/clappr-video360/master/dist/clappr-video360.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/can-autoplay@3.0.0/build/can-autoplay.min.js"></script>
</head>
<div id="player" class="video-background"></div>
<script>
// The URL to the 360 video player
var Video360Url = '360_VR.mp4';
// Configure your Clappr player.
var PlayerInstance;
canAutoplay.video().then(function(o) {
var cap = o.result === true;
PlayerInstance = new Clappr.Player({
source: Video360Url,
poster: 'city-view-edit.jpg',
loop: 'true',
autoPlay: cap,
height: '100%',
width: '100%',
hideMediaControl: 'true',
chromeless: 'true',
allowUserInteraction: 'false',
preload: 'auto',
plugins:
{
container: [Video360],
},
parentId: '#player',
});
PlayerInstance.getPlugin('click_to_pause').disable();
});
</script>
</html>
回答 1
Stack Overflow用户
发布于 2021-05-10 11:12:26
只是路过。
你会先试着将视频静音吗？因为chrome和其他浏览器有不允许自动播放带有声音的视频的政策。
Clapper mute demo with JS script
干杯
页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/52592400
复制相关文章
相似问题
腾讯云开发者
Copyright © 2013 - 2026 Tencent Cloud. All Rights Reserved. 腾讯云 版权所有
深圳市腾讯计算机系统有限公司 ICP备案/许可证号：粤B2-20090059 
粤公网安备44030502008569号
腾讯云计算（北京）有限责任公司 京ICP证150476号 | 京ICP备11018762号