HTML5 Video tag not working in Safari , iPhone and iPad

html5-video, ipad, iphone, mobile-safari, safari

Solution

I had same issue with apple devices like iPhone and iPad, I turned off the low power mode and it worked and you should also include `playsinline` attribute in video tag like this:

<video class="video-background" autoplay loop muted playsinline>

It only worked when including `playsinline`.

Problem

I am trying to create an html5 web page in which there is a small video like 13s , I converted the flash version of this video into 3 format : .ogv using fireFogg , .webm using firefogg also and .mp4 using HandBrake application the html script I used in my page : ``` <video width="800" height="640" loop preload="false" autoplay controls tabindex="0"> <source src="xmasvideo/video.mp4" type="video/mp4" /> <source src="xmasvideo/M&P-Xmas 2.ogv" type="video/ogv" /> <source type="video/webm" src="xmasvideo/M&P-Xmas.webm" /> </video> ``` The video is working fine in Chrome and FireFox but not working at all neither in Safari on Desktop nor on iPhone or iPad , the output is simply a blank page that shows the controls of the the video tag but nothing is loaded Note that the Safari version that I have supports HTML5 video

Original source

Related problems