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

JW Player and playlist configuration example page
Example of the JWPlayer and Playlist layout:

You should ask [JWPlayer developers](http://www.longtailvideo.com/support/) for support. [This](http://www.longtailvideo.com/support/forums/jw-player/player-development-and-customization/17300/jw-54-html5-ipad-compatibility-control-bar-playlist) may be helpful. — ExpExc, Nov 08 '11 at 15:10
@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) — cwd, Nov 17 '11 at 14:03

score 3 · Answer 1 · answered Nov 17 '11 at 06:28

3

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.

answered Nov 17 '11 at 06:28

Moe Sweet

3,683
2
34
46

If you could give an example of the implementation that would be awesome. – cwd Nov 17 '11 at 14:05
1

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. – Moe Sweet Nov 17 '11 at 15:14

score 2 · Answer 2 · edited Jan 24 '14 at 15:25

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>

score 1 · Answer 3 · edited Jun 20 '20 at 09:12

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

Upgrade. I had some trouble with 5.6 not playing on mobile devices, and upgrading to 5.8 fixed it.
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.
Maybe override the mode. For my media, html5 seems to play a little better.

modes: [ { type: "html5" }, { type: "flash", src: "/media/player.swf" } ]
Try to use the same height/width as your media.
If you are playing audio only- it can be hard to find the (centered) play button if your width is a large value.
I'm not using the playlist. I have a list of recordings on the page, and a button to load a popup/dialog.

score 1 · Answer 4 · edited May 23 '17 at 11:53

1

These links might be helpful:

edited May 23 '17 at 11:53

Community

1
1

answered Nov 17 '11 at 10:41

sepulchered

814
7
18

The links are helpful - thank you. A note to others - the PagePlayer is for audio only though, and the JW Player 5 link you provided fails to load the video on an ipad. – cwd Nov 17 '11 at 22:56

score 1 · Answer 5 · answered Nov 17 '11 at 20:48

1

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

answered Nov 17 '11 at 20:48

Teddy

18,357
2
30
42

Thank you. Did I miss a playlist on any of those links? Didn't see one. – cwd Nov 17 '11 at 22:57
1

No playlist in my examples, but YouTube has it documented here: http://code.google.com/intl/en/apis/youtube/player_parameters.html?playerVersion=HTML5#playlist and http://code.google.com/intl/en/apis/youtube/js_api_reference.html#loadPlaylist – Teddy Nov 18 '11 at 00:53
mediaelementjs will let you bind to the `ended` event, which you could use to write your own playlist code: http://mediaelementjs.com/#api – Teddy Nov 18 '11 at 00:59

score 0 · Answer 6 · answered Nov 08 '11 at 12:49

0

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/ )

answered Nov 08 '11 at 12:49

Variant

17,279
4
40
65

Did you read the question? Your first sentence makes me think no. Your second sentence is helpful. – cwd Nov 08 '11 at 15:35
Actually I started to... then skipped directly to the questions – Variant Nov 08 '11 at 15:40

score 0 · Answer 7 · answered Nov 17 '11 at 21:25

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

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

7 Answers7