Plyr: Video not play on standard browser in Android

[mrrtee]

Expected behaviour

Video should be able to auto-play or at least having "Play" button to tap for toggle play/pause

Actual behaviour

Video seems to be loaded (could see default control on few second), but there is no "Play" button to tap for play/pause this video. I've tested on various browsers and also in iPhone, other browsers work well except this standard browser on Android

Environment

• Script: Plyr v3.3.7
• Browser: Standard Browser v2.2.2.80
• Operating System: Android v5.0

Steps to reproduce

• 5 video types i.e. MP4, WebM, OGV, WMV, 3GP
• Using standard HTML5 video tag

• Include CSS/JS of Plyr v3.3.7 i.e.
  <link rel="stylesheet" href="https://cdn.plyr.io/3.3.7/plyr.css">
<script src="https://cdn.plyr.io/3.3.7/plyr.js"></script>

• Set JavaScript for assign script to video
  <script>
const player = new Plyr("#video",{
autoplay: true,
clickToPlay: true,
controls: ["play-large"]
});
</script>

• Also add attribute to

[sampotts]

Does anything work on that browser? It's just about the worst browser I've used (and that includes <= IE6). It's really hard for me to test as my Google Nexus 5 test phone refuses to install it and defaults to Chrome.

[mrrtee]

Hi @sampotts , I try to make duplicate page to test on plain video script by without your script, it seems to be working on this way, I can see play button, and can tap to play video, but this plain script does not work for other browsers in mobile device (both on Android & iPhone)

Plain video script is;

<video id="video" poster="video.jpg" preload="auto" loop autoplay controls>
<source src='video.mp4' type='video/mp4'>
<source src='video.webm' type='video/webm'>
<source src='video.ogv' type='video/ogg'>
<source src='video.wmv' type='video/x-ms-wmv'>
<source src='video.3gp' type='video/3gpp'>
</video>

[mrrtee]

OK, Got solutions now, it's turn back to basic HTML5 code, for somehow it works now for all browsers including desktop, Android, iPhone for various browsers i.e.
Desktop: Chrome, Firefox, Edge, Opera, IE11
Android: Standard Browser, Chrome, Firefox, Opera
iPhone: Safari, Chrome, Firefox, Opera

[ctf0]

am building a media player with cordova & from several days testing, you need at least android v6.x.x or all you would get is a black screen

[vesper8]

@ctf0 I'm also building a Cordova app around the plyr player, any chance you could share the one you are working on? Is it on GitHub? Thanks!

[ctf0]

@vesper8 sadly its for a client but there is nothing special really,
however take note that on android v4 u will get a black screen because the html5 back then wasnt loading the metadata which the plugin needs in order to show a picture
but as a way around u can play the video & pause it right away but as far as i can tell there no way to mute the sound while doing that

i havent tested on v5 so cant tell if it will work or not but on v6 it will work without any issues, just follow the docs

on a side note
am building a complete file manager for cordova which should make things far easier, i will publish it once testing is done

[jamesoflol]

I found that my polyfilling setup, which was working for IE11, wasn't working for android v4. I was using Babel in my build-time scripts. I found that adding polyfill.io in the runtime page load fixed it in android v4. An awful solution, obviously. I haven't found a better solution, and I have absolutely no idea how to (or time to) debug that abomination.

[ctf0]

@jamesoflol use the polyfilled version https://github.com/sampotts/plyr#javascript as the normal wont work

[vesper8]

just curious @ctf0 @jamesoflol have you tried using the Plyr player on IOS w/ Cordova?

I've been testing my app and it works perfectly on Android but doesn't load at all on Ios, neither on simulator or on real device.. using IOS 12 in both cases.. just get a black screen

[ctf0]

@vesper8 is there a way to debug the issue on IOS ?

[vesper8]

managed to get some info with the debugger, it was causing this error

Unable to post message to https://www.youtube.com. Recipient has origin file://

And I found the fix! Simply needed to add this line to the config.xml inside src-cordova

<!-- Add the whitelist plugin -->
<plugin name="cordova-plugin-whitelist" source="npm" spec="*"/>

<!-- White list https access to Youtube -->
<allow-navigation href="https://*youtube.com/*"/>

[Ib-R]

i managed to make the plyr work on android 4.4 by editing the css,

.plyr__video-wrapper {
    height: 100% !important;

    video {
        height: 100% !important;
    }
}