I have some videos (H.264) cannot be played on mobile browsers but can be played on desktop browsers. I use the same browsers (Chrome, Safari) on both desktop and mobiles. However the video control on mobile browser is blank and seems like the video is not loaded correctly.
I am really confused about this issue, and the code I use is really simple:
<video controls style="width:100%"><source src="" type="video/mp4"></video>
Related
My tag audio not function on mobile browsers, my code is the next:
Use different examples but not function Audio Tag Autoplay Not working in mobile
Autoplay is not supported on mobile browsers because it's too disruptive. Video has an option to autoplay if they are also muted. Google says "autoplay is still disabled on Chrome on Android, because muted autoplay doesn't make much sense for audio."
Ref: https://developer.chrome.com/blog/autoplay-2/
I want to make the audio to play when the page is loaded.
It is working well on PC and Android but not working on iPhone.
I know that Autoplay is forbidden on iPhone.
Are there any way to achieve this function on iPhone?
I know that Autoplay is forbidden on iPhone.
Correct. Audio autoplay will not work on iPhone, nor most other browsers on most platforms.
Are there any way to achieve this function on iPhone?
Not from a webpage, there isn't.
I set all the required attributes in video tag but nothing works for me.
If I play video with no sound, it works on all the browsers except iphone safari.
Low Power Mode is also disabled on the iphone and iphone was also connected to wifi. Don't know if it is due to any other phone settings which is preventing autoplay or some guideline that I am missing.
I have an embed tag containing youtube video.
However this does not play on mobile browsers as it says flash required.
I am using HTML and not HTML 5 since my app should support IE 8 too.
I browsed through some awesome JQuery solutions but got only HTML5 based Jquery solutions
Can someone suggest me good solution to have my youtube video play in IE8+ , Chrome , FF+ and mobile browsers too.
This embed code youtube provides by default will work for HTML5 browsers (mobile phones) as well as old browsers that need flash:
http://jsfiddle.net/austinpray/G5GhH/1
<iframe width="560" height="315" src="http://www.youtube.com/embed/VIDEO_ID" frameborder="0" allowfullscreen></iframe>
As best I can tell by looking at the iframe's code, this code sniffs the capabilities of what your browser can play and displays what works best. If you are on browser that has flash capabilities it uses flash and if flash isn't available it defaults to HTML 5. I tested this and it works on iPhones and Android phones. Here is the Youtube support document.
I am building a site where I have several <video> elements (looped animations) that act as part of my design (not as an actual video). This works quite well in desktop browsers, yet I am in trouble on mobile devices.When I display the site on Android or iOS devices (ie. mobile webkit) I will get the OS's video player appearance and the videos will open in some sort of popup when I click them. I do know that I can bypass the autoplay restrictions by doing sth like:
window.onload = function() {
var pElement = document.getElementById("myVideo");
pElement.load();
pElement.play();
};
But this will again open the video(s) in a seperate window...
Does anyone know of a possibility to emulate / enable desktop-like behavior on mobile devices? Thanks!
EDIT:
Markup is basic <video>-syntax btw:
<video autoplay loop>
<source src="vid.mp4" type="video/mp4" />
<source src="vid.ogg" type="video/ogg" />
<source src="vid.webm" type="video/webm" />
</video>
Hmm, I'm not sure about Android but iOS devices can't run multiple video streams simultaneously:
Multiple Simultaneous Audio or Video Streams
Currently, all devices running iOS are limited to playback of a single
audio or video stream at any time. Playing more than one video—side by
side, partly overlapping, or completely overlaid—is not currently
supported on iOS devices. Playing multiple simultaneous audio streams
is also not supported. You can change the audio or video source
dynamically, however. See “Replacing a Media Source Sequentially” for
details.
No, Android or iOS devices (ie. mobile webkit) are not able to run video as you are wanting . Video will open in a default video player of device.
YouTube uses a mov or mp4 with ios to load the native look and feel for videos, or it links out to their app to play the video since it's installed on every ios device.
Why do you need windows.onload to bypass autoplay? If I remember correctly setting the preload tag to none
<video src="vid.mov" preload=”none”></video>
should work.
Also, have you tried using the Video For Everybody approach? With that should be able to get the video to play in the web page rather than by the phone's OS, that way I believe you can achieve the same effect on supported devices.
EDIT: In regards to j08691's answer, an alternative approach for iPhones could be to design a simple web viewer app for the site for iPhone which has a workaround for the no-multiple video playing problem.