Name is required.
Email address is required.
Invalid email address
Answer is required.
Exceeding max length of 5KB

Dynamic playlist for both iOS and RTMP streaming

Previous thread: http://www.longtailvideo.com/support/forums/jw-player/using-playlists/27187/m3u8-and-xml-playlists-for-rtmp-and-ios-dynamic-streaming/

Decided to try this again and hopefully all of my issues can be worked out in this thread. Have read the forums, instructions, etc., but I'm stuck.

I'm trying to build a page with the following features (dynamic streaming playlist both Flash and iOS):
1. Playlist (multiple videos):
2. Each item on the playlist points to two external manifest files with dynamic streaming for:
a. Flash/PCs: smil manifest file pointing to video with 4 different bandwidths
b. m3u8 file for iOS.

For example, each item in the rss playlist would contain a .smil and .m3u8 manifest like this :
bc.. <?xml version="1.0" encoding="UTF-8"?>
<rss version="2.0" xmlns:media="http://search.yahoo.com/mrss/"
xmlns:jwplayer="http://developer.longtailvideo.com/trac/wiki/FlashFormats">
<channel>
<title>Single video with bitrate switching</title>
<item>
<title>Clicking With Technology</title>
<description>FMS 4.5 bitrate switching.</description>
<media:group>

<media:content url="Manifests/Concert.smil"/>
<media:content url="Manifests/Concert.m3u8"/>

</media:group>
<jwplayer:type>rtmp</jwplayer:type>
<jwplayer:streamer>rtmp://63.116.232.8/vod/</jwplayer:streamer>
</item>
</channel>
</rss>



3. Build a custom skin.

I am stuck on step 2a. I have not been able to get JW player to work with a manifest file (smil) for dynamic streaming or with an xml/rss file (playlist). The player works with .m3u8 manifests with no problem (iOS devices) but I cannot get it to work with any kind of external playlist file on the rtmp side. All of the individual streams have been checked and they work (with an inline playlist, for example). There are no cross-domain issue or errors.

Simple set-ups without playlist, just trying to make it work with a smil or an xml playlist have failed.

These are some of my attempts so far:

1. a. http://www.librarymedia.net/Dynamic/Dynamic.html Error: Task Queue failed at Step 5: playlist is empty.
set-up: bc.. <div id="jwplayer"></div>

bc.. <script>
jwplayer("jwplayer").setup({
'flashplayer': 'mediaplayer/player.swf',
playlist: [{
sources: [{
file: "Manifests/ClickingWithTechnology.smil"
},]
}],
height: 360,
width: 640,
primary: "flash"
});
</script>


smil file:
bc.. <smil>
<head>
<meta base="rtmp://63.116.232.8/vod/"/>
</head>
<body>
<switch>
<video src="mp4:ClickingWithTechnology_2000kbps.f4v" system-bitrate="2000000" width="1920" height="1080" />
<video src="mp4:ClickingWithTechnology_1200kbps.f4v" system-bitrate="1200000" width="960" height="540" />
<video src="mp4:ClickingWithTechnology_800kbps.f4v" system-bitrate="800000" width="640" height="360" />
<video src="mp4:ClickingWithTechnology_400kbps.f4v" system-bitrate="400000" width="320" height="180" />
</switch>
</body>
</smil>



2. http://www.librarymedia.net/Dynamic/Playlist.html Error: video not found or access denied: rtmp://63.116.232.8/vod/mp4:5KRun2012-BikeCam-06032012_400kbps.f4v
set-up:
bc.. <div id='mediaplayer'></div>


bc.. <script type="text/javascript">
jwplayer('mediaplayer').setup({
'flashplayer': 'mediaplayer/player.swf',
'id': 'playerID',
'width': '960',
'height': '540',
'controlbar': 'over',
'playlistfile': 'playlist.xml', //also tried 'playlist': 'playlist.xml',//
'playlist.position': 'bottom',
'playlist.size': '100',
'skin': 'mediaplayer/glow.zip'
});
</script>


xml playlist: Have also tried <rss version="2.0" xmlns:jwplayer="http://rss.jwpcdn.com/">

bc.. <rss version="2.0" xmlns:media="http://search.yahoo.com/mrss/" xmlns:jwplayer="http://developer.longtailvideo.com/trac/">
<channel>
<title>MRSS Playlist</title>
<item>
<title>2012 5K Run</title>
<media:content url="rtmp://63.116.232.8/vod/mp4:5KRun2012-BikeCam-06032012_400kbps.f4v" />
<media:thumbnail url="Splash/5KRun2012.png" />
<description>TEF 5K run to benefit the Tenafly Public Schools</description>
<jwplayer:duration>4708</jwplayer:duration>
</item>
<item>
<title>Clicking With Technology</title>
<media:content url="rtmp://63.116.232.8/vod/mp4:ClickingWithTechnology_400kbps.f4v" />
<media:thumbnail url="Splash/ClickingWithTechnology.png" />
<description>Student produced project on educational technology.</description>
<jwplayer:duration>1509</jwplayer:duration>
</item>
<item>
<title>2012 Graduation.</title>
<media:content url="rtmp://63.116.232.8/vod/mp4:Graduation2012-06212012_400kbps.f4v" />
<media:thumbnail url="Splash/Graduation2012.png" />
<description>Class of 2012 graduation ceremony.</description>
<jwplayer:duration>4949</jwplayer:duration>
</item>
</channel>
</rss>



Streams play fine with an inline playlist or an .m3u8 manifest file: http://www.librarymedia.net/Dynamic/Playlist2-inline.html

Again, I cannot get the player to load rtmp streams from a playlist file. Any suggestions on how I can get JW player to work with an external playlist file (mrss or .smil). I can't move onto the other steps until I get this part working.

Thanks.

31 Community Answers

Up Down

Ethan Feldman

JW Player Support Agent  
0 rated :

I think the issue here is that you are using code for JW6, but you are using JW5.

I would download JW6, to test with.

Up Down

JW Player

User  
0 rated :

Thanks for the reply Ethan.

I switched everything to JW 6 and the player now successfully loads both .smil and .m3u8 playlists (thanks for the tip).

However, the playlist with both the .smil and .m3u8 manifests is not loading (no playable source, which means that the playlist.xml file is not working). I tested all of these manifest files individually on test pages and they all load and play.

Setup:
bc.. <script>
jwplayer("jwplayer").setup({
'flashplayer': 'mediaplayer6/player.swf',
playlist: [{
sources: [{
file: "Manifests/playlist.xml"
},]
}],
height: 460,
width: 640,
primary: "flash",
listbar: {
position: "bottom",
size: 100
}
});

</script>



playlist.xml file with the .smil and .m3u8 manifests for each playlist item:
bc.. <rss version="2.0" xmlns:media="http://search.yahoo.com/mrss/" xmlns:jwplayer="http://developer.longtailvideo.com/trac/">
encoding="UTF-8"
xmlns:media="http://search.yahoo.com/mrss/"
xmlns:jwplayer="http://developer.longtailvideo.com/trac/wiki/FlashFormats">
<channel>
<title>RTMP and iOS dynamic streaming playlist.</title>

<item>
<title>2012 5K Run</title>
<description>TEF benefit run.</description>
<media:group>
<media:content url="Manifests/5KRun2012.m3u8" />
<media:content url="Manifests/5KRun2012.smil" />
<media:thumbnail url="Splash/5KRun2012.png" />
</media:group>
<jwplayer:type>rtmp</jwplayer:type>
<jwplayer:streamer>rtmp://63.116.232.8/vod/</jwplayer:streamer>
<jwplayer:duration>4708</jwplayer:duration>
</item>

<item>
<title>Clicking With Technology</title>
<description>Technology and Education.</description>
<media:group>
<media:content url="Manifests/ClickingWithTechnology.m3u8" />
<media:content url="Manifests/ClickingWithTechnology.smil" />
<media:thumbnail url="Splash/ClickingWithTechnology.png" />
</media:group>
<jwplayer:type>rtmp</jwplayer:type>
<jwplayer:streamer>rtmp://63.116.232.8/vod/</jwplayer:streamer>
<jwplayer:duration>1509</jwplayer:duration>
</item>

<item>
<title>2012 Graduation.</title>
<description>THS Graduation Ceremony.</description>
<media:group>
<media:content url="Manifests/Graduation2012.m3u8" />
<media:content url="Manifests/Graduation2012.smil" />
<media:thumbnail url="Splash/Graduation2012.png" />
</media:group>
<jwplayer:type>rtmp</jwplayer:type>
<jwplayer:streamer>rtmp://63.116.232.8/vod/</jwplayer:streamer>
<jwplayer:duration>4949</jwplayer:duration>
</item>

<item>
<title>2012 THS Fashion Show.</title>
<description>THS students dress up.</description>
<media:group>
<media:content url="Manifests/THS-FashionShow2012.m3u8" />
<media:content url="Manifests/THS-FashionShow2012.smil" />
<media:thumbnail url="Splash/THS-FashionShow.png" />
</media:group>
<jwplayer:type>rtmp</jwplayer:type>
<jwplayer:streamer>rtmp://63.116.232.8/vod/</jwplayer:streamer>
<jwplayer:duration>2074</jwplayer:duration>
</item>
</channel>
</rss>



Thanks for the help. You're awesome.

Up Down

JW Player

User  
0 rated :

Here's the link: http://www.librarymedia.net/Dynamic/Playlist3-rss.html

Up Down

Ethan Feldman

JW Player Support Agent  
0 rated :

I think this:

playlist: [{
sources: [{
file: “Manifests/playlist.xml”
},]
}],

Needs to be just:

playlist: “Manifests/playlist.xml”,

Up Down

JW Player

User  
0 rated :

Progress. http://www.librarymedia.net/Dynamic/Playlist3-rss.html
<ol> <li>Works in iOS, but scrolling does not work. iScroll is built into JW player, right? </li> <li>Does not work on computer browsers: no player, just a black box. I don't see any errors and Firebug isn't showing anything </li> </ol>

Half way there. Thanks for the help.

Up Down

JW Player

User  
0 rated :

JW6 & scrolling; http://developer.longtailvideo.com/trac/ticket/1818

Up Down

Ethan Feldman

JW Player Support Agent  
0 rated :

Yes, the scrolling is a bug.

Hm, maybe something wrong with your xml?

I get this debug error:

TypeError: Error #1009: Cannot access a property or method of a null object reference.
	at com.longtailvideo.jwplayer.parsers::RSSParser/parse()
	at com.longtailvideo.jwplayer.model::Playlist/playlistLoaded()
	at flash.events::EventDispatcher/dispatchEventFunction()
	at flash.events::EventDispatcher/dispatchEvent()
	at com.longtailvideo.jwplayer.utils::AssetLoader/dispatchEvent()
	at com.longtailvideo.jwplayer.utils::AssetLoader/urlLoadComplete()
	at flash.events::EventDispatcher/dispatchEventFunction()
	at flash.events::EventDispatcher/dispatchEvent()
	at flash.net::URLLoader/onComplete()

Up Down

JW Player

User  
0 rated :

Now seeing the error with Firebug.

Thought that maybe adding <jwplayer:provider>video</jwplayer:provider> property to the xml file would do it, but no change.

Do you think maybe I have to add the media:content@type property to the xml? What would be the correct way to do this?

How can I see what line or object the error refers to?

Don't really know what this problem is or what steps to take to fix it. The playlist.xml code is contained in a previous message above.

Thanks

Up Down

Ethan Feldman

JW Player Support Agent  
0 rated :

I would try to base your xml off this template – http://www.longtailvideo.com/support/jw-player/29253/basic-rss-feed

Up Down

JW Player

User  
0 rated :

Still getting error #1009: Cannot access a property or method of a null object reference (referencing RSSParser/parseItem()

Works fine in iOS. I changed the playlist.rss file to:
bc.. <rss version="2.0" xmlns:jwplayer="http://rss.jwpcdn.com/">
<channel>

<item>
<title>2012 5K Run</title>
<description>TEF benefit run.</description>
<jwplayer:source file="Manifests/5KRun2012.m3u8" />
<jwplayer:source file="Manifests/5KRun2012.smil" />
<jwplayer:image>Splash/5KRun2012.png</jwplayer:image>
<jwplayer:provider>video</jwplayer:provider>
</item>

<item>
<title>Clicking With Technology</title>
<description>Technology and Education.</description>
<jwplayer:source file="Manifests/ClickingWithTechnology.m3u8" />
<jwplayer:source file="Manifests/ClickingWithTechnology.smil" />
<jwplayer:image>Splash/ClickingWithTechnology.png</jwplayer:image>
<jwplayer:provider>video</jwplayer:provider>
</item>

<item>
<title>2012 Graduation.</title>
<description>THS Graduation Ceremony.</description>
<jwplayer:source file="Manifests/Graduation2012.m3u8" />
<jwplayer:source file="Manifests/Graduation2012.smil" />
<jwplayer:image>Splash/Graduation2012.png</jwplayer:image>
<jwplayer:provider>video</jwplayer:provider>
</item>

<item>
<title>2012 THS Fashion Show.</title>
<description>THS students dress up.</description>
<jwplayer:source file="Manifests/THS-FashionShow2012.m3u8" />
<jwplayer:source file="Manifests/THS-FashionShow2012.smil" />
<jwplayer:image>Splash/THS-FashionShow.png</jwplayer:image>
<jwplayer:provider>video</jwplayer:provider>
</item>
</channel>
</rss>



Should I change the .smil files to a different format? Specify the media type somewhere (video mp4)?

The individual .smil files all work (when passed to the player directly and not being passed through an rss file).
bc.. <smil>
<head>
<meta base="rtmp://63.116.232.8/vod/"/>
</head>
<body>
<switch>
<video src="mp4:ClickingWithTechnology_2000kbps.f4v" system-bitrate="2000000" width="1920" height="1080" />
<video src="mp4:ClickingWithTechnology_1200kbps.f4v" system-bitrate="1200000" width="960" height="540" />
<video src="mp4:ClickingWithTechnology_800kbps.f4v" system-bitrate="800000" width="640" height="360" />
<video src="mp4:ClickingWithTechnology_400kbps.f4v" system-bitrate="400000" width="320" height="180" />
</switch>
</body>
</smil>




Probably a problem with the RSS parser. No idea how to diagnose or fix this.

Thanks.

Up Down

Ethan Feldman

JW Player Support Agent  
0 rated :

What if you simply use our demo? That works, right? I would start from there as a template and build out one by one.

Up Down

JW Player

User  
0 rated :

Which demo?

I changed the xml file to the template as you suggested. Same error. As I mentioned earlier, the individual .smil and .m3u8 files work and the site works on iOS devices, but I have never been able to figure out how to get this to work on PC browsers (rtmp dynamic streaming in the smil files).

I'll take a step back an try to get a working page with a simple rss file again (a single stream). I haven't been able to do this successfully either (I have not been able to make a single working page with JW player loading videos from an rss file) but it should be simpler to figure out.

I'll follow this: http://www.longtailvideo.com/support/jw-player/28843/loading-rss-feeds

Much thanks for the help. Can't continue the process until I solve this.

Up Down

Ethan Feldman

JW Player Support Agent  
0 rated :

I meant this one:

"
I would try to base your xml off this template – http://www.longtailvideo.com/support/jw-player/29253/basic-rss-feed
"

Up Down

JW Player

User  
0 rated :

Used the template. Still getting the Action Script #1009 error. I can't tell what the video sources are in the template (rtmp or http streams) because only the relative paths are shown:
<code>
<rss version="2.0" xmlns:jwplayer="http://rss.jwpcdn.com/">
<channel>

<item>
<title>Sintel Trailer</title>
<description>Sintel is a fantasy CGI movie from the Blender Open Movie Project.</description>
<jwplayer:image>/assets/sintel.jpg</jwplayer:image>
<jwplayer:source file="/assets/sintel.mp4" />
</item>
</channel>
</rss>
<./code>

I've tried serving the .rss file from the same folder as the videos. Tried http and rtmp sources. No difference.

Does it matter what program I use to make the .rss file?

I have no idea what I'm doing wrong, but I think my best bet is trying to figure out exactly what the Action Script error is referring to.

Do you know if anyone else can help? Jeroen?

Thanks for hanging in with me.

Up Down

Ethan Feldman

JW Player Support Agent  
0 rated :

I mean do you see the issue on our site?

If you don’t, download the file, and just use the same player set up on a blank page on our site.

Do you still have the same issue?

Up Down

JW Player

User  
0 rated :

Success! I owe you big time! Now I can move onto designing a custom xml skin for our page.

I downloaded and used the JW rss file from your site and now everything works. Maybe this file should be made available for download on one of your documentation pages.

Questions:
1. RSS file encoding: The content of the working rss file that I got from your site is exactly the same as the rss files that I made that did not work. Is there something in the encoding that caused this problem? What program should I use to make these fiels with?

2. iScroll issue: Is there any way to fix this with JW 6? There is a third party solution provided by James Herrieven on this thread: http://www.longtailvideo.com/support/forums/jw-player/using-playlists/29894/jw-player-6-iscroll-issue/ , but I would rather stick with the normal JW player setup (specially since I got it to work now). Can iScroll be incorporated into a page somehow?

3. I would like to make a tutorial for your site explaining the entire process of making a dynamic streaming page that works on both iOS devices and PC browsers (what I now have). Would you be interested in something like this? I don't think that you currently have any documentation or a working example for something like this and I think that (based on the number of related threads in your forums) this would be extreme helpful. Let me know how we can contact each other if you're interested.

Once again, thank you so much for your help. I've been trying to do this for awhile now and there is no way that I could have done this without you and Ethan.

Up Down

Ethan Feldman

JW Player Support Agent  
0 rated :

Awesome! :D

1) It might be a server setting.

2) Not yet, but we are planning on fixing this.

3) Possibly, but I am not sure if we have guest blog posts, per say.

Up Down

JW Player

User  
0 rated :

@Carlos / @Ethan

Taking account of the fact that some people prefer to stick with the JavaScript embed approach, and that the iScroll fix is not likely to hit JW Player until JW6.5, I've extracted the feature from my JW HTML Config library and made it available as a standalone library - which can now easily be integrated into existing JS embeds.

You can find more details here: http://powered-by-haiku.co.uk/?p=469

James

Up Down

Ethan Feldman

JW Player Support Agent  
0 rated :

Thanks James

Up Down

JW Player

User  
0 rated :

Hi James:

I downloaded your .js file and placed it after the jwplayer js file, but I have not been able to get scrolling to work. I'm probably not using the code correctly so: How would I add your code:bc.. var my_player = jwplayer("my_id").setup({...});
my_player.onPlaylist(function(){ jwplayer.touchScroll(500); });


to this setup (or does the javascript for your solution separate?):

bc.. <script type="text/javascript">
jwplayer("jwplayer").setup({
playlist: "Manifests/playlist-jw2.rss",
height: 560,
width: 640,
primary: "flash",
listbar: {
position: "bottom",
size: 200
}
});
</script>


Sorry but I don't really know js. Thanks

Up Down

Ethan Feldman

JW Player Support Agent  
0 rated :

You should provide a link when asking for forum help btw ;)

Up Down

JW Player

User  
0 rated :

Hi Carlos

It's simply a matter of assigning the result of your "setup" call to a JavaScript variable, and then attaching a JW event listener to this variable. This would be done as follows:

bc.. <script type="text/javascript">
var my_player = jwplayer("jwplayer").setup({
playlist: "Manifests/playlist-jw2.rss",
height: 560,
width: 640,
primary: "flash",
listbar: {
position: "bottom",
size: 200
}
});
my_player.onPlaylist(function(){ jwplayer.touchScroll(this,500); });
</script>



Note: You are missing the first parameter (of _this_) which needs to be passed to the touchScroll() function.

I've put up a working example here: http://dev.powered-by-haiku.co.uk/jw-html-config/debug/carlos.htm

Up Down

Ethan Feldman

JW Player Support Agent  
0 rated :

Nice link :D

Up Down

JW Player

User  
0 rated :

You're a genius James.

http://www.librarymedia.net/Dynamic/Playlist3-rss.html (will probably delete this page in the next week or two).

Thanks to you an Ethan I now have a page that has all of the functionalities I wanted: a playlist, each item has dynamic streaming (multiple bit rates) that works with Flash (desktop browsers) and iOS devices.

Now to build a custom skin.

Thanks again for all of your help.


Up Down

Ethan Feldman

JW Player Support Agent  
0 rated :

Nice :)

Up Down

JW Player

User  
0 rated :

Hi I tried everything i know to get iscroll to work.
I placed a copy of "jw6-touchscroll.min.js" in a folder on my site but nothing works.
wondering if anyone can suggest what i maybe doing wrong
thanks

sample page will not scroll in IOS

http://www.universeuniverse.com/BEAMSmusictest2jw62mp15BB.html


bc.. <!DOCTYPE html>
<head>
<meta http-equiv="content-type" content="text/html;
charset=ISO-8859-1">
<script type="text/javascript" src="/jwplayer/jwplayer.js"></script>

<!-- touchScroll Library -->
<script src="[/path/to/touch-scroll]/jwplayer/jw6-touchscroll.min.js"></script>

</head>
<body>

<div id="jwplayer"></div>

<script type="text/javascript">
var my_player = jwplayer("jwplayer").setup({
playlist: [{
image: "http://www.universeuniverse.com/WAVE%20cover.jpg",
file: "http://www.universeuniverse.com/planets/wave/music/01%20find%20king%20evil.mp3",
title: "01 find king evil"

},{
image: "http://www.universeuniverse.com/WAVE%20cover.jpg",

file: "http://www.universeuniverse.com/planets/wave/music/02%20how.mp3",
title: "02 how"

},{
image: "http://www.universeuniverse.com/WAVE%20cover.jpg",
file: "http://www.universeuniverse.com/planets/wave/music/01%20find%20king%20evil.mp3",
title: "01 find king evil"
},{
image: "http://www.universeuniverse.com/WAVE%20cover.jpg",

file: "http://www.universeuniverse.com/planets/wave/music/02%20how.mp3",
title: "02 how"
},{
image: "http://www.universeuniverse.com/WAVE%20cover.jpg",

file: "http://www.universeuniverse.com/planets/wave/music/02%20how.mp3",
title: "02 how"
},{
image: "http://www.universeuniverse.com/WAVE%20cover.jpg",

file: "http://www.universeuniverse.com/planets/wave/music/02%20how.mp3",
title: "02 how"
}],
height: 260,
width: 640,
primary: "flash",
listbar: {
position: "right",
size: 200
}
});
my_player.onPlaylist(function(){ jwplayer.touchScroll(this,500); });
</script>
</body>
</html>

Up Down

Ethan Feldman

JW Player Support Agent  
0 rated :

The iScroll thing is a bug that we need to fix.

Up Down

JW Player

User  
0 rated :

I thought this was a temporary fix till 6.5 is released.
by James Herrieven.
but could not get it working.
thanks anyway
wynn

Up Down

Ethan Feldman

JW Player Support Agent  
0 rated :

Yes it is a temporary fix.

But this file is actually missing – http://www.universeuniverse.com/%5B/path/to/touch-scroll%5D/jwplayer/jw6-touchscroll.min.js

Up Down

JW Player

User  
0 rated :

Thanks!
that fixed it
Really appreciate i
wynn

Up Down

Ethan Feldman

JW Player Support Agent  
0 rated :

Np!

This question has received the maximum number of answers.