Imperatively triggering video on Safari not working

Developers Stream
#1

When trying to stream.play() on Safari 13.0.5 on OSX (and safari on iOS as well) the video will not start playing. The UI switches from the central play triangle, to show the progress bar, but the video does not play.

The stream.play() promise is throwing an error with an undefined value.

Here is the code to recreate. 3 seconds after page load, the video should start playing and the background will turn red. https://jsbin.com/nukozeriqe/edit?html,css,js,console,output

This works fine on Chrome.

<stream src="5d5bc37ffcf54c9b82e996823bffbb81" preload height="240px" width="480px" controls></stream>
<script data-cfasync="false" defer type="text/javascript" src="https://embed.cloudflarestream.com/embed/r4xu.fla9.latest.js?video=5d5bc37ffcf54c9b82e996823bffbb81"></script>

const stream = document.querySelector("stream")
setTimeout(() => {
  document.querySelector("body").style.background = "red";
  stream.play().catch(err => console.log(err))
}, 3000)
1 Like
#2

Cloudflare Support got back to me and this is because of Safari’s autoplay policies. You have to interact with the video first before the play() API works.

2 Likes
#3

A small clarification here: you don’t necessarily have to interact with the video before the API works. You can also call stream.play() in a callback from a user-initiated event.

Check out the note from https://webkit.org/blog/6784/new-video-policies-for-ios/ :

A note about the user gesture requirement: when we say that an action must have happened “as a result of a user gesture”, we mean that the JavaScript which resulted in the call to video.play(), for example, must have directly resulted from a handler for a touchend, click, doubleclick, or keydown event. So, button.addEventListener(‘click’, () => { video.play(); }) would satisfy the user gesture requirement. video.addEventListener(‘canplaythrough’, () => { video.play(); }) would not.

1 Like