With iOS 10, Safari on iphones play videos inline. I read on webkit.org that with iOS 10 webkit has unprefixed the webkit-playsinline attribute so you use just playsinline in the video tag now. But, "unfortunately, this change did not make the cut-off for iOS 10 Developer Seed 2" so for some iphones (presumably) you need to use webkit-playsinline. But to cover all iOS 10 iphones, including those after the Developer Seed 2 cut-off, do I use both playsinline and webkit-playsinline in the video tag or just webkit-playsinline?
Update (14 Dec 17). A friend testing my pages with an iphone 5, system 10.3.2, reports that the native player pops up when using just webkit-playsinline (without playsinline). In my own tests of pages with both, the Quicktime player is (thankfully) supressed
Related
Most threads relating to similar problems are years out of date. I'd be extremely grateful if anyone can shine a light here.
A small, 20 second video on my website is running into problems which seem inconsistent in the iOS environment. I've searched every technical forum I can find and not been able to find a solution. The video works perfectly on any other O/S (Windows; Android; Amazon Fire; etc).
These are my test results with iOS devices:-
iPhone with iOS 13.6 - YES it runs ok.
iPad with iOS 9.3.6 - YES it runs (iPad too old to be updated further).
iPad Mini with iOS 13.6 - NO on any browser.
iMac with iOS 10.15.6 - Safari NO; Chrome YES Firefox YES.
This is my code (I'm using Bootstrap 4 framework for the site):-
<div class="embed-responsive embed-responsive-4by3">
<video class="video-background" controls="true" controlsList="nodownload" playsinline>
<source src="videos/logoVid265.mp4" type="video/mp4">
<source src="videos/logoVid.webm" type='video/webm;codecs="vp8, vorbis"'>
Your browser does not support the video tag.
</video>
</div>
The .mp4 is H.265 encoded but I've also tried H.264 encoding with the same result.
The video in the web page in the link in the comments appears not to play on Safari on an iPAD running iOS 13.4.1, while playing fine on Safari on am MAC.
However, if you extract the video URL and paste it into a new tab on the same Browser on the same iPAD it plays properly, so the video itself is not the issue.
Digging deeper, it is actually the class in the containing div which is causing the issue:
<div class="embed-responsive embed-responsive-4by3">
<video controls="true" playsinline="true" class="">
<!-- <video width="520" height="360" controls controlsList="nodownload"> -->
<source src="videos/logoVid.mp4" type="video/mp4">
<source src="videos/logoVid.webm" type="video/webm;codecs="vp8, vorbis"">
Your browser does not support the video tag.
</video>
</div>
If you remove this class the video will play on the original website on the same browser and device.
Going a little bit deeper again, if you just remove the 'overflow=hidden' or the 'position=relative" attribute in this style then the video will play.
You will likely want to investigate and experiment a bit further but it is possible the problem is simply that the video element or the controls are being masked by another layer on your page. Either way, the video itself is playing fine.
As a note, in case it is of interest, investigating this type of issue is much easier if you have access to a Mac you can connect your iOS device to. You can then use the web inspector in the Mac's Safari developer tools to inspect web pages on the the iOS device.
You do need to go into the settings on iOS and set this - at the time of writing this is at:
iOS device -> settings -> safari - advanced -> 'Web Inspector' (enable this)
When you connect the iOS device to your Mac and open Safari you should see an option under the 'Develop' tab to connect to the device (you may need to enable developer options in Safari if you have not already):
Background:
I have two iPads running the same version of iOS and Mobile Safari. The site wrapper works just fine on both. Additionally, I have multiple versions of the video for different devices (h.265 HEVC .mp4, VP9 .webM, h.264 .mp4) which all work fine in the different supported browser/OS variations including most iOS devices I've tried.
Problem:
iPad A (Gen 7 2019 iOS 13.4.1) - Correctly chooses h.265 mp4 and plays it as expected. If h.265 doesn't exist it plays the fallback mp4 correctly instead.
iPad B (iPad Mini 4 iOS 13.4.1) - Won't play either mp4 file or any of the other MP4s that make up the site. I just get the crossed out play button.
What I've tried:
I've checked the headers and the files are being served correctly with the correct MIME Type Content-Type: video/mp4
Tried multiple different hosting environments including Apache, IIS, Node Express - same problem.
Tried Chrome & FF on the iPads. - Same problem.
I tried different ways of presenting the video. The site uses VideoJS to display videos, but I removed that and used HTML 5 <video> tags in a flat HTML file. I even tried navigating directly to the video in the browser URL. In all cases iPad A is fine and iPad B fails.
All this makes me think its a video encoding error but I have the same problem regardless of which mp4 file I use (h.264 or h.265). Is there bitrate or other encoding issues with some Apple hardware that don't apply to others?
Here are the videos in question:
https://boundarywaters360.com/video/paddling.mp4 (Normal mp4)
https://boundarywaters360.com/video/paddling_h265.mp4 (h.265 version - note Chrome won't play this)
Days ago I had a similiar problem.
What it fixed this issue for me was that I adapt the video dimensions to smaller as the device screen resolution. After i've had done this the video plays without problem.
I could not find any documentation on the part of apple what confirmed this issue, but maybe you could try it and let me know if this was helpful.
Audio in HMTL5 video works fine in Safari on iOS 10.3.1 on iPhone, though it doesn't in standalone web apps (same html code & video file). Video play is fine. Just no sound.
There are a few other related discussions in the past, eg, Why HTML5 video doesn't play in IOS 8 WebApp(webview)?. I tested on iOS 10 using the html provided by that post.
Not sure whether it is a new bug introduced in iOS 10, or a bug that has never been fixed by Apple since earlier versions. Does anyone experience this issue? Are there any workarounds? Thanks in advance.
I had the same question. I googled all over the place. Then I realized what was causing the problem: I had the physical "soft mute" switch (next to the volume buttons) on my iPad turned on. Infuriatingly, this muted the volume on web apps, but not Safari web pages.
I have a website, it works fine on android devices and on iPhone 5 iOS 8.1.
However, on iPhone 5 iOS 6.0 and iPhone 3GS 6.1.6 the video doesn't even play, it shows a play button with a / through it when tested on Safari or Chrome.
I've done some research, and with the iOS 6.0 update comes Safari 6.0.
Knowing this I searched for the point in time when Safari started supporting the HTML5 video tag.. the first version of Safari supporting this is Safari 3.1. according to the apple website, and according to the 'caniuse.com' website, Safari Mobile supports the HTML5 video element from 4.0 onwards...
Source(s):
http://caniuse.com/#feat=video
Code:
<video preload="auto" autoplay="autoplay" loop="loop" id="background">
<source src="background/background1.mp4" type="video/mp4"> </source>
<source src="background/background1.webm" type="video/webm"> </source>
</video>
Safari supports MP4 so technically it should work, and Chrome supports MP4, webm and ogg..
So with Chrome having support since Chrome 4.0 for the HTML5 Video Tag I don't believe that this is the issue, I believe this is driver related.
It is documented all over the web that the iOS does not support multiple HTML5 audio. I ran a test and here are the observation:
iOS 5 (iPad1) - can play only one audio at a time.
iOS 6 (iPad2) - can play multiple audio.
iOS 7 (iPad3) - can play multiple audio.
It looks like on iOS 6 & 7, we can play multiple HTML5 audio, but to my surprise i could not find any discussion regarding this over the web, also apple documentation still says "Currently, all devices running iOS are limited to playback of a single audio or video stream at any time"
I am not sure if multiple HTML5 audio will work across all devices which support iOS6 and iOS7, also will apple continue to support this with next version of iOS, does anyone has any idea about this?