IFrame player API on mobile Chrome - javascript

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).

Related

Bypassing chrome autopause on videos with sound?

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.

Hiding Androids Media Control Notifications

I have implemented a video using HTML5 on a website, which contains no sound and functions as a background video loop. If a user visits that site on chrome mobile on Android, media controls for the video appear in their notification bar. I don't need these controls for the site and want to ask if it's possible to hide these media-control-elements using JavaScript.
What I mean with "media-control-elements" shows the following example.

Disable iOS video controls for youtube video

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.

JavaScript force video autoplay on mobile devices

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

How does mobile YouTube play videos?

I'm looking to add some videos to my mobile webapp. For the best UX, I'd like to avoid having a simple static video-tag. (because its in an element which is webkit animated and video + webkit animations don't always play nicely together in my experience.)
Rather, I'd like to have an image (with a play icon on it) to "link" to the video. Mobile YouTube (as seen on iOS) have done this very nicely where when you click the image, the video seems to "pop" up to fullscreen and plays. How do they do this? Is it a link? A previously hidden video-tag? Some webkit-animation to do the "popping"?
I snooped around using Chrome Inspector (+user agent switcher to iphone4) but the videos don't play on the desktop browser, and the code overall looks quite complex..
Can you help?
What you can do is on-click of the video thumbnail, you can load the video url using the object/embed tags. In IOS, whenever a video starts playing it automatically plays it in fullscreen(feature of IOS itself)
I believe you can do something similar to this on certain browsers (e.g. WebKit.)

Categories