`pause()` and `play()` methods not behaving as expected in iOS Safari

[glomotion]

Expected Behavior

it should load the video, then skip to 3 seconds and then play and then pause - hence updating the current video frame that you can see onscreen.

Actual Behavior

In safari is just plays thru. It's like the pause() method does nothing. Setting the video to muted has no effect here.

Steps to Reproduce

replicated using: MacOS 10.15.5 & Safari 13.1.1 (Works fine in Chrome 84.0.4147.105 and Firefox 79.0 (64-bit)) https://stackblitz.com/edit/vimeo-controllable-video-player-test?file=controllable-vimeo-embed.component.ts

Is there a better way to achieve what i'm trying to do? I need to be able to skip the playhead of a video ahead, without playing the video.

[glomotion]

Incase it helps... i've also pivoted the above stackblitz to replicate the actual problem we're having inside our software right now (again, only in Safari!).

https://stackblitz.com/edit/2-controllable-embeds-vimeo-test?file=controllable-vimeo-embed.component.ts

every odd refresh this.vimeoControl.play() never resolves in the bottom video! Quite strange! Then the next time it does resolve, but the pause() method fails to actually pause the video, just like with the original post.

[glomotion]

OK so i've FINALLY managed to work around these issues. I had to do 2 things:

1. when using the control.setCurrentTime(time) method, setting anything less than 0.5 fails straight out in Safari (the returned promise never resolves)
2. add an artificial delay in between the control.play() and control.pause() calls...260ms seemed to be the minimum required to achieve stability - but i made it 300ms to add some wiggle room.

modified stackblitz is here: https://stackblitz.com/edit/2-controllable-embeds-vimeo-test?file=controllable-vimeo-embed.component.ts

[luwes]

@glomotion glad you found a solution. it might have to do with the nested iframe's or something else but seeking into the video for X seconds is as simple as await player.setCurrentTime(3) I think. try it out here: https://player.vimeo.com/api/demo with the set current time button

[glomotion]

@luwes Did you try the first stackblitz inside Safari?

Im not sure that this ticket can be considered "closed". You are correct, in all other browsers await player.setCurrentTime(3) works as expected - but in Safari this method is flaky at best (needing atleast 0.5 seconds to actually do anything).

Also, you have not addressed the need to insert an artificial delay between play and pause calls (again, only in Safari) eg here:

await control.play();
await control.pause(); // has no effect in safari without a delay placed inbetween.

[glomotion]

@luwes I've just noticed that in the player demo https://player.vimeo.com/api/demo In iOS 13.x safari - pressing the set current time button does nothing until you have played the video once - even if the video is set to muted.

[luwes]

Safari desktop works fine here http://recordit.co/3eMdkg0AKN

iOS Safari seems buggy but does do a seek when a play action is made the events are not fired I see, which probably would not resolve the seek promise either unless it's followed by a play action http://recordit.co/8GOUUmSlJp

[glomotion]

@luwes, again, you still haven't responded to the other part of this issue - eg:

await control.play();
await control.pause(); // has no effect in safari without an artificial delay placed inbetween.

Also, why is this issue still closed when by your own admission, the player's "set current time" functionality is buggy in iOS Safari? (I need that promise to resolve).

[glomotion]

Would it help if i reported these 2 things as seperate issues?

[luwes]

I'll investigate the iOS issue further but there's a chance that's how the browser behaves. Safari in general is known to be buggy. will keep you updated.

[glomotion]

Thanks @luwes. Yeah, so in all honesty, Safari is the bane of my existence atm. Its kinda the new ie. :P