Hello Developers,

HTML 5 video autoplay not working in ios devices. so we have used to canvas for this. please refer my below code.

<div class="video-responsive">
  <video class="video" muted="muted" loop autoplay>
    <source src="video.mp4" type="video/mp4">
    Your browser does not support HTML5 video. </video>
  <canvas class="canvas"></canvas>
</div>
<script src="canvas-video-player.js"></script> 
<script>
	
	var isIOS = /iPad|iPhone|iPod/.test(navigator.platform);
	
	if (isIOS) {
 
		var canvasVideo = new CanvasVideoPlayer({
			videoSelector: '.video',
			canvasSelector: '.canvas',
			timelineSelector: false,
			autoplay: true,
			makeLoop: true,
			pauseOnClick: false,
			audio: false
		});
		
	} else {
		
		// Use HTML5 video
		document.querySelectorAll('.canvas')[0].style.display = 'none';
		
	}	
	
	</script>

This is the code for autoplay video in all devices.

canvas-video-player.js file you can download from this link. Download here

<video class="video" muted="muted" loop autoplay>
    <source src="video.mp4" type="video/mp4">
    Your browser does not support HTML5 video. </video>

This code used for without any ios system.

<canvas class="canvas"></canvas>

Canvas will display in ios system like iphone and ipad.

Thank you 🙂