0

Loading video ads

Hello,
I would like to attach preroll advertisements against selected videos in my playlist. Going through the KONtx.mediaplayer, I cannot see an easy way of dynamically calling a video outside of my playlist, playing that, then resuming normal video playback.
Any ideas? Any documentation on this topic would help as well. Thank you.

by
3 Replies
  • QUOTE (Bensan George @ Mar 29 2011, 01:15 PM) <{POST_SNAPBACK}>
    Hello,
    I would like to attach preroll advertisements against selected videos in my playlist. Going through the KONtx.mediaplayer, I cannot see an easy way of dynamically calling a video outside of my playlist, playing that, then resuming normal video playback.
    Any ideas? Any documentation on this topic would help as well. Thank you.

    This should get you started. It was taken and modified from the Fast Expiring Content Example in the mediaplayer docs.

    CODE
    var MyCustomPlaylistEntryClass = new KONtx.Class({
    Extends: KONtx.media.PlaylistEntry,
    config: {
    url: null,
    bitrate: null
    },
    initialize: function() {
    this.parent();
    this._urlsFetched = false;
    },
    streamsReady: function(callback) {
    if(!this._urlsFetched) {
    this._fetchContentURLs(callback);
    return false;
    } else {
    return true;
    }
    },
    _fetchContentURLs: function(callback) {
    this.addURL(this.config.url, this.config.bitrate);
    this._urlsFetched = true;
    callback();
    }
    });

    /*
    so, you'd create your playlist like normal (taken from the Mediaplayer Sample widget in the wdk, full source available)
    */
    _createPlaylist: function(playlistID) {
    var playlist = new KONtx.media.Playlist();
    playlist.PlaylistID = playlistID;

    var json = KONtx.messages.fetch("playlist." + playlistID);
    for each(var entry in json.entries) {
    var playlistEntry = new KONtx.media.PlaylistEntry(entry);
    playlistEntry.entryID = entry.entryID;
    playlist.addEntry(playlistEntry);
    }
    //...snipped for brevity;

    /*
    and then you could add your custom playlist entries whenever according to what you need;
    */
    playlist.addEntry(new MyCustomPlaylistEntryClass({
    url: "http://www.example.com",
    bitrate: 300
    }));
    playlist.addEntry(new MyCustomPlaylistEntryClass({
    url: "http://www.example.com",
    bitrate: 300
    }));

    /*
    you can keep adding custom playlist entries or regular ones
    */

    In my example, I hardcoded the url and bitrate, but you could make a fetch to a web service to get that data and then call this.addURL with the response. It's really up to you. Please see the mediaplayer docs under the aforementioned headline for more information.

    Hope that helps.
    0
  • What if I wanted to add Fast Expiring content at multiple bitrates? Im calling this.addEntry after I parse an XML and gather multiple URL's and bitrates and I'm getting an error that addEntry is not a function.

    var CustomPlaylistEntry = new KONtx.Class({
            Extends: KONtx.media.PlaylistEntry,
            config: {
                    url : null
            },      
            initialize: function() {
                    this.parent();
                    this._urlsFetched = false;
            },      
        streamsReady: function(callback) {
    if(!this.urlsFetched) {
    this._callback = callback;
    this._fetchContentURLs();
    return false;
    } else {
    return true;
    }
        },
        _fetchContentURLs: function() {
    var request = new XMLHttpRequest();
    request.handleResponse = this._handleResponse.bindTo(this);
    request.addEntry = this.addEntry.bindTo(this);
    request.onreadystatechange = function (){
    if(this.readyState == 4 && this.status == 200){    
    KONtx.application.setNetworkRequestFailed(false);
    var vast = XMLDOM.parse(this.responseXML.toXML());
    var imp = vast.getElementsByTagName("Impression");
    var clips = [];
    for(var i=0;i<imp.length;i++){
    var c = imp.item(i);
    var px = c.firstChild.data;
    var img = new KONtx.element.Image({
    src: px.trim().clean(),
    styles:{
    height:1,
    width: 1
    }
    });
    }
    var media = vast.getElementsByTagName("MediaFile");
    for(var j=0;j<media.length;j++){
    var c = media.item(j);
    var url1 = c.firstChild.data;
    url1 = url1.trim().clean();
    var bitrate1 = c.getAttribute("bitrate");
    clips.push({url:url1, bitrate:bitrate1});
    }
    this.addEntry({streams : clips});
    this.handleResponse();
    } else if(this.readyState == 4 && this.status != 200){
    KONtx.application.setNetworkRequestFailed(true);
    }
    }
    request.open("GET", this.config.url, true);
    request.send();
        },
        _handleResponse: function() {
    this._urlsFetched = true;
    this._callback();
        }
    });
    QUOTE(Benjamin Toll @ 1 Apr 2011 12:57 AM)
    QUOTE (Bensan George @ Mar 29 2011, 01:15 PM) <{POST_SNAPBACK}>
    Hello,
    I would like to attach preroll advertisements against selected videos in my playlist. Going through the KONtx.mediaplayer, I cannot see an easy way of dynamically calling a video outside of my playlist, playing that, then resuming normal video playback.
    Any ideas? Any documentation on this topic would help as well. Thank you.

    This should get you started. It was taken and modified from the Fast Expiring Content Example in the mediaplayer docs.

    CODE
    <!--ec1-->var MyCustomPlaylistEntryClass = new KONtx.Class({<br>    Extends: KONtx.media.PlaylistEntry,<br>    config: {<br>        url: null,<br>        bitrate: null<br>    },   <br>    initialize: function() {<br>        this.parent();<br>        this._urlsFetched = false;<br>    },   <br>    streamsReady: function(callback) {<br>        if(!this._urlsFetched) {<br>            this._fetchContentURLs(callback);<br>            return false;<br>        } else {<br>            return true;<br>        }    <br>    },<br>    _fetchContentURLs: function(callback) {<br>        this.addURL(this.config.url, this.config.bitrate);<br>        this._urlsFetched = true; <br>        callback();<br>    }    <br>});<br><br>/*<br>so, you&#39;d create your playlist like normal (taken from the Mediaplayer Sample widget in the wdk, full source available)<br>*/<br>_createPlaylist: function(playlistID) {<br>    var playlist = new KONtx.media.Playlist(); <br>    playlist.PlaylistID = playlistID;<br><br>    var json = KONtx.messages.fetch(&quot;playlist.&quot; + playlistID);<br>    for each(var entry in json.entries) {<br>        var playlistEntry = new KONtx.media.PlaylistEntry(entry);<br>        playlistEntry.entryID = entry.entryID; <br>        playlist.addEntry(playlistEntry);<br>    }<br>    //...snipped for brevity;<br><br>/*<br>and then you could add your custom playlist entries whenever according to what you need;<br>*/<br>playlist.addEntry(new MyCustomPlaylistEntryClass({<br>    url: &quot;http://www.example.com&quot;,<br>    bitrate: 300<br>}));  <br>playlist.addEntry(new MyCustomPlaylistEntryClass({<br>    url: &quot;http://www.example.com&quot;,<br>    bitrate: 300<br>}));<br><br>/*<br>you can keep adding custom playlist entries or regular ones<br>*/<!--c2--></code>
    In my example, I hardcoded the url and bitrate, but you could make a fetch to a web service to get that data and then call this.addURL with the response. It's really up to you. Please see the mediaplayer docs under the aforementioned headline for more information.

    Hope that helps.
    0
  • The addEntry method is part of the KONtx.media.Playlist class and not KONtx.media.PlaylistEntry. Whereas, you are trying to access it in the PlaylistEntry's subclass using this.addEntry, so obviously it fails.

    Thanks,
    Vivek


    0

Recent Posts

in Design / Interaction - Yahoo! TV Widgets