Hi Everyone I hope you're well.

 

I've been trying to work out how to make a video player with a playlist for the project that I'm working on. Their doesn't seem to be many tutorials on this and was wondering if someone on here could help me out? I would like to make something similar to this https://cdn.athemes.com/wp-content/uploads/onplay-video-magazine-theme.jpg

If anyone can help me out it would be much appreciated.

Thanks!

This is a pretty low level explination of the one I built but...

 

I have one actual video element on page with a list ( just a good ole ul) of videos. Going by the example you posted, the list might look like this...

 

<li>

<button data-src="video src">

<img src="img src">

<p>video title</p>

</button>

</li>

 

On page load, I grab the first video src and load it. when the video is done ( calculation of video.duration - video.currentTime), I grab the next on the list and play.

 

The actual Playlist I developed is still not live yet but you can see an example of the video switching element here...

https://www.xfinity.com/compare/comcast-xfinity-vs-directv.html

 

(dear mods, this is not me promoting this business, just trying to help out)