plyr icon indicating copy to clipboard operation
plyr copied to clipboard

Published 20 hours ago • verified publisher icon sampotts

Youtube videos doesn't play on Chrome

Open tatet opened this issue 4 years ago • 7 comments

Expected behaviour

Plyr plays a youtube video on Chrome

Actual behaviour

Plyr doesn't play the video and Youtube play button keeps visible. No error thrown on console.

Steps to reproduce

Open https://jsfiddle.net/kmq4zco9/ on Chrome and click on play button.

Environment

  • Browser: Google Chrome
  • Version: 87.0.4280.141
  • Operating System: Ubuntu
  • Version: 20.04.1 LTS

Console errors (if any)

No error thrown on console.

Link to where the bug is happening

https://jsfiddle.net/kmq4zco9/

Additional comments

After some research this bug may be related to first user interaction, it seems that Youtube iframe does not get the user event and the play method fail.

tatet avatar Jan 19 '21 18:01 tatet

Hi,

Could you please let me know the solution on this issue If you resolved. We're facing the same issue in our Windows10 OS with same chrome version.

Looking for your help!

Thanks in advance!

stmaheswari avatar Apr 15 '21 11:04 stmaheswari

I think this is related to the iframe in codesandbox, codepen, etc. If I copy the source to a regular HTML file and open that in Chrome, it works fine.

<!DOCTYPE html>
<html>
  <body>
    <head>
      <link rel="stylesheet" href="https://cdn.plyr.io/3.6.5/plyr.css" />
    </head>
    <div class="plyr__video-embed" id="player">
      <iframe
        src="https://www.youtube.com/embed/bTqVqk7FSmY?origin=https://plyr.io&amp;iv_load_policy=3&amp;modestbranding=1&amp;playsinline=1&amp;showinfo=0&amp;rel=0&amp;enablejsapi=1"
        allowfullscreen
        allowtransparency
        allow="autoplay"
      ></iframe>
    </div>

    <script src="https://cdn.plyr.io/3.6.5/plyr.js"></script>
    <script>
      const player = new Plyr("#player");
    </script>
  </body>
</html>

sampotts avatar Apr 17 '21 11:04 sampotts

Hi,

We used this below code for vimeo player , its not working in chrome when click play button. Looking for your guidance please

stmaheswari avatar Apr 19 '21 07:04 stmaheswari

It feels like it is timing related; like a tiny window where an event was supposed to happen. I'm diagnosing at the moment but I can only reproduce this in an iframe, and chrome has to be in incognito.

Codepen example: https://codepen.io/spamcats/pen/xxqWryv

Edit: and only the YouTube example.

Mathews2115 avatar Jun 03 '21 21:06 Mathews2115

I am facing the same problem, is there any update on this?

I'm trying to build a little webapp that lets different users watch a youtube embedded video synchronously with plyr. If there is a request from one player to start the video, all other clients/users get a message via websocket to start the playback of the current video. I'm calling the play() function of the plyr instance, nothing really special or fancy going on with the sockets. However, if i look at the player of another user in other browsers or tabs (tested in chrome and firefox with the same behavior), I can see the little play button at the control bar changes to the pause symbol. That indicates that plyr somehow started the playback. But the video won't start playing, it shows the youtube play button and the time bar shows the buffering, it looks the same like in the example from @tatet.

Maybe it really is some sort of timing issue, because when I manually hit the play button on the buffering player, it starts playing with no problems. Also after it is done manually at any point of time, the synchronization using the play() function through the socket works really well.

A look into the youtube api subscription of the 'statechange' event using player.on('statechange', (event) => { console.log(`State Change to ${event.detail.code}`)}); shows some weird behavior that somehow fits into the issue description. On a manual click on the play button, the state has the following transition : -1 (unstarted) -> 3 (buffering) -> 1 (playing). However, when it is started via the play() function call through the socket, the transition is as following: -1 (unstarted) -> 3 (buffering) -> -1 (unstarted).

Embedding with a

element or using the

HendrikWDev avatar Jul 22 '22 11:07 HendrikWDev

After some more trial and error, I found a workaround for this... Setting the player.currentTime explicitly to a value (for example to 0 before the first start) seems to compensate for the buffering issue. But it introduces more latency.

I guess it would be a nice feature to have the possibility to preload some chunk of the video before it is started (0.1 percent would be fairly enough to compensate for the buffering timing), but I can't figure out how to do this - even the youtube player API does not seem to offer this (or at least it is not documented): https://developers.google.com/youtube/iframe_api_reference

However, in the plyr docs there is something mentioned to address this, but I cannot find where to set this attribute. https://github.com/sampotts/plyr#:~:text=work%20if%20the-,preload,-attribute%20is%20not

HendrikWDev avatar Jul 22 '22 14:07 HendrikWDev

I'm also experiencing this issue still. I need the interaction to work on my site. Would this issue be fixed?

Setting the player.currentTime works, but it acts weird when I use an event to pause and play the video again. After my event fired, it sets the player event to play, then does nothing after and didn't play, requiring me to manually clicking the video to pause and play it again. After that the player plays and pauses as normal.

I can't always replicate the issue on my site, but I've found that it doesn't work in Chrome, incognito mode with Youtube videos in all the jsfiddle and codepen above.

The original YT controls are shown after clicking the play button as below: image

user1jade avatar Feb 28 '24 04:02 user1jade