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