On iOS and desktop I don't have problems playing my HTML5 audio with audio.js – everything works fine. But with Android the play-button needs three taps to play!
I've also written a issue about this on audio.js' github: https://github.com/kolber/audiojs/issues/177
REPRO:
go to http://kolber.github.io/audiojs/ on a Android phone (I tested with Xperia Z1/Android 4.4.2)
expected the play/pause button to be in play state initally, but is in loading state
clicking play makes the button go into play state
clicking again sets the button into loading state
clicking again sets the button into playing state, and this time finally plays the audio!
How can I make it play with only one tap/click??
Related
i am searching a way to check if user has watched the entire video on iOS device. I have tried 2-3 html5 video frameworks. Now i make tests with Popcorn.js.
I want the user watches the entire video and not skip to the end. I have tried every possible way i could think but nothing works on iOS. I tried the seeked method but it's not be triggered if an iOS user seeks back-and-forth.
In desktop everything works great of-course...
I've got a quick n dirty trial here,
<body>
TEST
<audio src="preview1.mp3" id="audio"></audio>
</body>
Then in my javascript console on desktop, I do the following:
var audio = document.getElementById('audio');
audio.play(); // the first audio plays just fine!
audio.pause();
audio.src = 'preview2.mp3';
audio.play(); // the second audio plays fine, too!
However, when I do the exact same thing on any mobile device (specifically iOS and Android devices are the ones that I've tried), absolutely nothing happens. No audio plays at all.
I've done a ton of searching online but it doesn't seem to be the case for anybody else?
Thoughts?
If you are having trouble with your audio player, please note that 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 by the iOS. No data is loaded until the user initiates it. This means that the audio player is inactive until the user initiates playback by clicking on the play button.
For Android devices:
Chrome does not allow applications to play HTML5 audio without an explicit action by the user, similar to how it is handled by iOS, but differently than how the stock Android browser handles it.
Reference: http://www.wix.com/support/html5/technical-difficulties/browser-compatibility/faq/my-video-is-not-playing-on-my
I'm building a mobile site in which in embed some youtube videos with the IFrame player API (https://developers.google.com/youtube/iframe_api_reference).
Basically, I need to start this video after the user clicks a custom play button. This button triggers the player.playVideo() on the loaded youtube iframe to play the video. This works fine on the standard android and iphone browser (video starts playing fullscreen). However in Google Chrome's mobile browser (android and ios) I get a second play button over the video after my first click, thus making me click twice to play the video.
Anyone know a workaround for this?
Theoretically the autoplay is disabled on Safari and Google Chrome for Android . In my experience I never could avoid to show the second button with Youtube player API, even with an action triggered by user (the first click).
I'm stuck in a project where I want to auto play video using html5 video. It works fine on desktop browser, but on Android 4.1 default browser it requires me to "touch" (or click) video element (or play button)to play video.
I have tried number of ways:
use trigger
manually calling play function on page load
using autoplay attribute
but none of above works in Android browser.
One solution which I think is to simulate click event on page load but is it programmatically possible to simulate click function?
Referring this answer.
For Android < 4.2.2 it seems that the last DOM event you get is loadeddata. You likely won't get canplaythrough. To autoplay, you then use javascript
var myvideo = document.getElementsByTagName('video')[0];
myvideo.play();
For Android 4.2.2+ all you need in your native code is
WebView.getSettings().setMediaPlaybackRequiresUserGesture(false);
I'm developing an android smarthphone app that should have a video and images displayed side to side on the same screen. I'm using video.js for that. The problem is whenever I click the play button on the video, Android goes fullscreen automatically. How to stop this behavior?
Unfortunately there's no real way to stop this behavior as far as I know. Every video goes to fullscreen when you play it on an Android phone.