A dead simple and fully responsive Video Playlist Player that dynamically loads video files from a JSON file.
Written in pure JavaScript and CSS/CSS3. Without any 3rd dependencies.
How to use it:
Create the html for the video player & playlist.
0 : 00
Load the Font Awesome for the video controls.
Load theVideo Playlist Players JavaScript and CSS files.
Specify the video information [name, source, duration, cover image] in the video.json.
[ { "id" : 0, "name" : "Devstories from google", "source" : "//www.html5rocks.com/en/tutorials/video/basics/devstories.mp4", "duration" : "4:34", "img" : "//lonelyplanetstatic.imgix.net/op-video-sync/images/production/p-5810396717001-brightcove-when-to-go-to-the-azores-20180726-050333.jpg?w=160&h=90&sharp=10&q=50" },{ "id" : 1, "name" : "Vida marina - Oceano", "source" : "//mirrors.standaloneinstaller.com/video-sample/jellyfish-25-mbps-hd-hevc.mp4", "duration" : "4:34", "img" : "//lonelyplanetstatic.imgix.net/op-video-sync/images/production/p-5810396717001-brightcove-when-to-go-to-the-azores-20180726-050333.jpg?w=160&h=90&sharp=10&q=50" },{ "id":2, "name" : "Profundidades del oceano", "source" : "//thenewcode.com/assets/videos/ocean-small.mp4", "duration" : "1:34", "img" : "//lonelyplanetstatic.imgix.net/op-video-sync/images/production/p-5810396717001-brightcove-when-to-go-to-the-azores-20180726-050333.jpg?w=160&h=90&sharp=10&q=50" },{ "id": 3, "name" : "Lo angeles timelapse", "source" : "//thenewcode.com/assets/videos/downtown-los-angeles.mp4", "duration" : "3:34", "img" : "//lonelyplanetstatic.imgix.net/op-video-sync/images/production/p-5810396717001-brightcove-when-to-go-to-the-azores-20180726-050333.jpg?w=160&h=90&sharp=10&q=50" },{ "id" : 4, "name" : "Panasonic test video HD", "source" : "//mirrors.standaloneinstaller.com/video-sample/Panasonic_HDC_TM_700_P_50i.mp4", "duration" : "2:34", "img" : "//lonelyplanetstatic.imgix.net/op-video-sync/images/production/p-5810396717001-brightcove-when-to-go-to-the-azores-20180726-050333.jpg?w=160&h=90&sharp=10&q=50" }]