I created a website for preview of HTML5 video autoplay, but it is not working on iPhone and Android 4+. Can anyone please let me know how can i make it work?
As of iOS 6.1, it is no longer possible to auto-play videos on the iPad.
My assumption as to why they've disabled the auto-play feature?
Well, as many device owners have data usage/bandwidth limits on their devices, I think Apple felt that the user themselves should decide when they initiate bandwidth usage.
After a bit of research I found the following extract in the Apple documentation in regard to auto-play on iOS devices to confirm my assumption:
"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.
Here is a separate warning featured on the Safari HTML5 Reference page about why embedded media cannot be played in Safari on iOS:
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.
What this means (in terms of code) is that Javascript's play() and load() methods are inactive until the user initiates playback, unless the play() or load() method is triggered by user action (e.g. a click event).
Basically, a user-initiated play button works, but an onLoad="play()" event does not.
For example, this would play the movie:
<input type="button" value="Play" onclick="document.myMovie.play()">
Whereas the following would do nothing on iOS:
<body onload="document.myMovie.play()">
Source taken from :
Can you autoplay HTML5 videos on the iPad?
but as for android,
here you go
http://www.broken-links.com/2010/07/08/making-html5-video-work-on-android-phones/
Related
This works perfect with other browsers but safari automatically downloads file.
<iframe src="lib/audio/voice.mp3" allow="autoplay" class="audio-main" id="iframeAudio">
</iframe>
I need play background audio in a website. Opera and Chrome are working fine unfortunatelly Safari Browser open website automatically audio download.What exactly is the problem, Thanks for advance
No Auto-Play by default says the man
According to Safari / WebKit Auto-Play policy it gives users the ability to browse the web with fewer distractions, particularly in the form of relief from websites that auto-play with sound. They instruct websites to assume that any use of video or audio will require a user gesture or click to play.
Policy configuration
Users can enable auto play functionality on a per website bases.
Safari >> Preferences >> Websites >> Auto-Play
Options are:
Allow All Auto-Play
Stop Media with Sound (default)
Never Auto-Play
Functionality iframe allow autoplay works in Safari
When the user has allowed auto play from a specific website the iframe tag works as expected.
<iframe allow="autoplay" src="happy.mp3"></iframe>
Not surprising though so too does the <audio> element load and play on its own.
<audio autoplay loop src="happy.mp3"></audio>
Detect auto play is disabled and display player
However it should be expected that this functionality will not be enabled, since the ability exists for users to disable it, so it’s important to detect if auto play was denied and proactively react accordingly.
var promise = $('video')[0].play();
if (promise) promise.catch(error => {
// Auto-play disabled show controls
$('audio').attr('controls', '');
});
For this option we do not need auto play at all since we are manually calling play. This will not work of course if a user action is required so all we are left to do is to add the controls and display the player.
Audio with controls
For the sake of completion, there's always the other option; avoid auto play all together... but what's the fun in that.
<audio controls src="happy.mp3"></audio>
nJoy!
I know that many newer browsers now disable autoplay when the video isn't muted or mute it and then play. Without user interaction it's also not possible to call play on a video. That's understandable, but I'm wondering how youtube is still able to start the videos with sound.
I checked and they do use the video tag, just not with any autoplay/muted attributes and loading some blob. It's not the user interaction opening the video, it also starts when opening a link in incognito mode.
So my conclusion, it should still be possible. But how? Or did browsers add some kind of exception for trusted video streaming sites?
Thanks in advance
For the Youtube case, it is probably a pre-populated white list
https://blog.google/products/chrome/improving-autoplay-chrome/
If you don’t have browsing history, Chrome allows autoplay for over 1,000 sites where we see that the highest percentage of visitors play media with sound.
For other generic cases, you can refer to the following rules (for Chrome at least)
https://developers.google.com/web/updates/2017/09/autoplay-policy-changes
Autoplay with sound is allowed if:
User has interacted with the domain (click, tap, etc.).
On desktop, the user's Media Engagement Index threshold has been crossed, meaning the user has previously play video with sound.
On mobile, the user has added the site to his or her home
screen.
It is argued that html5 video cannot be automatically payed in mobile browsers.
However, I found this website autoplaying video (though not looping it) on mobile:
http://campaign.nissan.co.il/qashqai0515
How is this possible?
Autoplay does not work on all versions of iOS and modern versions of Android. Both platforms require the user to click the video or a play button to initiate video play. It was made this way to conserve the devices battery life and limit cellular bandwidth.
There have been some workarounds in the past that use javascript to trigger the play event however from my testing those workarounds no longer work. Another trick is showing a sequence of images that looks like a video - Apple has done this in the past.
Note: I tested the link you provided in iOS 8 and it does not autoplay.
I have a sound effect that I need to play whenever someone taps on something but the first tap sound always lags and then it's fine after that. I understand it should have something to do with the preload but I've had preload set to auto the entire time.
<audio id="effect" src="audio/bloop.mp3" preload="auto"></audio>
How can I get rid of that initial lag?
Incase you are using - Safari on iOS:
Preloading and on iOS devices is disabled to save bandwidth.
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.
Source: Safari Developer Library
While testing the HTML audio tag, I came across two problems with mobile browsers. First, the "autoplay" attribute does not always function, so that the user needs to touch the "start" button on the screen. Second, a 1:09 recording, cuts off at about one minute with some browsers, but plays to completion with others. An example of the first problem is that autoplay works as it should using the Google Chrome browser on my desktop, but not on my Android (HTC EVO) mobile phone. An example of the second problem is that the mobile Chrome browser plays the audio file to completion on my phone, but the default browser that came with my phone cuts off about 8 seconds prematurely. The autoplay feature, however, works as it should on the "default" browser.
Are these problems caused by reduced functionality and memory when going from a desk or laptop environment to a smartphone environment?
Don't know about Android, but iOS has well-known limitations on HTML5 audio and video. Apple claims they are designed to save data charges, even though they apply even when you are on WiFi, or the assets are local as in an e-book.
The limitations include no preloading until some user interaction occurs, no looping, no inline replay on iPhone, no change of playback rate, no playing backwards, no volume control, etc. etc. See http://blog.millermedeiros.com/unsolved-html5-video-issues-on-ios/ for a good summary.