Any cross browser video players out there, for playlists?

Any cross browser video players out there, for playlists?

I need a video player that can play playlists without showing gaps or breaks between 2 or more videos.

Has to be compatible with PC browsers and mobile phone browsers also.

Anyone knows of any?
Thanks

 

Better of just designing your own

 

Yes, that is what I did, still having the problem of having tiny breaks between 2 videos/audio files, buffering or whatever its called...
Can't seem to find a way to make it play seamlessly as if its a single file being played.

 

It's probably the buffering or loading then. You might need to load the next file while current one is play so there is no buffering or whatever. Also we can't help without seeing the code.

 

My code is nothing special. Just uses "onended" to fire a javascript function.
Function updates src of <audio> or <video> tag, whichever fired it.

Something like this:

<script type="text/javascript">
var arr=[ "file1", "file2", "file3" ];
var count=0;
v=document.getElementById("player");
v.onended=function(){
++count;
v.src= arr[count];
};
</script>

Now, how do I load "file2" in buffer while "file1" is still playing?
I can't figure that out...

 

I have made it a little more efficient . Basically when the page is loaded the next video in the array is loaded on the page, hidden. The next video plays, your function will call the extra function I included which will preload the next video in the line. This is all theory and what I have thought lol. Not sure of its actual effectiveness. Please test it out and get back to me.

    <script type="text/javascript">
 
var arr=[ "file1", "file2", "file3" ];
var count=0;
     
//Load next video into HTML document hidden.
function loadVideo(){
 
  var createVideo = document.createElement('video');
  document.body.appendChild(createVideo);
  createVideo.setAttribute("src", arr[count+1]);
  createVideo.setAttribute("preload", "auto");
  createVideo.setAttribute('style', "display:none");
}
//First call to load second video as initial video will load once played.
loadVideo();

v=document.getElementById("player");
v.onended=function(){
//This video should already be loaded due to first call above.
++count;
v.src= arr[count];
//Call the function again to preload next video while current video playing(already loaded)
loadVideo();
};
</script>

Code (JavaScript):

 

Hi Jeet, I was really curious to test my code and compare it to your code lol. Resuts below:

Your Code (I can see the glitch)
http://ditfort.com/JEETAudioTest/
http://ditfort.com/JEETVideoTest/

My Revision (Much smoother and I don't see glitch)
http://ditfort.com/ChrisAudioTest/
http://ditfort.com/ChrisVideoTest/

Note: I realised I created a video tagged linked with the audio file lol. But the concepts off preloading the content still worked which removed the buffer. Both my tests are much smoother as I preload the next element into the webpage forcing it to download so when the video ends the next one doesn't need to buffer thus starting immediately.

Hopefully this was of help to you.

Regards,
Chris

 

I will try these with videos I got and will let you know.

I tried preloading inside a hidden <video> <audio> tag earlier. (autoplay off, display off)
I will try it using your createElement way this time.
Hope it works.
Thanks

 

I have one question. Suppose I got 100 videos loaded in playlist array.
loadVideo function creates a new element each time. Will that create a new element for all 100 videos?

 

@Web_Dev_Chris
This is doing the same thing I tried with a hidden <audio> <video> tag, with no autoplay.
Everytime my onended function was fired, I loaded the next file in the array in that hidden tag's SRC value.
When current file ends, and next file goes in the visible player, there is a tiny gap between the 2. Its very small on local dev servers. Slightly larger on production live servers.
It gives the feeling as if video broke and then continued, broke and continued, broke and continued (immediately). Kind of annoying if it happens every 1 minute (1 minute is duration of each video file in array)...
Same thing is happening with this function too...
Its not playing as if its a single file being played seamlessly.

 

Yeah just a slight improvement over the current code lol. You might need a more robust design that a simple onended function to achieve what you want. The function I have only loads one video ahead of the current one playing so if you have a 100 and video one is playing then video two will be loading. When video two starts video three will be loading.

I’ll see if I can improve it further to achieve what you are after.

Regards,
Chris

 

@Web_Dev_Chris
Thanks for helping.
I even tried timing the videos, so instead of waiting for the video to end and onended firing, I loaded the next video at 59 seconds itself, still that tiny gap existed.
I think this is something with the video/audio tag itself and how they work, pausing slightly before playing a new file.

 

This is just another 'theory thought'. Try to have a container that's relatively positions and the video absolutely positioned in the container. When video 1 plays, we have video two physically load in the container behind the current playing which solves the buffering. We might need to start it a few seconds when the current one ends then we can hide the current playing and try some smooth css transitions / javascript fades. I think changing the actually source code might be the wrong approach. I'll try to do some testing around this idea when I get a chance to see if it loads smoother.