HTML/JS 在 Chrome 中自动播放 Clappr 360 视频答案

【问题标题】：HTML/JS Autoplay Clappr 360videos in ChromeHTML/JS 在 Chrome 中自动播放 Clappr 360 视频
【发布时间】：2018-10-01 13:36:55
【问题描述】：

我想在 WordPress-Basis 上实现一个以 Clappr 作为起始元素的 360 度视频。我不是编码专家，但我会尽力而为。

我用它来构建我的代码：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 中自动播放！我真的不知道该怎么做，因为coden-ps几乎相同。

我很乐意提供任何帮助或提示！谢谢！

<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>

【问题讨论】：

标签： javascript google-chrome autoplay 360-virtual-reality clappr

【解决方案1】：

路过。

您是否先尝试将视频静音？由于 chrome 和其他浏览器的政策不允许自动播放有声视频。

Clapper mute demo with JS script

欢呼

【讨论】：