3

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

Davabo
  • 115
  • 1
  • 2
  • 10

2 Answers2

1

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 :(

GabLeRoux
  • 16,715
  • 16
  • 63
  • 81
0

I had a similar problem with videos not playing on Safari. The problem was my web server. I moved the video to another hosting server, loaded it from there and it worked.

e.g.

instead of:

<video src='/myVideo.mp4' controls> </video>

do something like this:

<video src='https://anotherServer.com/myVideo.mp4' controls> </video>
Brendan
  • 834
  • 1
  • 9
  • 20