CODEWITHSUNDEEP
javascripthtmlvideo
Adam Lesniak
Adam Lesniak

Reputation: 878

Preloading HTML5 videos on mobile

I'm looking for a solution where:

4 MP4s/video files, each 5MBs size.

Those videos will be played one by one like single MP4/video file (without gaps between MP4 files) cross browser and cross device.

Do you know what would the best approach for this, I'm not looking for solution where video source files would be replaced. (as there'll be always gap) With what I come so far is having 2 separate video elements, where in one video will be preloaded while another one is playing, though on majority of mobile devices preload attribute isn't supported.

any answers greatly appreciated, Adam

Upvotes: 0

Views: 1950

Answers (1)

Misunderstood
Misunderstood

Reputation: 5665

This is not an elegant solution but it will work for your idea of loading in multiple instances of the video tag.

In HTML put 5 video players.

In CSS hide 4 of them (display:none);

In JS
make a global var array of the video objects

var v=new Array;
v[1] = document.getElementById('player1');
...
v[5] = document.getElementById('player5');

On players 1-4 add event listeners for the "end" event which calls a next function.

next function(n){
  v[n+].style.display='block';
  v[n].style.display='none';
  v[n+1].play()
}

}

Upvotes: 1

Related Questions