1. Advertising
    y u no do it?

    Advertising (learn more)

    Advertise virtually anything here, with CPM banner ads, CPM email ads and CPC contextual links. You can target relevant areas of the site and show ads based on geographical location of the user if you wish.

    Starts at just $1 per CPM or $0.10 per CPC.

Any cross browser video players out there, for playlists?

Discussion in 'Programming' started by JEET, Apr 17, 2020.

  1. #1
    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
    SEMrush
     
    JEET, Apr 17, 2020 IP
    SEMrush
  2. Web_Dev_Chris

    Web_Dev_Chris Active Member

    Messages:
    218
    Likes Received:
    12
    Best Answers:
    1
    Trophy Points:
    80
    #2
    Better of just designing your own
     
    Web_Dev_Chris, May 11, 2020 IP
    JEET likes this.
  3. JEET

    JEET Notable Member

    Messages:
    3,377
    Likes Received:
    376
    Best Answers:
    16
    Trophy Points:
    235
    #3
    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.
     
    JEET, May 11, 2020 IP
  4. Web_Dev_Chris

    Web_Dev_Chris Active Member

    Messages:
    218
    Likes Received:
    12
    Best Answers:
    1
    Trophy Points:
    80
    #4
    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.
     
    Web_Dev_Chris, May 11, 2020 IP
    JEET likes this.
  5. JEET

    JEET Notable Member

    Messages:
    3,377
    Likes Received:
    376
    Best Answers:
    16
    Trophy Points:
    235
    #5
    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...
     
    JEET, May 12, 2020 IP
  6. Web_Dev_Chris

    Web_Dev_Chris Active Member

    Messages:
    218
    Likes Received:
    12
    Best Answers:
    1
    Trophy Points:
    80
    #6
    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):
     
    Last edited: May 12, 2020
    Web_Dev_Chris, May 12, 2020 IP
    JEET and JV35 like this.
  7. Web_Dev_Chris

    Web_Dev_Chris Active Member

    Messages:
    218
    Likes Received:
    12
    Best Answers:
    1
    Trophy Points:
    80
    #7
    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
     
    Last edited: May 12, 2020
    Web_Dev_Chris, May 12, 2020 IP
    JEET likes this.
  8. JEET

    JEET Notable Member

    Messages:
    3,377
    Likes Received:
    376
    Best Answers:
    16
    Trophy Points:
    235
    #8
    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
     
    JEET, May 12, 2020 IP
  9. JEET

    JEET Notable Member

    Messages:
    3,377
    Likes Received:
    376
    Best Answers:
    16
    Trophy Points:
    235
    #9
    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?
     
    JEET, May 12, 2020 IP
  10. JEET

    JEET Notable Member

    Messages:
    3,377
    Likes Received:
    376
    Best Answers:
    16
    Trophy Points:
    235
    #10
    @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.
     
    JEET, May 12, 2020 IP
  11. Web_Dev_Chris

    Web_Dev_Chris Active Member

    Messages:
    218
    Likes Received:
    12
    Best Answers:
    1
    Trophy Points:
    80
    #11
    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, May 12, 2020 IP
    JEET likes this.
  12. JEET

    JEET Notable Member

    Messages:
    3,377
    Likes Received:
    376
    Best Answers:
    16
    Trophy Points:
    235
    #12
    @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.
     
    JEET, May 12, 2020 IP
  13. Web_Dev_Chris

    Web_Dev_Chris Active Member

    Messages:
    218
    Likes Received:
    12
    Best Answers:
    1
    Trophy Points:
    80
    #13
    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.
     
    Web_Dev_Chris, May 12, 2020 IP
    JEET likes this.