HTML5 video tag on IOS 11

陌路散爱 提交于 2019-12-12 16:11:54

问题


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.

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


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




回答2:


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>


来源:https://stackoverflow.com/questions/47221536/html5-video-tag-on-ios-11

易学教程内所有资源均来自网络或用户发布的内容,如有违反法律规定的内容欢迎反馈
该文章没有解决你所遇到的问题?点击提问,说说你的问题,让更多的人一起探讨吧!