Search code examples
htmlvideohtml5-videoios11

HTML5 video tag on IOS 11

I have working code for a video element within my site thats fully functioning on ios 9/10 and all the normal browsers (chrome/ff/ie) etc.

I've noticed that since the ios 11 update the videos no longer play or even work at all. They appear as a blank box with the controls but pressing play does nothing and opening the video full screen does nothing.

enter image description here

Here is my relatively simple code

         <video playsinline onclick="play()" controls autoplay 
         controlsList="nodownload">
           <source src="assets/images/video_im.mp4" type="video/mp4">
         </video>

I've tried different variations of using playsinline="true" and controls="true". They have no effect.

I've tried to google the issue but there seems to be nothing except a podcast taking about ios 11 removing html5 video support, surely there is a fix?

Any insight/help would be much appreciated.

Cheers

Solution

  • It looks like the following code:

    <video>
    <source src="path/to/video.mp4">
</video>

    stopped working on ios11 (with many other features too...). I confirm that source tag did work on ios9 here). Try placing the src="path/to/video.mp4" into the video tag directly, it should work on ios11.

    A working example taken from webkit.org post on New video Policies for iOS:

    <div id="either-gif-or-video">
  <video src="image.mp4" autoplay loop muted playsinline></video>
  <img src="image.gif">
</div>

    Safari on MacOS seems to have a similar problem, maybe it's easier to test there. Looks like we lost the multiple source feature tho :(