I have a website set-up, where the background is a YouTube video using Tubular.js plugin. There is a problem with chrome browsers, that auto pauses the youtube video if I load it with mute: false flag. Chrome is the only offender, as it works with opera, firefox etc. If I change the flag to mute: true the video will atuplay fine.
Chrome recently started to block atuplayed videos with sound. Is there an option to bypass this on chrome, or at least modify the tubular.js library/js call so that it will only mute (regardless of settings) on chrome user-agents?
https://codepen.io/anon/pen/MGEZrO
Thanks in advance
According to chrome logic it is impossible to autoplay video if it is NOT muted. However they allow to autoplay video if it is muted and WILL NOT stop it if user will unmute it. By this (user interaction) chrome means just a single tap OR click by the user on the website (everywhere, not video components only).
Just make your user to make a single click on your webpage and THEN you can mount/start video with autoplay and sound.
I have the similar situation with my react spa. And I force my user to make a single click before mounting the video. Only this way it starts to play with sound.
I also had the situation where the video MUST have started even without click and the I just addEventListener on whole page to unmute it as soon as possible
play(from = null) {
document.addEventListener('click', () => {
// any click will force my video to unmute
this.player.muted = false;
});
// rest code for updating state etc
}
Unfortunately, triggering click is not working (the video will stop automatically)
According to their guidelines about autoplay on chrome ;
Unfortunately, Chrome cannot provide any whitelist exceptions to the autoplay policy.
They also explain how to present the content in a less-invasive way (muted video first) and some other tips about the policy.
Related
I use the react-player module in a React music app i'm working on.
My app has a music playlist. When a track has finished playing, it goes to the next one automatically.
Problem is, when the browser tab do not have the focus (background tab), it doesn't play the next track since it seems to be blocked by the browser's autoplay policy (have tested with Chrome & Firefox).
See documentation here: https://developer.mozilla.org/en-US/docs/Web/Media/Autoplay_guide
I was suggested to turn on autoplay for particular websites (for Chrome, go to chrome://settings/content/sound); but it doesn't work either. Anyway, this is not a solution for my visitors.
I've been struggling with this problems for days; any ideas on how achieve this ?
I have multiple providers (Youtube, Soundcloud, ...) so player does not always play things from the same service.
I'm able to detect the visibility of the tab using the Page Visibility API.
In my console, I can see that the onready event of react-player is fired; but the player is "stuck" until I go back to the tab again - then it plays.
Here's a pastebin of the current code of my player. The function responsible for getting the source to play is
const resolveTracks = async(track,source,backwards) => {
...
}
Thanks!
I'm maintaining a legacy ASP/VBScript application for some warehouse scanners. They run Android 7 with Chrome 64. I can configure Chrome however I want so I'm not constrained like a normal website would be. Due to the nature of this web application, playing a sound on page load would improve usability (when the submitted action fails). Is there any way to allow an audio file to play on page load?
I can play sounds easily after a user interaction. However, I've tried multiple methods to play a sound on page load without success:
An <audio> tag with autoplay does not play (<audio autoplay="">).
Play the sound during the load event (Audio.play()). The returned Promise fails with the error:
NotAllowedError: play() can only be initiated by a user gesture.
Create an Audio with autoplay, and append it to body during the load event.
Create an Audio, append it to body, and .play() it during the load event. Yields the same "NotAllowedError".
Whitelisting the website for sounds in Chrome.
Ensuring the media autoplay setting is set to allowed in Chrome.
Both Chrome and Firefox, have dropped support for the autoplay attribute for both audio and video unless it's a video with the sound muted.
You can read more on that here: Autoplay Policy
However, recently I found a workaround using the Howler.js library, and it seems to work quite well in just these lines of code:
let timer, sound;
sound = new Howl({
src: ['<?= get_theme_file_uri() ?>/images/spotAudio.mp3']
});
sound.play();
You can download the library and read the docs here: https://howlerjs.com/
I am using IFrame Player API
to play youtube videos in my website.when user clicks a particular link it popups a lightbox and plays video automatically.In Desktop it works fine,and in ios I understand why doesn't it work (they already mentioned why), but for android chrome its not working.Is autoplay was disabled also in andorid browsers? Please enlighten me.
This link seems to answer most of your questions:
YouTube iframe embeds cannot autoplay on Android
But in short, it seems like autoplay has been disabled on Chrome for Android so you need to treat it in the same way as iOS and use a user interaction to trigger the play.
Update: There's a more affirmative information that it has been disabled here: https://developers.google.com/web/updates/2016/07/autoplay#why_the_change
It will play however if you set it to autoplay in a muted state.
A solution I've just been working on for autoplaying would be to instantiate the player with an empty video on page load:
var player = new YT.Player('yt-media-player', {
height: height,
width: width,
videoId: ''
});
Then on the click event of opening the lightbox you can load the particular video and call it to play:
player.loadVideoById(youtubeId);
player.playVideo();
My goal is to present clients with a video from youtube (iframe api) that cannot be skipped or seeked forward. On all platforms but iOS this is simple. But I'm having problems with Apple's fullscreen player.
Once playback on a video has started, you are transported to Apple's iOS video player, with it's standard controls. What I have been unable to find is if you can hide/disable these controls in the fullscreen layout.
Alternatively, if I can capture events from the iOS player and merely detect when a user is trying to skip would work as well. I've attached events in accordance with the HTMLMediaElement specs, but none of them fire. Nor do any of youtube's events fire.
I am tracking the console through Safari from the iOS simulator, which could be a problem on it's own.
Any help would be appreciated. I've gone through every SO post on the subject.
While I was unable to find anyway to hide the iOS default viewer (I believe it's impossible), I was able to get the youtube events to fire. With keeping an interval, and checking that against the video's time each time an event is fired, I can figure out if a user has skipped.
As of Chrome 46, new background tabs will no longer autoplay audio or video. How can an application tell if its autoplay has been blocked?
Some ideas:
UA sniff for Chrome 46+
check if tab is visible with Visibility API
check if new tab with History API
check if video is actually playing
Something hacky like this will probably work, but I would really like to know if there's a better way:
function isAutoplayBlocked() {
return isChrome46 && isNewTab && isHiddenTab;
}
Firstly on mobile, autoplay is completely blocked.
The best way to see if your video is blocked is to look for the media events that indicate that the element has started playing such as ontimeupdate and your element has autoplay attribute attached. If there are no updates and no user interactions then you can assume that autoplay has been suspended.