player.js icon indicating copy to clipboard operation
player.js copied to clipboard

?playsinline=0 does not work on Android

Open MyTestApp8200 opened this issue 6 years ago • 17 comments

Expected Behavior

`

MyTestApp8200 avatar Mar 05 '18 12:03 MyTestApp8200

@MyTestApp8200 playsinline can't be set as an attribute on an iframe element. It's either via Javascript in the options argument or else as an URL parameter as ?playsinline=0.

Does this work for you?

luwes avatar Mar 05 '18 17:03 luwes

Thanks. But it works for iPhones(iOS) and not Android. Can you help ?

MyTestApp8200 avatar Mar 06 '18 06:03 MyTestApp8200

@MyTestApp8200 what is your device/browser?

luwes avatar Mar 07 '18 02:03 luwes

It does not work in any of the android phones with chrome browser. I've check in the latest 3 versions i.e. Lollipop, Marshmallow & Nougat. `

`

MyTestApp8200 avatar Mar 07 '18 05:03 MyTestApp8200

This should be resolved in our latest player release.

luwes avatar Mar 13 '18 19:03 luwes

Hi luwes, the videos are not opening in fullscreen on android. Can you please check. Below is the code. It works on iOS but not on android and Chrome browser.

`

MyTestApp8200 avatar Mar 20 '18 05:03 MyTestApp8200

Hello, this issue shouldn't be closed, it's still not working on Android, player.js v2.10.1 (latest) @luwes

gaelganlut avatar Mar 19 '20 17:03 gaelganlut

reopen this please, there is still issues with android

derrikfleming avatar Jul 25 '20 18:07 derrikfleming

Thanks for the feedback everyone, reopening this.

fisherinnovation avatar Jul 25 '20 19:07 fisherinnovation

what is the user-agent of these Android devices?

on my end in Browserstack on a Galaxy S8 / Android 7, https://player.vimeo.com/api/demo?playsinline=0 opens fullscreen when pressing play.

luwes avatar Aug 21 '20 16:08 luwes

cc @phoenix-appscore, @samuelpeixoto, @chrisg88, @verbeeksteven, @shaunsantacruz

luwes avatar Aug 27 '20 16:08 luwes

what is the user-agent of these Android devices?

on my end in Browserstack on a Galaxy S8 / Android 7, https://player.vimeo.com/api/demo?playsinline=0 opens fullscreen when pressing play.

Hm, that's odd. Perhaps I jumped the gun a bit.

I'm using player.js in an embedded WebView in a React-Native app. I've tested on Galaxy S10, Pixel 3A, Pixel 3 XL all with Android 10. playsinline=0 appears to have no effect on any of them, but it works on every Apple device I've tested on.

derrikfleming avatar Aug 27 '20 16:08 derrikfleming

@derrikfleming so the Android devices all play inline on your end with playsinline=0? (Galaxy S10, Pixel 3A, Pixel 3 XL)

they don't open fullscreen when hitting play?

luwes avatar Sep 02 '20 19:09 luwes

@luwes that's correct, just like if the query wasn't there, they play inline when hitting play.

derrikfleming avatar Sep 02 '20 19:09 derrikfleming

We are still having this issue. @luwes @derrikfleming anyone know if a fix is out or a workaround?

ghost avatar May 25 '21 22:05 ghost

@raleytom I would recommend this: https://github.com/vimeo/player.js/#requestfullscreen-promisevoid-error

derrikfleming avatar Jul 03 '21 21:07 derrikfleming

I faced the same issue in an embedded web view on Flutter. I have solved it by adding a manual call to requestFullscreen() when the play event triggers. Below is an example:

   <html>
      <head>
        <style>
          body {
            background-color: lightgray;
            margin: 0px;
          }
        </style>
        <meta name="viewport" content="initial-scale=1.0, maximum-scale=1.0">
        <meta 
          http-equiv="Content-Security-Policy" 
          content="default-src * gap:; script-src * 'unsafe-inline' 'unsafe-eval'; connect-src *; 
          img-src * data: blob: android-webview-video-poster:; style-src * 'unsafe-inline';">
      </head>
      <body>
        <iframe 
          src="https://player.vimeo.com/video/$videoId" 
          width="100%" height="100%" frameborder="0" 
          allowFullScreen>
        </iframe>
      </body>
      <script src="https://player.vimeo.com/api/player.js"></script>
      <script>
        var userAgent = navigator.userAgent || navigator.vendor || window.opera;
        
        if(/android/i.test(userAgent)) {
          const iframe = document.querySelector('iframe');
          const player = new Vimeo.Player(iframe);
          
          player.on('play', function() {
            player.requestFullscreen().then(function() {
              // the player entered fullscreen
            }).catch(function(error) {
              // an error occurreds
            });
          });
                
          player.on('fullscreenchange', function(event) {
            if(!event.fullscreen) { 
              player.pause();
            }
          });
        }
      </script>
    </html>

waseemabbas8 avatar Sep 28 '23 08:09 waseemabbas8