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();
Related
I'm trying to add autoplaying music to a tumblr theme, but Chrome and Firefox both prevent autoplaying audio by default. How do I circumvent this?
Currently, to hear the autoplaying music, a user would have to change their personal browser settings to allow autoplay. Is there a workaround I can use to make the page play audio even if they have sound set to automatic (in Chrome) or autoplay blocked (in Firefox)?
Tumblr themes allow HTML, CSS, and Javascript, so I'd be happy for a solution using any of those. Ideally I would like my autoplay solution to allow multiple songs in a playlist, if possible.
I tried adding an invisible iframe, but that didn't work; I'm not sure whether it was the third-party audio player I'm using, or just that the iframe technique doesn't work at all anymore.
You can't circumvent auto-play from being blocked. There has to be some user interaction before the audio can play. This is the same for both HTML <audio> element as well as the web-audio API's audioContext
There's some reading about this on MDN Autoplay guide for media and Web Audio's API
You can try to play the audio on javascript onload.
Example:
HTML:
<audio controls id="horseAudio">
<source src="https://www.w3schools.com/html/horse.ogg" type="audio/ogg">
<source src="https://www.w3schools.com/html/horse.mp3" type="audio/mpeg">
Your browser does not support the audio element.
</audio>
JavaScript:
window.onload = function (){
document.getElementById("horseAudio").play();
}
I do not think there is a way around autoplay being deactivated until there is user interaction. I was working on a project with similar problem and I decided to put a "begin" button on it to direct the user to click it. By clicking it (click event listener), they would have satisfied an interaction and it would then play my animations and audio.
My autoplay option of Cloudflare Stream tag is working perfectly on Safari, Chrome and desktop browsers but is not working on IOS.
Is there a way to start the video? Why this happens?
Videos on iOS will not start playing unless there is a user action on it.
If you want to autoplay a video in iOS, you have to play it as MUTED.
Also this workaround will not work --> autoplaying as muted, then unmute programatically as soon as the video starts.
One note though: autoplay on iOS will not work at all if power saving mode is ON.
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.
To enable the autoplay of a video we just add the "autoplay" attribute to the video tag.
This doesn't work on mobile devices and browsers like Google Chrome, iPad, iPhone, the "play" method will not work until there is no user interaction with the touchscreen.
But in this link or this link, with a custom JavaScript player, they bypass this block, and the video autoplay on iPhone, iPad, Webkit Browsers and all Mobile Devices without user interaction.
How can i do it myself?
if at the load of the page i simulate touch events this might unlock the video "play" method?
i cloud load a video url only with canvas? without the video tag?
Please help and explain me.
There's a library which uses canvas to autoplay inline video on mobile. The downside is that there is no audio, since canvas originally wasn't intended for that.
The library basically loads all the frames and then shows them to you in a sequence. This brings along some limitations regarding the length of the video.
Beats gifs tho....
https://github.com/gka/canvid
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).