The latest articles on DEV Community by Morteza Z (@mort3za). https://dev.to/mort3za https://media2.dev.to/dynamic/image/width=90,height=90,fit=cover,gravity=auto,format=auto/https:%2F%2Fdev-to-uploads.s3.amazonaws.com%2Fuploads%2Fuser%2Fprofile_image%2F223886%2Fe228ca2a-792d-4030-a161-da5f68b86415.jpeg https://dev.to/mort3za en Morteza Z Thu, 17 Oct 2019 08:58:21 +0000 https://dev.to/mort3za/how-to-fix-autoplay-html5-video-on-ios-4p39 https://dev.to/mort3za/how-to-fix-autoplay-html5-video-on-ios-4p39 <p>If you have used Javascript to play an html5 video, you may encounter some errors, including this error:</p> <p><a href="https://media.dev.to/dynamic/image/width=800%2Cheight=%2Cfit=scale-down%2Cgravity=auto%2Cformat=auto/https%3A%2F%2Fthepracticaldev.s3.amazonaws.com%2Fi%2Fb1q9ijz4v1mggqr13nmh.png" class="article-body-image-wrapper"><img src="https://media.dev.to/dynamic/image/width=800%2Cheight=%2Cfit=scale-down%2Cgravity=auto%2Cformat=auto/https%3A%2F%2Fthepracticaldev.s3.amazonaws.com%2Fi%2Fb1q9ijz4v1mggqr13nmh.png" alt="Unhandled Promise Rejection: AbortError: The operation was aborted."></a></p> <p>or permission errors.</p> <p>The reason is that browsers in recent years changed their <a href="https://webkit.org/blog/6784/new-video-policies-for-ios/" rel="noopener noreferrer">policies</a> to prevent autoplay video because they think users don't want it (that's correct in most cases).</p> <p>What we can do to solve this issue?</p> <ul> <li>Add <code>autoplay</code>, <code>muted</code> and <code>playsinline</code> attributes to your <code>&lt;video&gt;</code> element.</li> <li>If you need sound, you should put an unmute button beside the video, then in onClick callback, get video element and set <code>muted = false</code> by Javascript.</li> </ul> <p><strong>Pro Tip!</strong> If you have multiple videos on your page and only a single unmute button, then make sure to unmute all videos in the click callback of that button, otherwise, iOS won't let you unmute video before playing it on demand.</p> <p>That's it, happy autoplaying!</p> html video autoplay ios