Order Now AdSolution Sign Up | Login » Bits on the Run Sign Up | Login »

Forums

/

Does the html 5 player support playlists?

73 replies [Last post]
Reply

First of all, excellent work on the player. It is by far the best one out there and I was happy to see the html5 beta.

I am just trying to get a very simple play list to show up in html5/chrome, but I only see the play list when it falls back to flash in firefox.

Also, if playlists do work with html5, would it be possible to have different playlists configured for html5 rendering and the flash fallback? The reason is I use a youtube playlist for my normal player, and they do not yet support html5 via the API.

Thanks very much for any answers.

--Brian.

Reply

Sorry, I found the answer, but it did not seem to be in the main documentation.

http://developer.longtailvideo.com/trac/wiki/HTML5Overview

"The JW Player for HTML5 does currently not support any playlist functionality. Considering the flexibility of building your playlist totally in HTML, this should not be an issue. "

I guess I need to do some more research, but I'm not sure exactly how a playlist would be built in html. Probably some fancy javascript that would dynamically replace the src of the video tag when you click on a thumbnail?

If anyone could provide a hint, I would really appreciate it. I would only want this html5 playlist to show if they had a compatible browser of course.

Thanks again.

Reply

Even better, you could use the load(filePath) function of the player, which will take care of all of that for you.

Note: we don't have the ability to switch between Flash and <video> yet, so please be sure to use the same type of videos for both. No idea yet how we'll handle multiple sources, but we welcome suggestions.

Reply

Zach, I am interested in setting up a Javascript-based playlist for the HTML5 player similar to what Bmeist described.

I didn't see any references to load(filePath) in the Javascript API (http://www.longtailvideo.com/support/jw-player/jw-player-for-html5/11894/player-javascript-api) -- can you explain in more detail your suggestion?

Reply

Excellent point Chris! It isn't documented because it isn't implemented! (While the function exists, it doesn't seem to work as expected).

There's an open ticket for this - http://developer.longtailvideo.com/trac/ticket/901. Hopefully we'll get to it shortly.

Reply

Thanks for the info Zach. Here is my current and hopefully temporary solution.

String userAgent = request.getHeader("user-agent");
boolean isIphoneOS = userAgent.contains("iPhone") || userAgent.contains("iPod") || userAgent.contains("iPad");

If I detect a non-flash enabled client (currently just iphoneOS), I am just using a plain old html5 video tag and 5 hardcoded thumbnails under the player, which when clicked will simply set the src of the video element using the loadVideo function.

If it is not iphoneOS, I'm going to assume that you can handle flash, so I will display the normal jw flash player, which nicely pulls the playlist from our youtube channel rss. Hopefully once the youtube api supports html5 video I will be able to use this new JW player to serve the html5 via the youtube rss playlist?

function loadVideo(aVideo) {
  var video = document.getElementsByTagName('video')[0];
  video.src = aVideo;
  video.load();
}

<video src="" poster="poster.jpg" width="300" height="176" controls></video>
<p>
<img src="thumb1.jpg" width="56" height="30" onclick="loadVideo('http://blah.com/movie1.m4v')">
<img src="thumb2.jpg" width="56" height="30" onclick="loadVideo('http://blah.com/movie2.m4v')">
<img src="thumb3.jpg" width="56" height="30" onclick="loadVideo('http://blah.com/movie3.m4v')">
<img src="thumb4.jpg" width="56" height="30" onclick="loadVideo('http://blah.com/movie4.m4v')">
<img src="thumb5.jpg" width="56" height="30" onclick="loadVideo('http://blah.com/movie5.m4v')">

Reply

 
Any luck gettingvideo.load(); to work?

It only seems to work if I click on the scrubber immediately after loading a new file.

Test Page:  willswonders.myip.org:8074/HTML5/JW%20Player%20HTML5-Beta.html

Reply

This little script just made my project work for iPad. So simple. Thanks a ton Bmeist.

Reply

This works very nicely for playing one video at a time, but I would like to automatically move to the next video once the previous one ends. I put all the sources in an array and tried using AddEventListener ('ended') or .onended with no success. Any suggestion?

Reply

@Eric - Set the repeat flashvar to list.

Reply

LongTail team,

I've been searching for a few hours and still a bit confused as the best way to go about building a playlist for non-Flash browsers.

I basically want the player to rotate through pictures or videos automatically, without having to build a playlist all on my own. Where can I start?

Reply

@Chris, here is a playlist example that works in HTML5 - http://developer.longtailvideo.com/player/trunk/fl5/js/test/examples/playlist.html?type=progressive

You will have to built this on your own, there is no getting around that.

Reply

@Ethan, Okay... so the HTML playlist functionality will replace this in the proposed 4 weeks?

Reply

...what are you talking about?

Reply

@Ethan: Hi there, I'm talking about the ability to add XML feeds as playlists for playing in HTML5 setups of the player (http://developer.longtailvideo.com/trac/milestone/Player%205.5 - "RSS/ATOM/XSPF parsing in HTML").

I'm basically looking for a simple way to populate the player with a playlist of content and have it still ready for HTML5.

Reply

I am not sure of the ETA of this yet...5.4 just was released yesterday...

Reply

Okay thanks for your help!

Reply

Np

Reply

@Ethan Hi, you mentioned the link below as an example that works with HTML5. Is there any documentation on it at all? Im new to this and I have a task that requires html5 playlist but with no use if .ogv players. How can i change this so that it uses only mp4 and flash as a fallback?
Ive tried removing the .ogv link but i get an error saying the player is not supported by this browser (on FF and Chrome). Please help.
http://developer.longtailvideo.com/player/trunk/fl5/js/test/examples/playlist.html?type=progressive

thanks
d

Reply

Can you provide a link to where you are trying to run the code? Thanks.

Reply

Is there a way to make it possible to link to one specific video from an external source? For example, so that I can send someone a link to a specific video on the page.

http://developer.longtailvideo.com/player/trunk/fl5/js/test/examples/playlist.html?type=progressive

Thanks
GHM

Reply

@David: There's some documentation on playlists using javaScript here:

http://www.longtailvideo.com/support/jw-player/jw-player-for-flash-v5/15995/jw-embedder-reference-gu...
http://www.longtailvideo.com/support/jw-player/jw-player-for-flash-v5/16006/javascript-playlist-in-t...

@GHMason: This is called deep linking and it's not supported by the player. You can use our API to write some JavaScript to do this, but it's not natively supported. See http://www.longtailvideo.com/support/jw-player/jw-player-for-flash-v5/12540/javascript-api-reference for more information. Note that you'll need to be running JW Player 5.3 to use this new API.

Reply

We've done a server side PHP hack for our particular needs.

We just call this for content containing video tag and then when we get a playlist, we just replace the tag with the first mp4 we find.

https://github.com/simpleweb/jwplayer_wordpress_ios_playlists

Might help someone!
Cheers
Tom

Reply

Thanks for sharing that, Tom. Sorry for the dumb question, but where would I need to put that code exactly (for a WP install)?

And just to clarify, this workaround just plays the first item in the XML playlist and stops?

** Hope to see a JW solution to this soon ;)

Thanks,
Jim

Reply

@Jim - We can only support what HTML5 itelf supports, and HTML5 itself does not support XML playlists.

Reply

Hi,

I see that JW5.6 still has no support for XML playlists in HTML5.
I will be very grateful when you add this feature.

Thanks

Reply

XML is not supported in HTML5 itself...

Reply

Is it possible to see the Hello.xml playlist used in the is page please?

http://developer.longtailvideo.com/player/trunk/fl5/js/test/examples/playlist.html?type=progressive

Reply

This is a JSON playlist.

Reply

Hi

I understand that we need to define playlists in the embedder script options if we want both flash and html5 support, but I'm unsure on how to proceed to add a mp4/webm switch like the "levels" tag in such a scenario.

I'd be grateful to get some guidelines here....

Thanks many!
Dirk

Reply

http://www.longtailvideo.com/support/jw-player/jw-player-for-flash-v5/15995/jw-embedder-reference-gu...

Just make one of the files an mp4, and one a webm.

We actually do this on this page - http://www.longtailvideo.com/players/jw-flv-player/

levels: [
                 {file: "http://content.bitsontherun.com/videos/bkaovAYt-364766.mp4"},
       {file: "http://content.bitsontherun.com/videos/bkaovAYt-1287469.webm"}
                          ]
Reply

Thanks for your reply Ethan. I'm sorry, I must not have been clear enough with my question: I know how to use the "levels" tag in a single-file player.

I need some help with the "levels" tag in a playlist so that in html5 mode there's an auto switch between mp4 and webm.

I need to run a playlist, that serves flash as 1st choice , and html5 as fallback, with levels.

I couldn't find an example on how to do that and am unsure about the embedder syntax.

Thanks!
Dirk

Reply

What you could do is use a JavaScript playlist - http://www.longtailvideo.com/support/jw-player/jw-player-for-flash-v5/16006/javascript-playlist-in-t...

And instead of having "file" in the playlist, just have "levels"

Reply
<div id='mediaspace'>A Video Player would display here if JS was installed.</div>
<script type='text/javascript'>
  jwplayer('mediaspace').setup({
    'flashplayer': '/javascripts/mediaplayer/player.swf',
    'playlistfile': 'http://gdata.youtube.com/feeds/api/playlists/B3112D6D0AE5A437',
    'v': '2',
'alt': 'jsonc',
    'controlbar': 'bottom',
    'width': '760',
    'height': '380',
    'plugins': {
       'flow-2': {}
    }
  });
</script>

I am using the above code and I can get this to work in the player for flash only.

notice i'm pulling in a jsonc youtube api string and in theory we should get this to work on html5 correct? If xml was the problem, jsonc takes care of that right?

What isn't working is basically this code on my ipad in their safari browser. Yet your progressive player does work and is awesome! I want that in my life too.

if you try this code, you still need to add the script tag for the actual player, of course, but if you adjust the paths, it should work for you in flash.... does it work for you in html5 too? JW Player was supposed to automagically switch if flash isn't available right? Or did i miss something?

Can Ethan or someone help a brother out?

Reply

Do you have a link?

Reply

http://www.teambonding.com/multimedia-page is a test page. it works in Chrome and that but not on the ipad.

Reply

This issue is that YouTube API playlists do not work in HTML5 mode.

You need to use a mRSS file on your own server.

Demo - http://developer.longtailvideo.com/player/trunk/fl5/js/test/examples/xmlplaylists.html

Sample file - http://developer.longtailvideo.com/player/trunk/fl5/js/test/examples/assets/mrss.xml

Reply

I guess it's just a PITA to update this, if someone in a company updates the youtube playlist. one source that is outputting json now should work?

Can't we just apply the same guts that you guys use to make ONE video display properly, to the playlist portion?

Is this open sourced? or is the player code all in flash and we outsiders can't hack on it?

Reply

Hi Ethan
I have a members based website (wordpress site) and it is almost entirely based on videos.
Some of our trainings have 5 - 10 videos each.
I was looking for a "plugin" that supported a video gallery and used your player.
Do you know of one or can you help me with setting up this playlist with documentation or video on how to do?
thanks Ethan
James

Reply
Reply

Ethan,

I copied and pasted your file into my mrss file and the youtube video won't play on the ipad.

Yet I go to your demo and it plays on the ipad.... it's the same xml format and code, so i don't know what is going wrong.

Same link as before... but if you visit on the ipad you won't see the first video yet on the ipad i can see yours.... weird.

Thoughts?

Reply
Reply

Thanks Ethan,
The youtube video doesn't show up on the ipad, but does on my desktop mac.

I copied and pasted the file exactly as shown.

I am wondering now, what is the best one to use when you want jwplayer to fallback to html5 and a playlist?

Your demo example has 3 'types' of configs and you loop through them making it harder to view and debug which is which.

It must be my

<script type='text/javascript'>
  jwplayer('mediaspace').setup({
    'flashplayer': '/javascripts/mediaplayer/player.swf',
    'file': 'http://www.blah.com/mrss.xml',
    'controlbar': 'bottom',
    'width': '760',
    'height': '380',
    'plugins': {
       'flow-2': {}
    }
  });
</script>

If so, i've tried playlistfile: and file: but both give the same result... am i doing something wrong here?

Reply

What I mean is, that xml we created, works.

Does the xml playlist (that I linked you to), work on - http://developer.longtailvideo.com/player/trunk/fl5/js/test/examples/xmlplaylists.html ? on your ipad? the 3rd entry is youtube, and it works.

Reply

Yes, that xml you created works on your page on my ipad. I just watched it right now and it's awesome. Well it doesn't start at 10 actually, but at 0... but it's close enough for me!

That is what i want in my code. awesomeness.

So, i took your xml file and pasted it into mine. Except the youtube video doesn't show up at all.

http://www.teambonding.com/multimedia-page i'll leave it up to see for yourself.... look at http://www.teambonding.com/mrss.xml for the same file. i took the png out just to see if that was messing it up.

So your demo page works... my demo page using your xml code isn't.

I'd love to figure this out so i can use and promote jwplayer from here on out.

Reply

Can you just use our XML and try it? Does it work if you use ours without modifying it at all?

Reply

No.

I just cut and paste, and it doesn't work.

Reply

Maybe it has to do with Flow here?

Reply

Hi,

I am trying to build a playlist of audio files in JW Player 5.9 using the playlist object block. It is working properly on desktops but on iOS devices it loads the elements but never starts playing. If not possible yet, the visible playlist is not important to this project but might be nice for future work.

I have pieced together this code as best I could from various forum posts and documentation:

http://streamcasting.com/BSN.html

Thanks

Reply

http://web6c3.mmpros.net/crossdomain.xml is missing

You also need to make sure everything is on the same domain for html5 mode.

Reply

Ethan,

I now have everything on

"http://web6c3.mmpros.net/6c3web1013"

including a crossdomain.xml - I do not have access to "http://web6c3.mmpros.net"

I am still unable to play the MP3 files on iOS. Everything else loads. Could the crossdomain being in the subfolder be the issue for just iOS and not flash?

Thanks

Reply

Hi,

I also made another page where everything (including the audio) is under StreamCasting.com:

http://streamcasting.com/BSN-SC.html

Still not playback on iOS. This is not the ideal setup for us anyway but I thought I would give it a try.

Thanks again.

Reply

What version of iOS?

Does the MP3 play here on iOS for you?

http://developer.longtailvideo.com/player/trunk/fl5/js/test/examples/xmlplaylists.html

2nd playlist entry.

Reply

Ethan,

Yes. iOS is 5.0.1

Also, over the weekend I realized that on my test page if I click a playlist item directly it will play fine but if I click the start button in the display area the playlist will start to buffer but never play or error out. This doesn't seem to be the case with yours. I have reviewed mrss.xml and although I don't have multiple formats everything else seems to be the same except in the playlist object rather than xml.

Thanks

Reply

Np. I would try to match our example exactly.

Reply

Ethan,

Thanks so much for posting this. It was very exciting once I finally got playlists working on iOS + JWPlayer 5. Fantastic work guys! :)

Reply

Np :)

Reply

i can't play .ogg or .webm from playlist.can anyone help me?

Reply

Link please?

Reply
Reply
Reply

crossdomain.xml is ok now but still not plauing

check this url http://mamun.vodmanager.s3.amazonaws.com/3e91f85126027432347f448ebc105f3d.ogv video is playing in browser but not playing in player.

Reply

at last can play .ogv and .webm successfully but facing another problem if i build xml playlist mixed with .ogv (http) and .mp4/.flv (rtmp) then only http file playing.please help me

Reply

When using XML playlists, there is some additional things you need to do across domains.

http://www.longtailvideo.com/support/jw-player/jw-player-for-flash-v5/12537/xml-playlist-support

First, note that playlist XML files are subject to Cross-Site Scripting (XSS) restrictions, which limit the way a web page can view data hosted on another domain. This means that a JW Player on one domain cannot load a playlist file from another domain. In Flash mode, adding a crossdomain.xml file to the root of the web server hosting the playlist will allow the player to load the file. In HTML5 mode, the workaround is a bit trickier; you'll need to include an HTTP-Access-Control header in the playlist's HTTP response. If your playlist and player page are hosted on the same domain, these restrictions don’t apply.
Reply

yes my playlist and player page are hosted on the same domain.also i have crossdomain.xml file to the root of my web server.i can play only html5 mode or flash,can't play both together.in this http://www.myviddyup.com/html5test.php you found 3 player.

player1 for both http and rtmp
player2 for only http
player3 for only rtmp

i can play http and rtmp in separate player but i can play both in one player.my question is

is possible play both type in one player using xml playlist?if yes then how? i try many way but could not solve this.

Reply

is there any way switch mode base on playlist item.

Reply

There is not, I'm afraid.

Reply

so is there no way i can put both files(http and rtmp) together in one playlist.i need to built different playlist,one for .ogg/.ogv/.webm and one for others. and play in different player. is that right?

Reply

There is not. It has to be two playlists.

Reply

I seem to be having a problem getting a playlist to load on iOS (iPad / iOS 5.1). The playlist loads just fine and video plays back just fine when in Flash mode on a desktop browser.

However, when I go to load it on the iPad, or (desktop) Safari in HTML5 mode, all I get is a black box where the video should be, and a grey box where the playlist should be. If I tap or click the video area, the first playlist item will actually play.

I've tried setting up the playlist as an RSS playlist, and tries the playlist block method in the jwplayer embed code, and neither worked. I have the playlist.xml on 1 domain, and all the videos on another domain (Amazon S3), but even when I moved my playlist.xml to S3 where the videos are, it still gives me the same issue.

Here are some relevant links to look at..

Page in question: http://clients.mudbugmedia.com/mmidocs.com/meet-our-providers/video-bios

XML for the playlist: feed://clients.mudbugmedia.com/mmidocs.com/video/playlist.xml

Screenshot of what I'm seeing in either Mobile Safari or desktop Safari: http://i.imgur.com/8YZ98.png

My embed code:

<div id='mediaspace'>This text will be replaced</div>

<script type='text/javascript'>
jwplayer('mediaspace').setup({
'flashplayer': '../video/jwplayer/player.swf',
'playlistfile': '../video/playlist.xml',
'backcolor': 'F1EDDF',
'frontcolor': '727272',
'lightcolor': 'C5143B',
'playlistsize': '320',
'playlist': 'right',
'autostart': 'true',
'controlbar': 'bottom',
'width': '800',
'height': '302'
});
</script>

Reply

Can you update to the 5.9 patch? - http://www.longtailvideo.com/order/view

Reply

how to control full screen ?

Reply

how remove fullscreen option from player?

Reply

Post new comment

  • Allowed HTML tags: <code> <blockquote> <em> <strong> <strike> <ul> <li> <ol>
  • You may post code using <code>...</code> .
  • Lines and paragraphs break automatically.
  • Web page addresses and e-mail addresses turn into links automatically.

More information about formatting options