CODEWITHSUNDEEP
htmlvideomp4jwplayer
cwd
cwd

Reputation: 54776

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

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:

screenshot-with-shadow.jpg

Upvotes: 11

Views: 9335

Answers (6)

Ctv
Ctv

Reputation: 21

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>

Upvotes: 2

05-MaN
05-MaN

Reputation: 1

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

Upvotes: 0

Teddy
Teddy

Reputation: 18572

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

Upvotes: 1

Moe Sweet
Moe Sweet

Reputation: 3721

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.

Upvotes: 3

Brian Maltzan
Brian Maltzan

Reputation: 1327

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.

Upvotes: 1

Variant
Variant

Reputation: 17365

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

Upvotes: 0

Related Questions