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.

1 Like