Player.js: Play and Pause events aren't fired on iOS and Android apps

[stefanotauriello]

Expected Behavior

Actual Behavior

player.on('play', function() {
console.log('played the video!');
});

It isn't fired on iOS and Android apps, for over 1 year all was ok but from several days there's a problem

Steps to Reproduce

[KristoferGoransson]

I can confirm this too. No events are received anymore in our app either.

[kirrukirru]

Yes, none of the events are firing, also loadVideo, unloadVideo are not working 👎

[stefanotauriello]

Will it be fixed soon? How can I resolve?

[fisherinnovation]

Thanks for reporting everyone. I am noticing in the demo code you provided there is no host element to place the player into.

Without the DIV appended to the DOM, you will see an Uncaught TypeError: You must pass either a valid element or a valid id. error when attempting to run this code.

Can you test https://jsfiddle.net/cxdnbgeo/ an example with the DIV added to the test code? It works as expected in iOS in Android on my end.

[stefanotauriello]

@fisherinnovation
I omitted the html code, it’s not the problem.
The problem is that in iOS and Android Vimeo Player doesn’t fire events anymore...

[kirrukirru]

@fisherinnovation, in my case, it's embedded browser (Android WebView, iOS WkWebKit) loading local html file having the same issue.

[satishnavik]

Is there any solution to this issue. I am facing this issue from last 2 days.

Any work around to this will be a helpful

[stefanotauriello]

@satishnavik
Yes from two days.... How can we resolve?

[reckoner165]

We are trying to reproduce this behavior in order to fix it. Both @stefanotauriello's code (HTML included) and https://jsfiddle.net/cxdnbgeo/ seem to work as expected on Android and iOS. Can you provide more information w.r.t steps to reproduce the issue?

What Android/iOS version and which browsers do the player events not fire on?
Do you also see errors accompanying this behavior? If so, can you share them?

Thanks!

[satishnavik]

I haven't found any solution yet....it is not throwing any error/exception.

Has anyone found any solution or work around?

Thanks in advance!

[stefanotauriello]

@reckoner165
My code has worked for Over 1 year on hundreads of mobile phones, from two days it doesn’t work anymore. It has been tested on all devices, so it’s very important finding a solution.
Every test has to be done on real device and not on emulator

[satishnavik]

@reckoner165

Just copy and paste the jsfiddle code on a html page and run it on the any browser.

[stefanotauriello]

@satishnavik
The code works in browsers, it DOESN’T work in iOS and Android apps

[satishnavik]

Its not working on any browser as well

Chrome Version 69.0.3497.92
Firefox Version 62.0

[reckoner165]

Thanks for additional information! The above code snippet works on both Chrome 69.0.3497.92 and Firefox 62.0
Both Android and iOS web players work as well.

@stefanotauriello Since you mentioned that the events are not firing in the iOS app, can you confirm that you are utilizing the player.js API and not https://github.com/vimeo/PlayerKit on iOS ?

[stefanotauriello]

@reckoner165
Yes i’m using the player.js API

[trohil]

We are using the player.js API and are experiencing the same problem.

We have an entire training platform built on these videos and all of our users are getting stuck because the player is not communicating to the page to enable the next button.

[satishnavik]

Previously it was working without using the webserver means just running the local html file using the file:// path but now it is not working..!!

The hybrid Mobile app opens the local html file on the browser (Android WebView, iOS WkWebKit). Here player.js is not firing any event nor throwing any error.

[stefanotauriello]

@trohil We’re in the same situation, i should be contacted by Vimeo developers. Stay tuned!

[trohil]

@stefanotauriello Thanks. Let me know what you hear from the developers. We are racing to put a couple of hotfixes in to compensate, but a Vimeo solution would be more ideal.

[fisherinnovation]

This issue should be patched and corrected now. Please test again when you get a moment.

Thanks again for providing the detailed feedback on this everyone. I will leave this open until confirmed corrected.

[trohil]

@fisherinnovation Thank you. I will test it and let you know what I see.

[stefanotauriello]

@fisherinnovation It works now!! 👏👏👏

[lykrysh]

Thanks!!

[satishnavik]

Thanks...Its working now...!!!

[joshdavenport]

Pretty sure this is happening again? At least, when loading via https://player.vimeo.com/api/player.js right now

[christianMD]

@joshdavenport Same here, the 'play' event is not working using Chrome/Safari on iOS.

[luwes]

@joshdavenport @christianMD do you have a test page online?
we couldn't reproduce it on our end. play events are firing on iOS.

[joshdavenport]

Sure thing @luwes, this is about as simple as an implementation of this could be but anyway, here is one: https://codepen.io/joshdavenport/full/ormxzR

On Chrome on my laptop, the alert is triggered. On Safari and Chrome on iOS, no alert at all.

[joshdavenport]

Now this is very curious, stumbled upon some odd behaviour this morning: https://www.youtube.com/watch?v=345cUhu4C9I&feature=youtu.be

The event seems to trigger when closing and re-opening the browser.

Found this completely by accident!

[luwes]

@joshdavenport I experienced the same thing, so weird.

we try to look into this more soon but it could be mobile Safari related too.
(note that Chrome on iOS is also webkit/Safari, it's basically the same core engine)

Have you tried adding a small delay to autoplay?

[C4Framework]

Confirmed. The play() function appears to not fire on iOS Safari / Chrome.

Context
I have written some JS code that monitors when a video player appears on the screen. When it does, the code calls play(). When the video leaves the screen the code calls pause().

On desktop browsers, this behaviour works as expected.

Issue
On mobile browsers, the play() function is called. However, playback never initiates, and the following never triggers either:

player.play().then(function() {
  //code in this block never fires
});

Conditional Functionality
On iOS, the play() function works only if the user has previously tapped the video to initiate playback. However, background videos, nor for videos with controls: false, will ever allow the user to register a tap for that initial playback.

Preloading Videos
I have tried to preload videos, but this doesn't work either.

[jasecoop]

Also experiencing this problem. If I switch tabs and return the video will play.

Does anyone have a workaround?

[satuk]

hi @jasecoop, my workaround is this and works

https://gist.github.com/madebyidiot/1ef690a49b808816c395#file-vis-js

```javascript
var vis = (function(){
var stateKey,
eventKey,
keys = {
hidden: 'visibilitychange',
webkitHidden: 'webkitvisibilitychange',
mozHidden: 'mozvisibilitychange',
msHidden: 'msvisibilitychange'
};
for (stateKey in keys) {
if (stateKey in document) {
eventKey = keys[stateKey];
break;
}
}
return function(c) {
if (c) document.addEventListener(eventKey, c);
return !document[stateKey];
}
})();

vis(function(){
if(vis()){
console.log('play');
videoPlayer.play();
} else {
console.log('pause');
videoPlayer.pause();
}
});
````

[joshdavenport]

Is this likely to get looked at sometime soon, or do we need to investigate ourselves and PR?

[mrichhub]

This still seems to be an issue for us. Is there a workaround?

[fremler]

This still seems to be an issue for us. Is there a workaround?

Try to run your code in a promise after the play function. Works for me.

player.play().then(function() {
var heroImage = document.getElementById("js-hero-image");
heroImage.classList.add("hide");
});

[dawoonchung]

Having the same issue here on iOS. It'd be great if someone could look into this issue again. Weirdly, this happens only on iPhone, not on iPad – any ideas?

UPDATE
FYI, I'm importing the player in Node + Webpack, to be used in a static website. It 'sometimes' works – I don't exactly know under what condition – but most of the time it fails to emit the event.

[luwes]

we're going to look more into this but some workarounds, some already mentioned:

• if you only use the api to control playback, not the native Vimeo controls, it's possible to work with the play method and play promise. calling player.play() correlates to the play event, the resolving of the promise with the playing event (not available yet).

• the first trigger of the timeupdate event could be used to detect start of playback.

[luwes]

the playing event in line with the spec (https://www.w3.org/2010/05/video/mediaevents.html) has been added in the latest player release. it's fired when the play promise resolves. hopefully it can help mitigate some issues. example: https://codepen.io/luwes/pen/mdJpgLQ

we're still looking into the missing initiator play event on mobile safari.

[ThatGuySam]

It's worth noting that iOS seems to disable autoplay all together when the device is in Low-Power Mode.

I'm able reliably to break & fix autoplay by toggling Low-Power Mode while on this pen:
https://codepen.io/ThatGuySam/pen/wvabqdP

[briansage]

Worth mentioning that this bug doesn't happen on an initial, uncached page load. It seems to happen when refreshing or revisiting a page with a player/video that has previously started playing.

Also worth mentioning @fremler 's fix https://github.com/vimeo/player.js/issues/315#issuecomment-568523728 seems to work perfectly for my application.

[samturnerr]

Hi everyone this issue popped up for me again - I am aware of the autoplay feature not being allowed in low power mode etc, in fact what I'm trying to do is show a play button that disappears when the video plays (whether via autoplay or a person clicking the play button). In low power mode and on all browsers outside iOS it is doing what I want it to do - the video starts paused if autoplay is not allowed, then when clicking the play button the video starts and the play button disappears (class removed). Or if the browser does allow autoplay, the video starts to play and the play button disappears.

For some reason on iOS it doesn't work in both directions; the SDK event seems to not be able to trigger non-SDK methods in iOS, but the playButton addEventListener method is able to trigger the SDK player.play() method (using below code):

   <script src="https://player.vimeo.com/api/player.js"></script>      

        var playButton = document.getElementById("play-button-icon");

          // when the player starts playing the play button disappears, whether from autoplay or user clicking.

      player.on('play', function(data) {
      playButton.classList.remove("starts-visible");
 });

     // If the video has not played from autoplay being disallowed, the play button will stay visible until the user clicks on it:

    playButton.addEventListener('click', function(data) {
       player.play();
       playButton.classList.remove("starts-visible");
});

Anyway any help I can get would be great, it is just very strange that it is only on iOS that the play button doesn't disappear on autoplay (like when I test it with low power mode off), and yet the playButton.addEventListener('click', function() {}) works fine, as if it is a directional SDK event ==> object method issue, while object event listener == > SDK function works fine.

@luwes

[luwes]

@samturnerr does adding this snippet help?

      player.on('playing', function(data) {
      playButton.classList.remove("starts-visible");
 });

[samturnerr]

@luwes lol that fixed it I shoulda thought of that.

Thank you for the concise and effective solution!

[viggin543]

this issue occurs only when the phone is in low power mode !!! since autoplay is disabled then.

which makes sense, but may cause serious frustration to any dev attempting to figure this out.

[jasecoop]

this issue occurs only when the phone is in low power mode !!! since autoplay is disabled then.

cc @viggin543

No, this is not the issue.

Play and pause are not firing on iOS when in full battery mode. Please fix 🙏

Even if you are in low battery mode, .play() and .pause() should still fire. I