Edge: play() causes "play" event but video doesn't play

Expected Behavior

I’ve got a <vue-vimeo-player> (which is a thin wrapper around this SDK) in my app. There’s a “play” button that sends the play() event to the video. Video is a private video, although I think the issue also happens with public ones.

Expected behaviour (and actual behaviour in browsers other than Edge) is that the video starts playing and then the “play” event is fired.

Actual Behavior

In Edge, the “play” event is fired but the video doesn’t start playing. With {controls: false} there is no visual feedback of this. If I set {controls: true} the video goes dark and has a loading spinner forever.

Steps to Reproduce

1. Check out this repo: https://github.com/fishpercolator/edge-vimeo
2. yarn && yarn dev
3. Visit http://localhost:3000/ in Edge browser.
4. Click the “Play” button.

All the relevant code is here on this page. Afaict from the vue-vimeo-player sources, the Vue methods and events are just proxies to the player.js methods and events with no additional Vue magick on top.

Thanks for your help!

[pedantic-git]

Hi @luwes - as mentioned in my comment above, I can reproduce the issue with vanilla JS. Vue events don’t work the way you’ve described (they’re different from the setting of properties).

However, I appreciate that while I’m still confident this is a bug, non-Chromium Edge is now not a priority for anyone.

[luwes]

I think this might be caused by the async nature of Vue rendering where if you would set an attribute/property but it’s actually called on the next frame because of the VDOM. this in turn makes the browser think it’s not a user gesture and rejects the play promise…

closing as this is something that would better be discussed on Stackoverflow.