I updated Gino's playlist to work with V3 and Vue.. here it is

[vesper8]

Great plugin, mighty useful!

I found this issue https://github.com/sampotts/plyr/issues/665 that @onigetoc created in which he shares his awesome looking playlist which looks like it was meant to work with V2. and uses a lot of javascript.

I simplified the whole thing and rewrote it to work with V3 and Vue (so it isn't quite plug and play unless you're also using vue)

Here it is: demo: https://3yy805jl6p.codesandbox.io/ code: https://codesandbox.io/s/3yy805jl6p

It works with a static playlist (I included one), but it also works perfectly fetching a playlist from youtube, but I removed my youtube apikey, all you have to do is add your apikey and change useYoutubeApi to true inside initPlaylist and then it will fetch any playlist on youtube

Previous and Next buttons work. Also has a stylish scrollbar for long playlists. It also scrolls to the playlist item when you click on it or use the prev/next buttons

Dependencies are vue-plyr, vue-scrollto, jquery, and font-awesome

Maybe @sampotts wants to work with this and merge it in as an official thing

This is also a good demo of how to add custom buttons to the controls.

Cheers!

[ghost]

Great job. Can you do same with Javascript? Using current version when i use cdn, it says Plyr is not defined

[vesper8]

I exclusively use Vue in all my projects. Gino's original attempt at this did use javascript to build up the html so you could try to use that. I just find things are much easier when using with Vue.. I have no plan to make the above code work with vanilla js only but it's certainly doable.

[Carmichaeldb]

@vesper8 The vue-template you did seems to be broken. The video is seemingly being split into 5 sections each with their own set of controls. The 5th one being the only one with actual video, and clicking on any of the other 4 still affects the 5th one. Really strange. I'd try to fix it myself but i'm only just starting to learn vue and not really that competent yet lol

[vesper8]

hrmm.. definitely wasn't doing that when I uploaded it months ago.. must be as a result of a change that codesandbox has done

if you load the code into your own project it will work

[vesper8]

actually it was something else. one of the dependencies used to auto-load the css (vue-plyr) but in a later version it stopped doing that and you have to import the css yourself

adding

<style>
@import "~vue-plyr/dist/vue-plyr.css";
</style>

at the bottom of the App.vue works in a local project, but on codesandbox it doesn't work and I couldn't figure out why, so instead I added this to the index.html

<link rel="stylesheet" href="https://unpkg.com/vue-plyr/dist/vue-plyr.css">

and now the demo works again, I updated the demo

[Carmichaeldb]

@vesper8 Awesome! looks wonderful once again! :)

[noellin]

@vesper8 HI, I tried to use it on Vimeo But this playlist will render twice Do you know how to fix it?

[onigetoc]

Good, i just saw that minutes ago lol.

[skerbis]

Here without vue here is a working example for 3.x https://codepen.io/skibbi/pen/NWvLoRz