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
Related
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.
I am building a Learning App. This has a quiz-like interface, so, lots of screens. Most screens are accompanied by animations. Considering quality and file-size, .mp4 seems to be the best format for the animations. But, HTML like:
<video autoplay muted controls>
<source src="file.mp4">
</video>
doesn't autoplay on Chrome (the latest versions) if the Data Saver is turned on. (It works on Firefox and Safari.) These .mp4s are ~30 KB in size. I understand that Google is trying to prevent unnecessary data-heavy background videos from being downloaded. But, in my case, (i) asking the user to click on the play button everytime; or, (ii) asking her to turn off Data Saver, which is hidden somewhere in the browser settings, is terrible UX.
I tried a jQuery .load() followed by a .play() on pageload. I created a fake button that would do .load() and .play() during onclick(), and triggered the button click on pageload, etc. Nothing seems to work. Any hacks that would make the video autoplay even with Data Saver on?
I am the lead on the Chrome Data Saver team.
This is working as intended since Data Saver prevents autoplay.
However, I believe this behavior may be changing in a future version of Chrome.
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/
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.
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.