CODEWITHSUNDEEP
javascripthtmliosvideo
Matt Sparrer
Matt Sparrer

Reputation: 349

Play videos one after another on iOS without user interaction

I have a dozen of HTML5 videos that I want to play one after another every times a video ends. The user presses a "play" button at the first video, and the others follow one another.

My code works great on desktop and android, but not on iOS because of the autoplay limitation. I can't get the second video to play after the first one if the user doesn't press a second button.

Is there a workaround to play videos one after another on iOS or do I have to create an exception that will show a "play" button for each video ?

What my code looks like so far :

<video id="firstVideo" crossOrigin="anonymous" webkit-playsinline playsinline style="display:none" preload="auto">
   <source src="videos/video1.mp4" type='video/mp4'>
</video>
<video id="secondVideo" crossOrigin="anonymous" webkit-playsinline playsinline style="display:none" preload="auto">
    <source src="videos/video2.mp4" type='video/mp4'>
</video>

etc...

if ( video1.currentTime >= video1.duration - 0.1 ) {

    video1.pause();
    video2.play();

}

Upvotes: 1

Views: 462

Answers (1)

VC.One
VC.One

Reputation: 15881

I don't have an iOS device so let me know if this testing code works for sequential playback...

<!DOCTYPE html>
<html>
<body>

<video id="firstVideo" crossOrigin="anonymous" webkit-playsinline playsinline style="display:none" preload="auto">
   <source src="videos/video1.mp4" type='video/mp4'>
</video>

<video id="secondVideo" crossOrigin="anonymous" webkit-playsinline playsinline style="display:none" preload="auto">
    <source src="videos/video2.mp4" type='video/mp4'>
</video>

<br> <br>
<button onclick="vidPlay()"> Test Play </button>


<script type='text/javascript'>

const vid1 = document.getElementById('firstVideo');
const vid2 = document.getElementById('secondVideo');

vid1.addEventListener('ended', myVidEnd_Handler, false);

function vidPlay()
{
    vid1.play(); //# play first vid
    vid2.play(); vid2.pause(); //# temp trigger playback with immediate pause
}

function myVidEnd_Handler(e) 
{  vid2.play(); }

</script>
</body>
</html>

Upvotes: 1

Related Questions