Programmatically Play Video with Sound on Safari and Mobile Chrome

Programmatically play video with sound on Safari and Mobile Chrome

Yes, you can bind on event that are not directly ones triggered on the video element:

btn.onclick = e => vid.play();

<button id="btn">play</button><br>
<video id="vid" src="https://dl.dropboxusercontent.com/s/bch2j17v6ny4ako/movie720p.mp4"></video>

Use Play() method to start dynamically loaded HTML 5 Video in IOS Safari / Chrome Mobile

The problem here is that you are calling play() in the callback of the ajax call, so the context is lost, and it doesn't count as a user interaction anymore.

Try to log what is happening with:

newvideo.play()
  .then(() => console.log('success :)'))
  .catch(err => console.log('error :( ', err));

If my guess is correct, the execution should go to the catch, and you should see something like NotAllowedError.

So... you are going to need to move that play() out of the ajax callback.
A workaround would be to let the play() call as it is (since works on desktop browsers), and just show a play button if the initial play() call fails (that would be the case of some mobile devices), then you will need another "click" event on that play button, that will play again the video, now without any ajax call involved. There is an example of this in another answer I gave here.

I hope it helps!

playing html5 audio tag from javascript in iOS chrome

The problem turned out to be a Google Drive issue. For some reason files on mobile browsers need to be set to fully public on Google Drive in order to be used while files on desktop browsers can be played with "anyone who has the link". The lack of decent error reporting on mobile made this tough to track down.

Why can't JavaScript .play() audio files on iPhone safari?

iOS disables autoplay, instead requiring that play be initiated as part of a user interaction (e.g., you can start playback within a touchstart listener). There's a bit of documentation about this on Apple's developer documentation. There's also this article Overcoming iOS HTML5 audio limitations on IBM's developer site that has examples and more detail.

---

Related Topics