Forums

/

Adding preroll as a var

18 replies [Last post]

I have a preroll and a 250x300 companion ad which I need to display on the same page underneith the media player. The information for the preroll and ad unit is generated by an XML feed.

If I pull the xml feed to get the FLV, then I can't get the companion ad.

If I embed the xml feed in the page, then I can get both, but then the FLV is not identified as a preroll and then it can be skipped.

The only way is to pass the companion ad details back in a var OR identify a single file being played as a preroll.

Something like s.addVariable('adtype','preroll');

Anyone else running into similar issues?

@Chris,

Everything's possible. :)

Let's say you have a playlist (XML feed) that looks like this:

    <track> <!-- Single Pre/Postroll -->
      <creator>Advertiser</creator>
      <title>Preroll</title>
      <location>/Ads/ad.flv</location>
      <image>/CompanionAds/ad.png</image>
      <album>preroll</album>
    </track>
    <track>
      <creator>Creator</creator>
      <title>Main Feature</title>
      <location>/Movies/Main Feature.flv</location>
    </track>
    <track>
      <creator>Advertiser</creator>
      <title>Postroll</title>
      <location>/Ads/ad.swf</location>
      <album>postroll</album>
    </track>

and while the preroll is playing, you want to display "/CompanionAds/ad.png".

You can get "/CompanionAds/ad.png" from the player as the 'image' flashvar while the preroll is playing and display it wherever you need to OR you can get the XML again (I don't know why anybody would want to do that, but it's possible) and get "/CompanionAds/ad.png" from that XML and again, display it anywhere you want.

The format of the XML doesn't matter, it's all parseable. You could even get the preroll "/Ads/ad.flv", change the extension to "png" and get "/Ads/ad.png" to display.

All quite easy to do.

kık

I thought the ad.png would be an overlay. How dould you call the ad.png from the xml and the preroll from the xml in one call? As you said, I CAN'T get the XML again, because I'd potentially get a different companion ad then what I need from the preroll. The XML is being dynamically generated so I can definitely program in an IMAGE to call, but I'm still unclear how to call it and display it outside of the player.

I thought <image> appears as like a preview image before the video starts.

I thought <image> appears as like a preview image before the video starts.
correct - but using the [url=http://home5.inet.tele.dk/nyboe/flash/mediaplayer/javascript.htm]javascript api[/url] you can do whatever you want with the information from the player/playlist - like the [url=http://home5.inet.tele.dk/nyboe/flash/mediaplayer/annotationdisplay.htm]annotationdisplay[/url] demo from the [url=http://home5.inet.tele.dk/nyboe/flash/mediaplayer/]demopage[/url]

Chris,

I think what we need before we can give you more detailed "how to do it instructions" is an exact sequence of what you want to do and what you want to use/display at each step. Don't worry about "how to do it" right now. Rest assured that it can be done, and we'll show you how, but first we need to know what you want to do. Sort of like what I posted as an example, but this time make it what YOU need to do.

Example format:

Using an XSPF playlist:
1) run preroll ad.....source: playlist preroll track, <location> element
2) display companion ad.....source: playlist preroll track, <annotation> element
3) play main feature.....source: playlist track, <location> element
4) clear companion ad space

As I said before, this has to be what YOU want to do. I don't want to waste a lot of my time setting up a system to do what I might want to do, only to find out that you want something else.

Since you said that you are using a dynamically generated XML feed, we need to know the exact format of that feed. Is it an XSPF playlist? Do you generate it? Are you in control of the feed, or do you have to use whatever is given to you?

Ok, let's see if I can lay this out.

I'm currently [url=http://www.247realmedia.com/EN-US/us/open-ad-stream.html]24/7's Open AdStream[/url] server.

Several aspects of advertising are programmed into OAS. Preroll.flv, companionAd.jpg, http://location.com/link, trackingPixel.gif, etc...

OAS is called in the web page by a JavaScript code. Each time OAS is called, all of the associated information above is compiled and delivered to the page. A preroll has a companion ad and a tracking pixel etc. So one call will result in one advertiser. If you call OAS a second time, you'd potentially get a different advertiser, based on the total number of advertisers and advertisments you have programmed into the system.

Pretty straight forward so far.

I wrote a PHP script which basically calls OAS, get's the preroll, companion ad, URL references, tracking pixels, etc. and places the values of each in an XML file. I can pretty easily program each of the needed elements into a single XML which then can be read by the player. This happens once, dynamically. As I said earlier, I can't call the XML.php file twice or else I'd get different results.

So the sequence of events I'm currently working on would go something like this.

Item 1: preroll.flv / companion ad
Item 2: music video
Item 3: music video
Item 4: movie trailer
Item 5: movie trailer
Item 6: another video

When the page is rendered I want the player and a 300x250 companion ad to appear side by side. If the player was also 300x250 then basically I'd have two 300x250 blocks positioned side by side.

Something like [PLAYER][AD]

The first item which plays in the player is the preroll.flv.
The ad unit next to the player is the companion ad which comes with the preroll.flv.
The companion ad stays in that position next to the player the entire time.
After the preroll, the playlist moves on to item 2, music video.
Again, the companion ad is still positioned next to the player as it continues playing the items in the playlist.

So it would look similar to [url=http://www.imeem.com/]http://www.imeem.com/[/url]. You see in the middle there's a player and next to that is a companion ad. Although they are not doing prerolls, the setup is the same for what I want to accomplish.

I just need to be able to pull all of the information at one time and display it on the page.

Thanks for your help!

Can I call your XML playlist so I can see what it looks like or can you post it here.

For: Item 1: preroll.flv / companion ad

So it looks really quite simple.

I would put the ad image URL in the annotation element of the preroll track. Then when the player starts and is playing the preroll, the data of the annotation element is available as the flashvar 'description' with a value of your image URL. Grab it with JS, then display that image wherever you want in a <div id="image">.

If this sounds like what you want to do, get me a sample playlist and I'll whip up some JS. Are you already using the JavaScript API for the JW Player for anything else or do you need the supporting JS code also?

imeem's doing it within the page code. Do you not want to do it that way because you are going to load another playlist without re-loading the page? Or are you just trying to keep everything in one playlist file? Doesn't matter; I'm just curious. :)

Here's an example of an advertising XML feed.

[url=http://dev.bbeplayer.com/Feeds/Generator/2.0/AdDirector.xml]http://dev.bbeplayer.com/Feeds/Generator/2.0/AdDirector.xml[/url]

I can obviously pick and choose the elements I need and program them into a new XML file that the JW player can recognize.

There are two scenarios I'm working with.

The first is:
1 preroll
1 companion ad
1 video

The second is:
1 preroll
1 companion ad
multiple videos in a playlist.

The first scenario is pretty straight forward. I can do this with the JavaScript API. ALTHOUGH even in the first solution I'm calling the preroll but it's not specified as a preroll. I'm basically using a variation of [url=http://home5.inet.tele.dk/nyboe/flash/mediaplayer/mutexdaisychain.htm]this code[/url] to switch between the preroll and the main video. I did it this way so I could call the preroll and companion ad via PHP and then dynamically fill in the javascript calls with the names of the files.

So I end up with something like this:

var playlistArray;
playlistArray = new Array();
playlistArray[0] = "<?php echo $preroll; ?>";
playlistArray[1] = "<?php echo $video; ?>";

and the companion ad is $companion which can be called anywhere on the page I need as well.

The problem is doing this doesn't identify the $preroll as an actual preroll because I'm calling the FLV directly as opposed to an XML playlist.

Ideally I would love to be able to do this:
So I end up with something like this:

var playlistArray;
playlistArray = new Array();
playlistArray[0] = "preroll.php";
playlistArray[1] = "video.php";

But when I get the results of preroll.php, which is a playlist XML, I need to pull the <image> tag out and assign it to the variable $companion.

Make sense?

OK. So if we use a standard XSPF playlist, with your six-track scenario.

(To keep things simple, I'm leaving out any path to the files and giving them generic names.)

<?xml version='1.0' encoding='UTF-8'?>
<playlist version="1" xmlns="http://xspf.org/ns/0/">
  <trackList>
    <track>
      <creator>1. Advertiser</creator>
      <title>Preroll</title>
      <location>preroll.flv</location>
      <annotation>companion_ad.png</annotation>
      <album>preroll</album>
    </track>
    <track>
      <creator>2. Musician</creator>
      <title>Music Video</title>
      <location>music_video.flv</location>
    </track>
    <track>
      <creator>3. Musician</creator>
      <title>Music Video</title>
      <location>music_video.flv</location>
    </track>
    <track>
      <creator>4. Filmmaker</creator>
      <title>Movie Trailer</title>
      <location>movie_trailer.flv</location>
    </track>
      <creator>5. Filmmaker</creator>
      <title>Movie Trailer</title>
      <location>movie_trailer.flv</location>
    </track>
    </track>
      <creator>6. Filmmaker</creator>
      <title>Another Video</title>
      <location>another_video.flv</location>
    </track>
  <trackList>
</playlist>

You should be able to get this: [url=http://willswonders.myip.org:8085/php/Chris.html]Chris[/url]

Well damn. That's it. Ha. I'll have to look through the code a bit to see how you made this work.

Thanks.

@Chris,

You're welcome. I'm glad to see we came up with a satisfactory solution for you and hopefully other users can use it also.

Of course, post back here if you need help or further explanation of what any of the functions are doing. It's pretty straight forward, if the 'category' preroll is running, we get the image name (and could include the path) from the 'description' flashvar (which is the data of the <annotation> element in the playlist) and write that inside some HTML in the <div> to display your ad image. :)

I know this may be off subject, but is there any way to get a random .flv Ad to preroll before the MAIN.flv? Doesn't have to be a playlist with mutliple MAIN.flv's, but would be nice

@Will

Any chance you can repost that sample page you had before?
http://willswonders.myip.org:8085/php/Chris.html

Thanks, it wasn't working for me before.

OK this works fine with the older version of JW player, but not with 4.1.
The companion image is not showing and the second file won't autoplay

This is what I have, any idea what i'm missing?

<script type="text/javascript" src="files/swfobject.js"></script>

  <script type="text/javascript">
    var currentItem;
    var image_displayed = false;

    function thisMovie(movieName)
    {
      if(navigator.appName.indexOf("Microsoft") != -1)
      {
        return window[movieName];
      }
      else
      {
        return document[movieName];
      }
    };

    function getUpdate(typ, pr1, pr2, pid)
    {
      if((pid = 'mpl') && (typ == 'item'))
      {
        currentItem = pr1;
        setTimeout("getItemData(currentItem)", 100);
      }
    };

    function getItemData(idx)
    {
      var obj = thisMovie('mpl').itemData(idx);

      if((!image_displayed) && (obj['category'] == 'preroll'))
      {
        image_displayed = true;
        img = document.getElementById('image');
        img.innerHTML = '<img src="' + obj['description'] + '">';

        // instrumentation for debug
        cat = document.getElementById('category');
        cat.innerHTML = 'Category: ' + obj['category'];
        imn = document.getElementById('imagename');
        imn.innerHTML = 'Image: ' + obj['description'];
      }
    };
  </script>

  <script type='text/javascript'>
    function createPlayer()
    {
      var s1 = new SWFObject('player.swf', 'mpl', '480', '360', '7');
s1.addVariable('streamer',            'rtmp://flash.domain.com<code>

);
s1.addVariable('width', '480');
s1.addVariable('height', '360');
s1.addVariable('file', 'playlist.xml');
s1.addVariable('overstretch', 'false');
s1.addVariable('showdigits', 'true');
s1.addVariable('autostart', 'true');
s1.addVariable('shuffle', 'false');
s1.addVariable('repeat', 'list');
s1.addVariable('showicons', 'true');
s1.addVariable('enablejs', 'true');
s1.addVariable('javascriptid', 'mpl');
s1.write('player');
};
</script>

</head>

<body onload="createPlayer();">

And my playlist looks like this:

<?xml version="1.0" encoding="UTF-8"?>
<playlist version="1" xmlns="http://xspf.org/ns/0/">
  <trackList>
    <track>
      <creator>Advertiser</creator>
      <title>Preroll</title>
      <location>ad.flv</location>
      <annotation>My_image.jpg</annotation>
      <album>preroll</album>
    </track>
    <track>
      <creator>Me</creator>
      <title> Video</title>
      <location>vid.flv</location>
    </track>
  </trackList>
</playlist>

The JavaScript API code has changed: http://code.jeroenwijering.com/trac/wiki/FlashAPI

According to the v4.x license: http://www.jeroenwijering.com/upload/example-single-license.pdf

"You may NOT make any modifications to the source code nor create any plug-ins that enable any type of advertisement to be shown in, on or around the JW Player."

Disclaimer: I'm not a lawyer, I don't know if this applies, but it sure sounds like it does?

Didn't see that in the license.
I guess I'm looking for a custom solution. Thanks.