Plyr Youtube is WebView ready?

[MrProLopstar]

Faced a problem, Plyr in WebView conflicts with youtube and won't start it.

[deepansh96]

I'm facing a similar problem. I'm facing this problem in low end mobile browsers (MIUI browser, Vivo browser, Opera MINI). They all are WebView based. The Youtube embed does not play 😭 no matter what you do.

[deepansh96]

Just found out that the video plays if the video is muted

[MrProLopstar]

I want to use the player for VK Mini Apps, most likely its webview is based (in my case) on the standard MIUI browser. I tested, yes, with the sound turned off, the video starts (if you turn it on again, then the playback stops).

[deepansh96]

One possible hack is to create a separate Plyr instance, which will stream the audio of that YouTube video.

The audio of the original Plyr will stay muted.

But this will require a lot of work :/

[MrProLopstar]

I also checked that everything works stably on the iPhone, the problem is only on Android.

[MrProLopstar]

Well, such an idea .. Will not it be asynchronous?

[MrProLopstar]

• will have to turn off the sound in the main player, and this can confuse the user.

[MrProLopstar]

Is it possible to intercept youtube events, functions and manually include video when receiving a "play" plyr event? I just looked like that, with sound plyr thinks that the video is running, but YouTube is paused.

[deepansh96]

Yes we can intercept YouTube's events and we can also control things

Go to the embeds section in the readme https://github.com/sampotts/plyr#embeds

Let me know if you find something! Will keep looking at this

[deepansh96]

I tried this method and it still didn't work. I even added a separate button, which will serve the purpose of a user action, and it appears whenever the video is paused. Even that didn't work. Still banging my head trying to figure it out.

@sampotts Apologies for the unnecessary tag but can you look into it?

I just want to know if it's even possible to fix it right now or should I give up on it and come back when there's support for this.

[MrProLopstar]

@deepansh96 , please check out this article: https://developers.google.com/web/updates/2017/09/autoplay-policy-changes. We need to figure out how to allow the user to make the first click on the Youtube player itself, and not on the Plyr shell.

[deepansh96]

But how will we be able to do that? We can only do that via the YouTube IFrame API, because the youtube play button is not exposed, only the Plyr shell's button is.

I tried doing this -> On the event of clicking the Plyr shell play button, i tried calling this.player.embed.playVideo() and it doesn't work

[MrProLopstar]

I tried it too, I also listened to Plyr events, it didn't work either. I tend to believe that you need to actually press the player itself, and not the extraneous buttons. We need to figure out how to make access to the Yotube player bypassing the plyr css trap before the first launch of the player. Also, in the process of writing the text above, I had the idea that at the first start, you can simply insert the YouTube player, and then with the next Plyr changes, but this is a crutch.

[deepansh96]

Chrome, Edge, Firefox None of these browsers block it then why does WebView blocks it? And some WebView versions actually allow it to play, and some don't. I'm not too experienced with frontend development so I'm just trying what comes to my mind!

[MrProLopstar]

I'm not good at this either, but as for me, WebView works relying on the stock browser (in most cases, Chrome). And if it works, then only on old devices with chrome release before 2017. According to their policy, "background playback" is allowed only when the user clicks on the player itself. without this, the video can only run in a muted state. We need to figure out how we can allow the user to make the first click on the Youtube player, and not Plyr.

[jemunk]

The users of our app also has this issue. So far it is proved on Android 7 and Android 10. I haven't tried on other devices.

[MrProLopstar]

The question is in the policy of Google Chroome and similar browsers, they have limited "background playback" for any players without physical pressing.

[toppersdesk]

I also came to the same issue. At first, I thought it's some internal issue with my script. So I tried with plyr and videojs. Both are having the same issues. Did anyone figure out the solution yet?

[MrProLopstar]

I have only come to directly inserted links to YouTube's video, but it is impossible, so that..

[bbevren]

any solution to show original youtube iframe? No matter what i do, it does not work. Only solution is to make video muted.

[MrProLopstar]

I set up a server-side YouTube direct link parser that is updated periodically. If necessary, I can later throw off the link to the example of my api

[toppersdesk]

I did the same thing. I used the youtube-dl to parse and store the direct video source link from youtube and loading it as usual in the plyr. But the question is, if we have to do all this work then what's the use of youtube functionality in plyr and we would also get dependent on the youtube parser which needs frequent updates and is against youtube's policy. I just want to use the youtube iframe directly.

[deepansh96]

Same. Tried the youtube-dl parser at the server side, spent a whole day setting it up but there a clear issues with that method.

• YouTube keeps updating their schema. Something that works right now might break next month
• Getting a direct source link might work for older videos, but the newer videos are stored in 10 second segments. You will have a root URL and a suffix URL for each segment. Rendering that on Plyr will be a pain

[kzr4tama]

Hello, has anyone found solution for this?

[MrProLopstar]

Hello, has anyone found solution for this?

Nope, only if you parse YouTube directly

[aneeskhan47]

Issue: if plyr or any other video player is used in website and video can’t be played by tapping on play ️icon typically it throws the following error in android logcat: play() can only be initiated by a user gesture, source: either it will be vimeo.js or youtube etc

Solution: add webViewSettings.setMediaPlaybackRequiresUserGesture(false); in your android code (where your webview code is)

@MrProLopstar @kzr4tama @jemunk @toppersdesk @bbevren

[Vetronus]

Solution: add webViewSettings.setMediaPlaybackRequiresUserGesture(false); in your android code (where your webview code is)

Has anyone tried it? Does this work?

[aneesdev]

Solution: add webViewSettings.setMediaPlaybackRequiresUserGesture(false); in your android code (where your webview code is)

Has anyone tried it? Does this work?

yes i tried it and it worked

[MrProLopstar]

@aneeskhan47 I have a normal React web application, I probably can't call this function, although I'll try. At the moment, the sound starts, but after the initial loading of the video, before that I parsed the video from YouTube directly, but this turned out to be a less effective method. Also, at the moment, I can't update Plyr, because. gives a critical error in the CSS file. I still updated and pasted the CSS from the old version, I don't know if I did it right

[singhsonukumar6]

while using webview set mediaPlaybackRequiresUserAction to false

[charlesfaybr]

Hello, any solution for this problem?

In my case when opening my website through a link in the instagram bio, it loads inside a webview and generates this problem only on android, iphone works fine.

The problem faced is the same: the video loads with autoplay without sound and when clicking a button outside the iframe to activate the sound using the youtube API, the video is paused.

[MrProLopstar]

Hello, any solution for this problem?

In my case when opening my website through a link in the instagram bio, it loads inside a webview and generates this problem only on android, iphone works fine.

The problem faced is the same: the video loads with autoplay without sound and when clicking a button outside the iframe to activate the sound using the youtube API, the video is paused.

I still haven't found a solution. The video starts with sound only after the youtube iframe is fully loaded or after it has been launched when you press start/pause. As a solution to the problem, I experimented and used ytdl to bypass the use, but alas, this does not work well. The essence of the problem is that the plur is an add-on and is not such a player. Those. if you press play early, the plur handler remembers the action, and only when the frame is formed and the player itself is created, only then does it start playback. And WebView requires such a click on

[charlesfaybr]

I found a solution that solved my problem, it can be improved, let's think together, I leave it open to suggestions!

Follow the steps I've already done:

1 - Add an image with the thumbnail of the video behind the iframe

2 - Add a PLAY BUTTON via html/css, and center it in the middle of the thumb

3 - Define "opacity: 0" in the css for the iframe, and to prevent the user from clicking on the video title or the youtube logo and being directed to the youtube website, we must also add the parameter "transform: scale( 2.5)"

EXPECTED: With the above hack, the user will see the image with the play button and will click, as the iframe is on top...the video will start with audio.

4 - After the video starts, we change the css of the iframe to "transform:scale(1)" and "opacity:1"