I want to implement a 360 video with Clappr as starting element to my homepage on WordPress-Basis. I am no coding expert, but I try my best.
I used this to build my code: https://ourcodeworld.com/articles/read/518/how-to-create-a-360-video-player-with-javascript-using-clappr
Video and everything is working fine, but, unfortunately, Chrome changed it's autoplay policy and the video is not starting to play in Chrome. In Firefox autoplay works fine.
Then I've found this solution: https://github.com/clappr/clappr/issues/1639#issuecomment-395414240
But, my 360 video is still not autoplaying in Chrome! I really can't figure out what to do, since the codesnippets are close to identical.
I'd be glad for any help or hint! Thanks!
<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/[email protected]/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>
Just passing by.
Do you try to mute the video first? As chrome and other browsers have policy that not allow auto-playing video with sound.
Clapper mute demo with JS script
cheer