I've recently run into an issue when embedding a video with standard iframe embed code and adding autoplay=1 like this:
<iframe width="420" height="315" src="http://www.youtube.com/embed/Le4kjAIcj4k?rel=0&autoplay=1" frameborder="0" allowfullscreen></iframe>
The results when testing:
autoplay works both on desktop and mobile if the Flash-version of the
player is loaded (if Flash is present & no HTML5-beta participation cookie is present)
it works in the HTML5-version on the Desktop as well
but does not autoplay in the HTML5 mobile version (tested on Android
4.1.2 with both Firefox Mobile and Chrome on this page, on Android you need to make sure you don't have flash).
Is this a known issue? Any workaround?
When you use the <iframe> Player in a browser that has Flash disabled, playback is handled via HTML5 <video> tags.
Apple explicitly prohibits autoplaying media in <video> tags in iOS Safari.
This is also the case for at least recent versions the default Android Browser or in Chrome. I'd strongly suspect that Android Firefox has the same restriction.
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):
I am not technical but have my engineer working on putting together a web-based video chat application with the goal of using it on the iOS web browser(s). The service appears to be functioning correctly on a desktop browser. However, we cannot get it to work on iOS browsers.
on Safari (using iPhone 11 - iOS 13) the video freezes immediately and shows still frame. On Chrome there is never a connection made, nor does Chrome prompt to access camera/mic.
I've read conflicting work that says WebRTC is supported in iOS Safari/Chrome and other work that says it is not.
Would appreciate anyone's help here! Is it possible to create a URL-based video conferencing platform that can correctly function on iPhone?
Try adding 'muted', 'autoplay', 'playsinline' attributes to the Video Element as shown below.
<video muted autoplay playsinline></video>
If you can play it back, it's ok.
From the perspective of the user experience, the browser can autoplay audio or video with audio only on some sites such as Youtube and sites that the user has allowed. It cannot be done on other sites.
To play on sites that can't autoplay, modify it to play with user gestures such as clicks.
video.onclick = _ => video.play();
Here's an example that works from Raspberry Pi to iPhone iOS 13.4
Haven't been able to make it work from Chrome on windows to iPhone
https://apprtc.tc
source code:
https://github.com/webrtc/apprtc
GetUserMedia is not supported in Chrome for iPhone
It is supported in Safari for iPhone
It is supported in Chrome for Windows
Mobile Chrome (v45.2454.68) in iOS displays error when rendering the audio element using data uri.
It works in desktop Chrome, Safari and Firefox and also works in mobile Safari. Is there a way to fix it?
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.
I currently have a website that does not function very well inside of Opera Mini. I would like to display a message that informs the user that the website is best viewed in Mobile Safari, and provide the user a link that will open the URL in Mobile Safari.
I know that the reverse is true, by taking a link like http://www.apple.com and changing it to ohttp://www.apple.com you are able to navigate from Mobile Safari into Opera Mini. However, I cannot find information on if the reverse is true.
You can’t do this in Opera Mini. Opera Mini can hand off to the native browser (or player) for video content that it can’t play, but not for HTML content.