How can I add a video and playlist to a page using HTML5?

Question

I had been using the flash based JWPlayer 4 with the playlist option. Recently I upgraded to JWPlayer 5 which is claims HTML5 support. The player by itself degrades nicely on mobile devices that support HTML5 but not flash, however it breaks with the playlist option enabled.

So can someone tell me either what I'm doing wrong with JWPlayer 5 and how to get it to work with the playlist option for mobile devices, or perhaps just teach me a better way to set up a video and a playlist with HTML5?

Resources

1. JW Player and playlist configuration example page

2. Example of the JWPlayer and Playlist layout:

Answer 1

This is not JW Player specific answer.

Browser's native HTML video tag behaves weird if you replace tags. Instead you should set single src attribute directly in tag. By that way you can change that attribute in DOM. Before changing it, try to pause the playing video first.

I use mediaelementjs.com. It works pretty well.

It doesn't come with built-in playlist feature but you can easily build one by yourself. After all, playlist is just a list of videos that when you click on one, you go change the source of the video.

Media element has setSrc() function that supports both HTML5 and flash fallback. It works from me.