Forums

/

Help with multiple playlists

55 replies [Last post]

I am using the Licensed 5.9 JWPlayer trying to load an xpfs playlist if the viewer is on desktop/android/etc capable browser and an mRSS playlist if viewer is using an iOS based device.

Basically both playlist are generated xml files using similar code but different formatting for the xpfs and mRSS differences.

My issue is that using modes, the flash version loads fine, works fine on everything, but the html5 playlist never seems to load. I just see a black screen with play button overlay and nothing happens when user clicks on the play button on an iOS device.

I was wondering if I can get different set of eyes to look at the problem. You can see the player up at http://www.mindtv.org

Below is the various codes I'm using with it.

Embed Code

<script type="text/javascript" src="[% web_path %][% style_web_path %]/mediaplayer/jwplayer.js"></script>

<div id="mediaspace"><a href="http://www.macromedia.com/go/getflashplayer">Click to download latest Flash Player</a></div>
<script type="text/javascript">
  jwplayer("mediaspace").setup({
"playlistfile": "[% web_path %][% cgi_path %]/playlist_flash.xml",
"backcolor": "000000",
    "frontcolor": "FFFFFF",
    "lightcolor": "990000",
    "controlbar": "over",
    "width": "480",
    "height": "360",
"repeat": "list",
"provider": "video",
"image": "[% web_path %][% style_image_path %]/web_slates_watch2.jpg",
"logo": "[% web_path %][% style_web_path %]/vodplayer/bug.png",
"logo.hide": "false",
"logo.position": "top-right",
"modes": [
         {type: "flash", src: "[% web_path %][% style_web_path %]/mediaplayer/player.swf"},
{type: "html5",
          config: {"playlistfile": "[% web_path %][% cgi_path %]/playlist_html5.xml"
                   },
  },
  {type: 'download'}
    ]
  });
</script>

The two playlist gets generated by a perl script. They can be found directly at:

flash - http://www.mindtv.org/cgi-bin/playlist_flash.xml
and
html5 - http://www.mindtv.org/cgi-bin/playlist_html5.xml

I'd rather just use one playlist which can play on both since they're both using mp4 files now but if the iOS side starts working I'd be happy with it as well. I'm just not seeing what the problem could be since flash version plays perfectly how we want it.

Help?

You do need two playlists in this case, one for Flash, and one for HTML5.

It looks like the script that is generating your html5 playlist is doing something incorrectly though.

The file line of it is "Content-type: application/xml" in plain text, but the flash one is - "<?xml version="1.0" encoding="utf-8"?>" which is correct. I would re-check your scripts.

Oops that was experimenting on some solutions. I figured the headers were not showing up as XML so I added that..since removed but I dont think it works. I suspect the MRSS playlist is not properly done. Could someone take a look at it and see if http://www.mindtv.org/cgi-bin/playlist_html5.xml plays for them?

http://www.mindtv.org/cgi-bin/dt.fcg?style=mind&file=index.ttml&allow_session=1 works for me in HTML5 mode (Chrome with Flash disabled). Can you try it out?

Wow thats odd, disabling flash made that work fine. But I think I see what the issue I was being reported was. The play symbol/overlay comes up and clicking on the area where that is, nothing happens. Video only plays by clicking on the play button in the controls area. I'll talk to those who are testing for me on iOS devices to see if this was the main issue for them.

I'll report back soon thanks!

Np!

Sorry to revive this, so now the issue is that HTML5 version works on browsers. It does not work on iOS devices which is now my main focus. My tester says the controls don't even show up on his device.

Have I done something wrong?

Can you show me?

Try to access http://www.mindtv.org/ from a pc without flash plugin turned on, works fine (once you press play on the controls) = works fine.

Same site through iPhone or iPad gives no controls to play. (from what I'm being told)

Is this behavior normal?

Can you update to the 5.9 patch?

http://www.longtailvideo.com/order/view

Just uploaded the new files to our server!

Thanks. I don't see any issues here. If you press the play button here on your iOS device, does it do anything?

Sorry for the late reply, but the problem exists on iOS devices. Pressing play does not do anything oddly enough.

In my main page I have it using 'playlistfile:' for both flash and html5 modes. In the Video on Demand sections playing individual videos I am using 'file' mode, would changing the playlistfile to file fix this issue?

Thanks for all your help, its greatly appreciated!

Yes, can you try to change it to playlistfile?

Its currently on playlist file, http://www.mindtv.org, iOS users do not see the player at all. There is a black box where the player should be. I'm not sure what is causing this. Again thanks for the help!

Sorry, I meant to say, what happens if you use file instead?

Ok here are the results for the 'file' instead of 'playlistfile'

Replacing both 'playlistfile' with 'file' gives me:

In html5 mode (browser with flash disabled) - I see the player and when I hit play i see 'The video could not be loaded either server or network failed or its not a supported format [url to xml playlist]'

In normal flash mode - I get 'video not found or access denied' error.

Replacing only html5 playlistfile with file:

In html5 mode (browser/flash disabled) - I only see the 'image' file and no play button or controls.

In normal flash mode - loads fine, plays fine.

On an iOS device (iphone) - there is no control bar to activate the video at all.

Hope that helps.

I'm leaving it in this configuration for now (playlistfile for normal embed, and 'file' for html5 mode. To do other testing in the meantime.

Again this is my current embed code:

<p>

<script type="text/javascript" src="[% web_path %][% style_web_path %]/mediaplayer/jwplayer.js"></script>

<div id="mediaspace"><a href="http://www.macromedia.com/go/getflashplayer">Click to download latest Flash Player</a></div>
<script type="text/javascript">
  jwplayer("mediaspace").setup({
"playlistfile": "[% web_path %][% cgi_path %]/playlist_flash.xml",
"backcolor": "000000",
    "frontcolor": "FFFFFF",
    "lightcolor": "990000",
    "controlbar": "over",
    "width": "480",
    "height": "360",
"repeat": "list",
"provider": "video",
"image": "[% web_path %][% style_image_path %]/web_slates_watch2.jpg",
"logo": "[% web_path %][% style_web_path %]/vodplayer/bug.png",
"logo.hide": "false",
"logo.position": "top-right",
"modes": [
         {type: "flash", src: "[% web_path %][% style_web_path %]/mediaplayer/player.swf"},
{type: "html5",
          config: {"file": "[% web_path %][% cgi_path %]/playlist_html5.xml"
                   },
  },
  {type: 'download'}
    ]
  });
</script>

</p>

That is bizarre.

We have a demo of HTML5 XML playlists here.

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

Try it, it definitely works. (iOS devices)

The XML file used in this demo, for your reference, is - http://developer.longtailvideo.com/player/trunk/fl5/js/test/examples/assets/mrss.xml

Ok I sent around the test page link to various employees with iOS devices and majority of them confirmed that it works for them on their devices (iphones and ipads)

So I figured its something on my end with the html5 playlist.

I changed the playlist to completely mimic the mrss.xml you provided in every way I can get it to work with our setup.

(playlist in its current form is at http://www.mindtv.org/cgi-bin/playlist_flash5.xml )

In Chrome it works fine with flash disabled.

On iOS devices, This is what they see http://i.imgur.com/aaaNA.png Just a black square with play button overlay that doesn't seem to do anything else.

Strangest little quirks with this iOS issue.

Hmm...ok, are you putting the xml on the same domain that the player is embedded on?

Same domain, even has the crossdomain.xml file avilable on the root directory,

Ok, where is this embedded?

Master Ethan

you're not kidding...bizzare

Grasshopper

I've been experimeneting on the player live as it is on http://www.mindtv.org I can create test environment if its necessary to test out new things.

Ook, I think I know what's going on here.

On your site - http://www.mindtv.org/cgi-bin/dt.fcg?style=mind&file=index.ttml&allow_session=1

If I open up Chrome, and Disable Flash, and then play the player, it only lets me click the play icon in the controlbar, but the actual play icon doesn't work! It seems like there is something on your page that is on a higher index which is overlapping part of the player. I would suggest putting the player on a blank html page first to eliminate outside factors.

Hmm I went and stripped out every extra code, one by one testing to see which one was causing the strange play button issue..even when I got the page to just html and embed code, it exhibits the same behavior. You can see my results here: http://www.mindtv.org/cgi-bin/dt.fcg?style=mind&file=video.ttml

Its a separate page with just the video embed code, you can take a look at the source but its pretty much bare minimum. I've noticed the overlay play button not working in html5 mode for a while now, but since I was trying to get iOS devices to play actual video first, it was not on my priority list, since on chrome with flash disabled, I could use the player control play button to play (not the overlay one).

Sorry to keep you busy with this stuff, but I've really tried everything I could think of before coming to find help here. You guys (Especially Ethan) have been extremely understanding and helpful in this. This is great customer support!

I am not sure why this would be happening on a blank page.

It definitely does here - http://developer.longtailvideo.com/player/trunk/fl5/js/test/examples/xmlplaylists.html

You are right, that page seems to load up completly working. I'll see if moving crossdomain.xml file else where on the server helps.

Ok.

Please note - 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.

I've added crossdomain.xml file in every subdomain and root that holds the files used in the player/thumbnails/videos etc.

Also I added the following code in my script that generates the playlist automatically:

print header(
  -type => 'text/xml',
  -access_control_allow_origin => '*',
);

HTML5 player Behavior stays the same it seems: http://www.mindtv.org/cgi-bin/dt.fcg?style=mind&file=video.ttml

I think there is still something else going on here, maybe in the script that generates the playlist itself? How about download this file and try it? - http://developer.longtailvideo.com/player/trunk/fl5/js/test/examples/assets/mrss.xml

This is the file we use on - http://developer.longtailvideo.com/player/trunk/fl5/js/test/examples/xmlplaylists.html

Interesting, I uploaded your mrss.xml on our servers and tried it out, in HTML5 mode, it actually plays the video BUT does not activate with the overlay play button, you still have to press the play button on control panel to get it to activate.

http://www.mindtv.org/cgi-bin/dt.fcg?style=mind&file=video.ttml

So its two different issues I see,

1) something with my playlist generator file is not letting the playlist load in html5 mode..although the xml parses fine without errors. I will look into this..would you be willing to take a look at the generator code to see if I'm introducing extra elements that might break the video player from playing it in html5 mode? The flash playlist generator seems to work just fine currently on main page.

2) the overlay play button in html5 mode does not seem to work on either our playlists or yours.

I think both of these issues are somehow related to your generator...what it is though, I am not sure :S

Thats odd, for reference here is the complete xml file I use for playlist, it uses perl to 1) randomly pick an intro video 2) fill in next hours worth of programming 3) display image/link to reload the player.

See if you see anything wrong with it if its not too much trouble? If not I'll try to redo it line by line to see what is going on.

(if you'd like to see what a generated xml looks like using this method, I've put up a sample output here http://www.mindtv.org/styles/mind/www/defaultpl.xml

Code follows for generator:

#!/usr/bin/perl
use strict;

use FindBin;
use lib "$FindBin::Bin/../lib";
use Localize;
use lib @Localize::LocalLibPaths;

use CGI qw(:standard);

use Date::Manip qw/ UnixDate ParseDate DateCalc/;

use FcgiLoop;
use Session;
use CGI_Startup;
use mysql_db;
use Member;
use FilePath;
use Schedule_History;

FcgiLoop
        {

use Debug;

my $style_image_path = $web_path . "/styles/mind/www/images";

# html header
print header(
  -type => 'text/xml',
  -access_control_allow_origin => '*',
);

# xml header
print "<rss version="2.0" xmlns:media="http://search.yahoo.com/mrss/" xmlns:jwplayer="http://developer.longtailvideo.com/trac/wiki/FlashFormats">n";
print "<channel>n";
print "<title>MiNDTV media RSS playlist</title>n";

#
# read 1-hour of items for playlist from mind_schedule_history
#

my $NOWTIME = UnixDate("now","%Y-%m-%d %H:%M:%S");
my $ENDTIME = &UnixDate( &DateCalc($NOWTIME, "+ 1 hour"), "%Y-%m-%d %H:%M:%S");

#my $schedule = mysql_db::get_schedule_history($NOWTIME, $ENDTIME, 'p');
my $schedule = load Schedule_History(search_start => $NOWTIME, search_end => $ENDTIME, schedule_status => 'p');
my $recs = $schedule->{items};

my $leaders = mysql_db::get_by_asset_type('PROMO-START-15');

my $cnt_ldr = @$leaders;

my $trailers = mysql_db::get_by_asset_type('PROMO-END-15');

my $cnt_tlr = @$trailers;

Debug::trace(trace => "cnt of leaders, $cnt_ldr");
Debug::trace(trace => "cnt of trailers, $cnt_tlr");

# basic xml structure for playlist
# <item>
# <title>$s->{asset_title}</title>
# <media:credit role="author">$mind_member->{member_name}</media:credit>
#   <media:group>
# <media:content url="http://wybe.vo.llnwd.net/o15/mbrfiles/$rel_path/$rel_ord.mp4" />
# <media:thumbnail url="http://www.mindtv.org/mbrfiles/$rel_path/$rel_ord.jpg" />
#   </media:group>
# </item>

if ( $leaders )
   {
   my $random_number = int(rand($cnt_ldr));
   my $s = $leaders->[$random_number];
   my $mind_member = mysql_db::get_mind_member($s->{member_id});
   my $rel_path = FilePath::asset_path($s->{member_id}, $s->{ordinal});
   my $rel_ord = $s->{member_id} . '-' . $s->{ordinal};

   Debug::trace(trace => "Loading LEADER, member_id = $s->{member_id}");

print "<item>n";
print "<title>$s->{asset_title}</title>n";
print "<media:credit role="author">$mind_member->{member_name}</media:credit>n";
print "<media:group>n";
print "<media:content url="http://wybe.vo.llnwd.net/o15/mbrfiles/$rel_path/$rel_ord.mp4" />n";
# print "<media:thumbnail url="http://www.mindtv.org/mbrfiles/$rel_path/$rel_ord.jpg" />n";
print "</media:group>n";
print "</item>n";
   }
else
   {
print "<item>n";
print "<title>Folding Paper Legal</title>n";
print "<media:credit role="author">MIND</media:credit>n";
print "<media:group>n";
print "<media:content url="http://wybe.vo.llnwd.net/o15/mbrfiles/75/1776/1776-139/1776-139.mp4" />n";
print "</media:group>n";
print "</item>n";
   }

#
# loop through records
#

my $i = @$recs;
my $cnt = 0;
while ($cnt <= $i)
{
my $s = $recs->[$cnt];
if ( ! $s->{member_id})
{
$cnt++;
next;
}
#
#  load member rec
#

# basic xml structure for playlist
# <item>
# <title>$s->{asset_title}</title>
# <media:credit role="author">$mind_member->{member_name}</media:credit>
#   <media:group>
# <media:content url="http://wybe.vo.llnwd.net/o15/mbrfiles/$rel_path/$rel_ord.mp4" />
# <media:thumbnail url="http://www.mindtv.org/mbrfiles/$rel_path/$rel_ord.jpg" />
#   </media:group>
# </item>

        my $mind_member = mysql_db::get_mind_member($s->{member_id});
my $rel_path = FilePath::asset_path($s->{member_id}, $s->{ordinal});
my $rel_ord = $s->{member_id} . '-' . $s->{ordinal};

        Debug::trace(trace => "Loading Member Record, member_id = $s->{member_id}");

print "<item>n";
print "<title>$s->{asset_title}</title>n";
print "<media:credit role="author">$mind_member->{member_name}</media:credit>n";
print "<media:group>n";
print "<media:content url="http://wybe.vo.llnwd.net/o15/mbrfiles/$rel_path/$rel_ord.mp4" />n";
print "<media:thumbnail url="http://www.mindtv.org/mbrfiles/$rel_path/$rel_ord.jpg" />n";
print "</media:group>n";
print "</item>n";

$cnt++;
}

if ($trailers)
   {
   my $random_number = int(rand($cnt_tlr));
   my $ts = $trailers->[$random_number];
   my $mind_member = mysql_db::get_mind_member($ts->{member_id});
   my $rel_path = FilePath::asset_path($ts->{member_id}, $ts->{ordinal});
   my $rel_ord = $ts->{member_id} . '-' . $ts->{ordinal};

   Debug::trace(trace => "Loading LEADER, member_id = $ts->{member_id}");

print "<item>n";
print "<title>$ts->{asset_title}</title>n";
print "<media:credit role="author">$mind_member->{member_name}</media:credit>n";
print "<media:group>n";
print "<media:content url="http://wybe.vo.llnwd.net/o15/mbrfiles/$rel_path/$rel_ord.mp4" />n";
print "<media:thumbnail url="http://www.mindtv.org/mbrfiles/$rel_path/$rel_ord.jpg" />n";
print "</media:group>n";
print "</item>n";
   }
## last frame -- link to get more...
print "<item>n";
print "<title>Click here to Continue Watching MiND</title>n";
print "<link>$web_path/$cgi_path/playlist_html5.xml</link>n";
print "<media:credit role="author">MIND</media:credit>n";
print "<media:group>n";
print "<media:content url="$style_image_path/web_slates_watch.jpg" />n";
#print "<media:thumbnail url="$style_image_path/web_slates_watch.jpg" />n";
print "</media:group>n";
print "</item>n";
print "</channel>n";
print "</rss>n";

exit (0);
}

Sorry, I haven't used Perl in ages...does the issue happen if you download the sample xml and put it on your server though.

Howdy there-- Prash has left our organization, however, I am taking over the project.

As requested previously, I went ahead and downloaded the sample xmlplaylists.html and mrss.xml files. I replaced the URLs in the mrss.xml file with our thumbnails/urls and it is playing in every browser, including iOS.

I'm going to see if I can get the cgi script to generate an mrss file for the playlists to see if that alleviates the issues. I'll go ahead and start that today, then report back as I know more.

You can view the sample output at the following URLs if you want:

http://www.mindtv.org/xmlplaylists.html
http://www.mindtv.org/mrss.xml

Thanks for your help.

Np, please let me know.

So here's an update:

I don't think it's the playlist generator, I think it's the embed code we're using, or something else over-riding the controls (as you previously stated).

What led me to believe this:

I changed

         config: {"file": "[% web_path %][% cgi_path %]/playlist_html5.xml"

to

         config: {"file": "[% web_path %]/mrss.xml"

The mrss.xml file is the example file from your website, just with the movie urls changed for our stuff on limelight. when I use your xmlplaylists.html file, it loads fine. When I use our link, it doesn't load.

It queues the movie, shows the thumbnail, however I get the same exact behavior with the button/bar etc on iOS devices.

I'll dig around some more...

It might have to do with your server then, where the files are coming from then?

How do you mean? Can you elaborate a little more?

Well, Can you show me where it isn't working so I can debug a bit?

Sure, here goes:

http://www.mindtv.org/cgi-bin/dt.fcg?style=mind&file=video3.ttml&allow_session=1

This video3.ttml file uses the following embed code:

<script type="text/javascript">
  jwplayer("mediaspace").setup(
  {
        "playlistfile": "[% web_path %]/mrss.xml",
        "backcolor": "000000",
        "frontcolor": "FFFFFF",
  "lightcolor": "990000",
  "controlbar": "over",
        "width": "480",
        "height": "360",
        "repeat": "list",
        "provider": "video",
        "image": "[% web_path %][% style_image_path %]/web_slates_watch2.jpg",
//      "logo": "[% web_path %][% style_web_path %]/vodplayer/bug.png",
        "logo.hide": "false",
        "logo.position": "top-right",
        "modes":
[{
          type: "flash", src: "[% web_path %][% style_web_path %]/mediaplayer/player.swf"
         }, {
          type: "html5", config: {"playlistfile": "[% web_path %]/mrss.xml"},
         }, {
          type: "download"
}]
  });
</script>

the mrss.xml file is the example file you gave us, I just changed all of the links to point to one of our files on limelight.

Now, here's what I found:

If you notice, above I have the "logo" line commented out. When I un-comment that line, all buttons and interactivity in iOS devices stops working. When I comment it out, it begins to work fine.

Are there any limitations for the kind(s) of files used for logos? I'm thinking that's the issue.

Once I can get your xml file parsing fine using our embed code I can begin troubleshooting the playlist generator. I want to make sure our embed code is working squeaky clean before proceeding further (process of elimination).

Wait, you are saying that the player works on iOS right now, but once you uncomment that line, it breaks?

Correct.

for testing purposes (for you) i've created the following files:

1. http://www.mindtv.org/cgi-bin/dt.fcg?style=mind&file=video3.ttml&allow_session=1

and

2. http://www.mindtv.org/cgi-bin/dt.fcg?style=mind&file=video3.ttml&allow_session=1

#1 has the line commented.
#2 does not.

These are both the same link, with the logo commented.

No worries.

Ok, it might be that the logo variable needs to be "logo.file"

Can you try to change:

"logo": "http://www.mindtv.org/styles/mind/www/vodplayer/bug.png",

To:

"logo.file": "http://www.mindtv.org/styles/mind/www/vodplayer/bug.png",

No dice.

I made the code change in video4.ttml (#2), left video3.ttml (#1) in tact.

I don't see any reason as to why the logo file would break playback on iOS.

As you can see here, it works fine - http://developer.longtailvideo.com/player/trunk/fl5/js/test/examples/logo.html

Note, you don't need to use modes here if you are using the same playlistfile for both flash as well as HTML5.

For example, if you just embedded the player like - http://www.longtailvideo.com/support/blog/15827/using-the-jw-embedder-to-embed-your-player, no modes or anything, and used playlists file, once, it should work in both modes correctly, and with the logo.

Cool. I'll go ahead and rewrite Prash's embed code tomorrow morning and report back.

Thanks for your help!

Np

Hey there--

I rewrote the embed code according to the standards on that page (video4.ttml - #2 above). Loads fine on each platform (detection-wise), but each time I uncomment that line regarding the logo file, it chokes on iOS devices still.

I then switched the logo.file url to the one that you embedded into your example and it works fine, so it's clear to me that it's the file itself that's a problem.

Have you tested yours with .png files? Perhaps that's the problem, as yours is a .jpg. Either that or there's something wrong with the encoding of my original .png graphic (which I'm happy to recreate).

Thanks!

I use png for my logo.

here is, for example, how I use the logo. You'll just have to replace whatever is needed to suit your needs.

logo:{
        file: 'images/logo.png',
        hide: 'true',
        over: '1',
        out: '1',
        timeout: '3',
        position: 'top-left',
        margin: '10',
        link: ''
     },
TIP:
     There may be the occasion not to use a logo then all what you have to do is the do the following.

  logo: '',

Okay I opened the original .png file, it looks like whomever created the graphic itself did so in an entire 480x360 transparent canvas with the logo in the top right. I cropped the file down to just the logo in the upper right corner, re-saved it and it's fine now. Step 2: the playlist.

Thanks for your troubleshooting on the embed part.

Playlists now work as well-- I noticed that for some reason Prash didn't have the headers in the perl outputting the correct syntax, so the server was rejecting the playlist parsing with a 500 error. Thanks for all of your help.

Many thanks!

:. M

Great, glad you got it all working! Np!