Playlists (Audio & Video)

[espoal]

Great player guys!

Since I work with browser video, having tried most of the players around, one thing that is consistently missing is support for native playlist.

Let's make an example: I split a 60 minutes long video in 6 videos of 10 minutes, to reduce load on server AND client. I want to automatically play one video after the other, without the user noticing that they are multiple videos.

Now the de facto solution is to use html5 media events, but if you want it to be seamless you have to use some html/css hacks. And it is fugly.

If you could solve this natively (and naively :smile: : ), I'm sure it would boost your popularity.

[sampotts]

Great idea. I'll look at this as soon as I can.

[joesepi]

And perhaps related: audio playlist

[tomByrer]

Issues I'm worried about:

• not enough memory/cache to hold 2 videos in a row, so has to flush &/or download
• browser can't or CPU not strong enough to switch out at 30FPS

Might be a reason why video players with years of development aren't seemless.

[sampotts]

Hey Joe, I'd probably look at the two as one ticket item.

Hey Tom, very good points. My original thoughts were to use the preload attribute on the element to prefetch some of the next media. That way it would play instantly. That would mean two video/audio elements on the page though. It needs some more thought...

[espoal]

it is quite the opposite, if used well it will reduce ram and cpu, especially for long videos.

Hold on, tonight (8 hours from now) I will post you some benchmark, because we tested some at work to evaluate different options.

Quite smart on the preload thing, we need to check about screen resizing in a liquid layout on different browser ( that's what drove me crazy :P )

@SamPotts how can I send you a private message?

On Thu, Feb 26, 2015 at 10:42 AM, Sam Potts notifications@github.com wrote:

Hey Joe, I'd probably look at the two as one ticket item.

Hey Tom, very good points. My original thoughts were to use the preload attribute on the element to prefetch some of the next media. That way it would play instantly. That would mean two video/audio elements on the page though. It needs some more thought...

— Reply to this email directly or view it on GitHub https://github.com/Selz/plyr/issues/3#issuecomment-76148835.

[sampotts]

That would be good to see @servermeta !

[sampotts]

Sorry @servermeta , I missed your message about a PM. Twitter is fine or me@sampotts.me

I'll be looking at playlists next since I've added .source() and .poster() API methods now.

[nickdesaulniers]

Self plug: https://github.com/nickdesaulniers/javascript-playlist-parser

I recommend sending an xhr to a url, then aborting if the MIME type is a media stream and using audio tags, else parse xhr.response based on MIME type. :wink:

[sampotts]

Thanks @nickdesaulniers , I'll take a look :+1:

[espoal]

sorry for taking so long to reply, but I got scolded at work because I officially can't divulge the data that was under NDA. It was under NDA because we were using some proprietary Nvidia api (NVIFR) which just recently got divulged to the public.

The basic idea is: if I have a 100 mb video, I will use AT LEAST (insert buffer size) mb of memory to hold it, up to 100 + n mb. More often than not I will load useless data, because I will not watch the full video.

Splitting the video in 10 chunks of 10 mb, means that i will load up to 10 + n mb of memory, which is usually less than the default buffer size. The server has saved on bandwidth, you have saved on memory, everybody is happy.

You think it might not matter much when you are seeing 1 video, but the more concurrent videos you add up, the more resource saving it becomes.

[tachyon-ops]

Hi @sampotts so... what work have you done to address this? I've been thinking that it wouldn't be that hard to make a super simple script to use the instances example you have on codepen and have some buttons to go next, go previous and thus having some sort of playlist. We would be just switching between instances, the thing is I have not dived into your whole library (always time constrains) to understand if we could swap the source or something...

Do you have the UI separated from a model? I would love to talk with you about this. For now, I'll just stop and hide players from instances.

Regards mate!

[sampotts]

Hey,

Not a lot to be honest. I'm currently finishing up what's left to get v3 out the door (working on it now). After that I'm keen to convert to ES6 with modules so that people can build their own version which what they need - e.g. no Vimeo, YouTube or no controls if they use their own. I have someone who's offered help there. I don't think this would be too hard to do - the work to change sources is there int he API already but passing the playlist to setup would be tricky with the current setup. It's not something I've looked at yet in detail.

[tachyon-ops]

@sampotts I see. I do not have the time to help you out, but perhaps it's better to get a view at your development on v3 to check it out instead of trying to work on v2. Also, you should have a 'playing' attribute on the instance (true/false) to easily check instance state. I'm having problems with stop(), it's not triggering pause event, and thus I cannot change the state of the instance attribute I've created upon stop(). Any ideas? Guess I can avoid stopping() and use just play/pause. My playlist with your player is almost finished :) hehe

[sampotts]

v3 is currently in the develop branch but it still has bugs (hence not being in master) and is currently undocumented. I can add a boolean for that sure.

[Uranbold]

Please +1

[ARehmanMahi]

Please sensei , Playlist please....................

[markhillard]

@sampotts, I came across this issue recently and just figured I'd mention that I got Plyr to work on top of my existing audio playlist at https://codepen.io/markhillard/pen/Hjcwu. It's certainly not "integrated" with Plyr, but it has no problem loading up tracks and moving through them.

[JasperTerra]

@markhillard Nice example! If I use your code locally however the control bar is no longer inline and displays massive icons. Also playlist is shifted right a bit. Would you know what might be causing this? Could it be some css postprocessor?

[markhillard]

@JasperTerra thanks! I'm guessing, but it sounds like a dependency isn't loading. I do use the Prefixfree setting in that pen so I don't have to write vendor prefixes, so that might be part of the problem.

There is a note about local XHR at https://leaverou.github.io/prefixfree/#faq that describes how to run this plugin locally, depending on your browser.

[micker]

@markhillard great exemple .... any chance to add this in core ?

[Carmichaeldb]

@sampotts I sent you an email ref this topic with the email provided earlier in this discussion. I hope that is ok.

[ridrud]

https://codecanyon.net/item/clean-html-audio-player-with-playlist/11959891 someone did it?

[burakozturk16]

this is useful https://codepen.io/onigetoc/pen/veWNbP

[coltenkrauter]

@sampotts Love what you guys are doing here. Any update on an audio playlist?

[Ashesh3]

Any updates on this?

[TobiasKrais]

I came across this issue recently and just figured I'd mention that I got Plyr to work on top of my existing audio playlist at https://codepen.io/markhillard/pen/Hjcwu. It's certainly not "integrated" with Plyr, but it has no problem loading up tracks and moving through them.

Has anybody example code for mp4 video playlist like the audio playlist mentioned above?

[zwiebus]

This works for me with a local playlist Thanks to "Gino" and "Dudley Storey"

<head>
   <link rel="stylesheet" href="plyr-master/dist/plyr.css" />

<!-- / own css file based on Gino's playlist  - but you can use the origin one as it is 
          https://codepen.io/onigetoc/pen/veWNbP   /-->
   <link rel="stylesheet" href="plyr-master/dist/playlist.css" />

 <head/>
  <body>
 <div id="player">
  <div id="video_player">
   <video id="video" playsinline controls data-poster="pic1.png" style="--plyr-color-main: #C00040; max-height:360px;">
    <source src="video1.mp4" type="video/mp4" />
   </video>
    <div class="plyr-playlist-wrapper">
     <ul class="plyr-playlist">
      <li class="plyr-playlist"><a class="plyr-playlist" href="video1.mp4"><img src="pic1.png" class="plyr-miniposter">video1</a></li>
      <li class="plyr-playlist"><a class="plyr-playlist" href="video2.mp4"><img src="pic2.png" class="plyr-miniposter">video2</a></li>
      <li class="plyr-playlist"><a class="plyr-playlist" href="video3.mp4"><img src="pic3.png" class="plyr-miniposter">video3</a></li>
     </ul>
   </div>
  </div>
 </div>
<script src="plyr-master/dist/plyr.min.js"></script>
<script>
  const player = new Plyr('#video', {
  controls: ['play-large', 'play', 'progress', 'current-time', 'mute', 'volume', 'settings'],
  blankVideo: 'blank.mp4',
  fullscreen: {enabled: false},
  hideControls: true,
  keyboard: {focused: true, global: false},
  storage: {enabled: false}
  seekTime: 10,
  resetOnEnd: true
  });

<!--/ found here: http://thenewcode.com/792/Create-A-Simple-HTML5-Video-Playlist
      many thanks to Dudley Storey for this nice code /-->

var video_player = document.getElementById("video_player"),
links = video_player.getElementsByTagName('a');
for (var i=0; i<links.length; i++) {
        links[i].onclick = handler;
}
function handler(e) {
        e.preventDefault();
        videotarget = this.getAttribute("href");
        filename = videotarget.substr(0, videotarget.lastIndexOf('.')) || videotarget;
        video = document.querySelector("#video_player video");
        video.removeAttribute("poster");
        source = document.querySelectorAll("#video_player video source");
        source[0].src = filename + ".mp4";
        video.load();
        video.play();
}
</script>
</body>

[appsource-ug]

Any update on this issue??

i.e Native playlists with NEXT/PREVIOUS buttons @sampotts