Draggable to start video not working in Safari

[Kholja]

Hi Guys,

I want to start a video via a slider, which is built with draggable and inertia. This works in Chrome and Firefox.
Safari interprets the action after onThrowComplete as autoplay and prevents playing the video, due to it's autoplay-policy (except video is muted).

However it seems to be OK for Safari if I start the video with a ordinary button (at the bottom of the example).

Any idea how to solve this?

 

See the Pen wvoOWRQ by kholja (@kholja) on CodePen.

[iDad5]

You could try to start the video on mousedown (when the user starts dragging) and immediately pause it. After that you should be able to play it programmatically ever after

[Kholja]

34 minutes ago, iDad5 said:

You could try to start the video on mousedown (when the user starts dragging) and immediately pause it. After that you should be able to play it programmatically ever after

Thanks @iDad5 this works. Great idea, great forum

[iDad5]

You're welcome, glad I could help. 

[iDad5]

Just 2 cents more, if you don’t want the poster frame to be replaced by the first frame of the actual video - which might happen under certain preloaded conditions, it might also work to start playing a hidden video or even audio. I’m not 100% sure, but my understanding is, that once ans media has started due to user interaction, the rest on that page is fair game for programming. 

[Kholja]

1 hour ago, iDad5 said:

Just 2 cents more, if you don’t want the poster frame to be replaced by the first frame of the actual video - which might happen under certain preloaded conditions, it might also work to start playing a hidden video or even audio. I’m not 100% sure, but my understanding is, that once ans media has started due to user interaction, the rest on that page is fair game for programming. 

Good hint - thanks for pointing that out.

[Kholja]

To finish this up I did a short test with an audio file. Indeed you can control all other media programmatically after the audio file played due to a click or mousedown event. Controlling the video was possible without any limitations.