I am using the HTML5 video tag on android and sometimes the chrome browser says it requires an explicit user gesture/click to start playback:
Failed to execute 'play' on 'HTMLMediaElement': API can only be
initiated by a user gesture
I know this is a known issue in Android but what I don't understand is why sometimes it plays automatically and on other occasions it requires a user action!
I am using the video tag with autoplay option.
Auto-play is disabled since Android SDK 17 to avoid poor user experiences with video playback (i.e. undesired playback, undesired data usage). Normally video should only play following a user action. This is recommended behavior for both Android and iOS nowadays.
You can, however, set setMediaPlaybackRequiresUserGesture to false to enable auto-play if you really need to. Remember to check the SDK version, because this option does not exist before Android SDK 17.
int SDK_INT = android.os.Build.VERSION.SDK_INT;
if (SDK_INT > 16) {
engine.getSettings().setMediaPlaybackRequiresUserGesture(false);
}
There is a LONG discussion and debate about Google's decision regarding autoplay here:
http://chromium-bugs.chromium.narkive.com/cW5IXVgj/issue-178297-in-chromium-android-chrome-does-not-allow-applications-to-play-html5-audio-without-an
As of January 24th, 2017
HTML5 video tags can autoplay on android if the video is muted. You would need to include the muted and autoplay attributes in the tag to make it work as intended.
Here is a link to the article: Autoplay on Chrome for Android as of version 53
Related
Is there any library that sequences images and audio playback? I'm guessing that's the only way this could work..
Which picture formats would work best? I'm guessing that pictures wouldn't be as compressed as a video, but this example loads instantly for me:
Demo: Autoplay Inline Video iOS
Planning to just convert the video with ffmpeg. Any knowledge and advice would be great before I get started. Thanks
I believe that since iOS 6.1 you can no longer autoplay videos.
Referring to this stackoverflow post
"Apple has made the decision to disable the automatic playing of video on iOS devices, through both script and attribute implementations.
In Safari, on iOS (for all devices, including iPad), where the user may be on a cellular network and be charged per data unit, preload and auto-play are disabled. No data is loaded until the user initiates it." - Apple documentation.
I'm using this example http://threejs.org/examples/#webgl_video_panorama_equirectangular
For a panoramic video player using Three.js which is fine on desktop, but doesn't render on mobile. Just get a black screen and the following warnings:
three.min.js:573 THREE.WebGLRenderer: OES_texture_float extension not supported.
three.min.js:573 THREE.WebGLRenderer: OES_texture_float_linear extension not supported.
three.min.js:573 THREE.WebGLRenderer: EXT_texture_filter_anisotropic extension not supported.
Is there any way to this working on mobile - or am I doomed.
Most of mobile browsers disabled autoplay by default, it requires user interaction (e.g. a click event) to start the video. I believe it's a good intention to save initiate data bandwidth.
Safari HTML5 Audio and Video Guide
Warning: To prevent unsolicited downloads over cellular networks at the user’s >expense, embedded media cannot be played automatically in Safari on iOS—the user >always initiates playback. A controller is automatically supplied on iPhone or >iPod touch once playback in initiated, but for iPad you must either set the >controls attribute or provide a controller using JavaScript.
You just need to create a playback button like below, which is working on my Nexus 7.
playbackButton.onclick = function(){
video.paused ? video.play() : video.pause();
}
For iOS, it's a bit tricky. First issue you would have to deal with is the video format support. The example is using webm which is currently not supported. See Can I Use WebM for more support detail .
Good news is that switch to mp4 format this will work half-way. iOS Safari has its own native fullscreen video player which will take over the screen with video content instead of three.js rendering, so basically you would need inline video player solution (e.g. www.brid.tv/in-page-mobile-monetization/) or js-based currentTime trick (e.g. pchen66.github.io/Panolens/examples/panorama_video.html).
Hope this answers your question. :)
My team and I are tying to make a web application autoplay HTML5 video/audio tags on iPad. So far no luck after many attempts with CSS and JavaScript.
The question is: What other option is there to make it autoplay ?
I'm thinking native app with integrated browser with iOS API calls to simulate a touch/click and thus making the video/audio tags autoplay.
Is it possible and if yes, how and with which iOS version ?
Thanks
you can't auto-play videos and audios on iOS in normal mode, you may use trick like simulate user input to auto-play videos and audios.
Safari HTML5 Audio and Video Guide
In Safari on iOS (for all devices, including iPad), where the user may be on a cellular network and be charged per data unit, preload and autoplay are disabled. No data is loaded until the user initiates it. This means the JavaScript play() and load() methods are also inactive until the user initiates playback, unless the play() or load() method is triggered by user action. In other words, a user-initiated Play button works, but an onLoad="play()" event does not.
This plays the movie: <input type="button" value="Play" onclick="document.myMovie.play()">
This does nothing on iOS: <body onload="document.myMovie.play()">
Have you found solution for autoplay video on iOS device? If not, I've just find a solution here, you can use WeChat of iPhone to open it (just support WeChat of iPhone but not support iPad WeChat), it use video.js player, related code as below:
<video id="example_video_1" class="video-js vjs-default-skin" controls autoplay preload="auto" webkit-playsinline="true" x-webkit-airplay="true" width="750" height="460" poster="" data-setup="{}">
It also has solution for support video play without full screen on iOS/Android/PC.
let's get down to the code:
I'm preparing the document with:
<video width="300" height="400" id="videoStage"></video><button onclick='video()'>Play video</button>
as for the JS function:
function video(){
var vid_url = "https://fbcdn-video-a.akamaihd.net/cfs-ak-ash4/v/82342/969/274169121921_63622.mp4?oh=99ef0d9285cbbd7adf8bc07a845dc0d1&oe=519E400F&__gda__=1369439362_83c7f900e92bdbaa201f49d35a7c144a";
stage = document.getElementById('videoStage');
stage.src = vid_url;
stage.play();
}
working code sample: http://jsbin.com/eviyel/1
this code works just fine and plays the video both on my desktop and my mobile device.
But(!) when the video() function is applied to document.ready - it only plays on my desktop and as for my mobile device it displays empty.
Any solution guys? 10x.
I found the answer myself:
Mobile browsers (such as chrome mobile and iOs's) must have a valid 'click' first to enable both video+audio playback.
Once that click as been achieved, the element that was used to play the video/audio is now playable.
You can now change the SRC of that element to play any new media source programmatically without having to click on the DOM once again.
Starting from iOS 10 autoplaying videos that are muted is allowed without user interaction:
https://webkit.org/blog/6784/new-video-policies-for-ios/
Android still seems to require user interaction, although it might be possible to use a touchend event from scrolling the page to start the video playback.
I am trying to open m.youtube.com using an ordinary browser but to be able to play the videos using HTML5 (instead of the default RTSP playback). To do that, I spoofed User-Agent in Firefox, and added there a string corresponding to iPhone's Safari UserAgent string. After I've done that, I see a nice "iPhone-like" version of the Youtube (instead of an ordinary m.youtube.com for other mobile devices). But the video, when selected, is not being played (on a "User-Agent-spoofed" Safari i can hear only sound, on "spoofed" Firefox the video is hung with a spinning "video is loading" icon). Why that might happen? what kind of features of Safari for iOS HTML5 version of youtube site may use that the video is not played in desktop Safari and Mozilla?
I have checked the Desktop browser requests and responses with Wiresharked, and found the GET request which corresponds to the video asked (the request's Content-type is video/mp4). But the playback works always only on the iPhone's Safari.
What may be the reason? I tried to look into HTML5 code of the Youtube page that contains video player, but there's so much JavaScript (most of HTML is being generated dynamically) that I got lost in it.
Is there any way to make it work on ordinary browsers (I can modify the requests/cookies on-the-fly)? I'd like to have an iPhone-styled youtube with HTML5 on my desktop browser.
Thank you