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:

Collagen

This is not about embedded systems programming. Retagged. – Monjo

You should ask JWPlayer developers for support. This may be helpful. – Narrows

@BrianMaltzan - pretty much the same as the in Resources #1 (above). I'd be happy to get that example working on an iPad (with playlist) – Collagen

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.

Anaplastic

If you could give an example of the implementation that would be awesome. – Collagen

dev-moeam -dot- hardwarezone -dot- com / videogallerys Think of each slide as a different track of the playlist. You're looking for launch_video_player function in videog.js. – Anaplastic

Answer 2

Voila un bout de script pour jwplayer 6.7 et playlist youtube

<script>
jwplayer("myElement").setup({
  width: "100%",
  height: "400",
  playlist: "http://gdata.youtube.com/feeds/api/playlists/PLMIePZMXPqnYlsvE_PFwe-_e336HlJF7g?max-results=50&alt=rss",
  stretching: "exactfit",
  primary: "flash",
  sharing: {link: "http://www.centraltv.fr/egypte-television/rotana-masriya"},
  autostart: "true",
  listbar: {
    position: "right",
    size: "220" 
  }
});
</script>

Import

Answer 3

This isn't answer to your main question. It's just some general tips.

1. Upgrade. I had some trouble with 5.6 not playing on mobile devices, and upgrading to 5.8 fixed it.

2. Avoid autoplay at the moment. I've had some issues with the player not loading. It might be due to a timing issue on loading large media files, and javascript trying to begin playing. Also, for linux users with a slower connection (like me at 3mb dsl), when the playhead catches up, and the buffer is empty, the player stops functioning.

3. Maybe override the mode. For my media, html5 seems to play a little better.

   modes: [ { type: "html5" }, { type: "flash", src: "/media/player.swf" } ]

4. Try to use the same height/width as your media.

5. If you are playing audio only- it can be hard to find the (centered) play button if your width is a large value.

6. I'm not using the playlist. I have a list of recordings on the page, and a button to load a popup/dialog.

Proscription

Answer 4

If you are just using YouTube videos, they offer a (beta) HTML5 video player: http://code.google.com/intl/en/apis/youtube/iframe_api_reference.html

I use the HTML5 video player on this site: http://www2.highpoint.edu

And older versions of IE cannot use that player (very well), so I still use Flash embed tags for those browsers instead which are done via the YouTube js api: http://code.google.com/intl/en/apis/youtube/js_api_reference.html

Here is an example page: http://www2.highpoint.edu/youtube.php?id=ht1PrQkE3WU

I highly recommend mediaelementjs if you need to roll-your-own video player. All videos on our site are hosted by YouTube, but we still use it as an audio player, as seen here: http://www2.highpoint.edu/president.php?mp3=http%3A%2F%2Fwww2.highpoint.edu%2Fmp3%2FNQ_LI013107.mp3

Laster

Thank you. Did I miss a playlist on any of those links? Didn't see one. – Collagen

No playlist in my examples, but YouTube has it documented here: code.google.com/intl/en/apis/youtube/… and code.google.com/intl/en/apis/youtube/… – Laster

mediaelementjs will let you bind to the ended event, which you could use to write your own playlist code: mediaelementjs.com/#api – Laster

Answer 5

JWPlayer's last version supports HTML5 playback as well. Now it can also be used in mobile devices that do not support flash.

Another HTML5 video player with flash fallback is videoJS ( http://videojs.com/ )

Windhover

Did you read the question? Your first sentence makes me think no. Your second sentence is helpful. – Collagen

Actually I started to... then skipped directly to the questions – Windhover

Answer 6

swf is not supported by mobile device

i think this is useful but need two type file

<video width="320" height="240" controls="controls">
  <source src="movie.mp4" type="video/mp4" /> <!-- for iPad :) -->
  <source src="movie.ogg" type="video/ogg" /> <!--for windows  -->
  Your browser does not support the video tag.
</video> 

and i try javascript to change movie and it worked in both

you must be use this because i have an ipad and i cant open the swf based video player's video

Incomplete