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):
Related
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
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'm am trying to build a simple music app using meteor as my framework. I'm using html5 audio tags as my player. Everything works and displays completely fine in my browser but when testing on the iOS simulator all i get is a black screen with a giant gray play button that does not work.
I'm wondering if this is a meteor problem or if iOS limitations are too robust in order for the html5 audio player to display correctly.
If anyone knows the solution to this please help.
Thanks
I had the same issues with the html5 video element. I will share my findings for that as it sounds like the same issue for the audio tag.
iOS web app and Cordova
For iOS just add “webkit-playsinline” next to your audio tag as done below for video:
<video webkit-playsinline>
<source src="mySource.mp4" type="video/mp4">
</video>
Cordova
For a Meteor Cordova iOS app you also need to add the following to mobile-config.js to set the cordova config.xml settings:
App.setPreference('AllowInlineMediaPlayback', true);
You can read up some more about this on http://blog.blairvanderhoof.com/post/78586868260/getting-the-html5-video-tag-to-work-in-cordova-for
If that does not work you can go with the following cordova plugin which supports audio playback: http://plugins.cordova.io/#/package/org.apache.cordova.media
Example from the plugin docs:
var myMedia = new Media("http://audio.ibeat.org/content/p1rj1s/p1rj1s_-_rockGuitar.mp3")
myMedia.play({ numberOfLoops: 2 })
Hope it helps.
Regards,
Riaan
HTML5 Audio is not supported on most mobile devices. Check out the documentation at: https://developer.mozilla.org/en-US/docs/Web/HTML/Element/audio for more information. iOS does not support a lot of the new HTML5 Media elements and APIs at this point. The only mobile browser that supports HTML5 audio is Firefox Mobile. Hope this helps!
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 need to create a web page, that shows video on iphone, ipad, blackberry & desktop browsers.
On desktop browsers and ios it works fine. But i have a issue with blackberry.
<object data="path_to_3gp_video" type="video/3gpp" title="Some title" width="400"
height="300">
After some googling i figured out that this code works fine on blackberry:
<a href="rtsp://v3.cache5.c.youtube.com/0/video.3gp"><img
src="media/prs_poster_ns.jpg"></a>
But I need play it on my server, which doesn't supports rtsp protocol.
Are there any alternative solutions?
Few pointers:
Check if Blackberry Browser version is it v4.6.0 or above, verify it from this link
Check if Blackberry Browser and your server supports HTTP Progressive Download as you said RTSP is not supported by server
Check if the Blackberry OS support RTSP / HTTP / HTTP-Progressive playback, using this link
Find your device here supported media types and check what video format does it support.