Loading video ads — YDN Forums

Bensan George29 Mar 2011 2:15 PM

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.

Reply

Benjamin Toll1 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

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.

Reply

Dev Onescreen4 Aug 2011 11:45 AM

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.<br><br><div>var CustomPlaylistEntry = new KONtx.Class({<div>        Extends: KONtx.media.PlaylistEntry,<div>        config: {<div>                url : null<div>        },      <div>        initialize: function() {<div>                this.parent();<div>                this._urlsFetched = false;<div>        },      <div>    streamsReady: function(callback) {<div><span class="Apple-tab-span" style="white-space:pre;"> </span>if(!this.urlsFetched) {<div><span class="Apple-tab-span" style="white-space:pre;"> </span>this._callback = callback;<div><span class="Apple-tab-span" style="white-space:pre;"> </span>this._fetchContentURLs();<div><span class="Apple-tab-span" style="white-space:pre;"> </span>return false;<div><span class="Apple-tab-span" style="white-space:pre;"> </span>} else {<div><span class="Apple-tab-span" style="white-space:pre;"> </span>return true;<div><span class="Apple-tab-span" style="white-space:pre;"> </span>}<div>    },<div>    _fetchContentURLs: function() {<div><span class="Apple-tab-span" style="white-space:pre;"> </span>var request = new XMLHttpRequest();<div><span class="Apple-tab-span" style="white-space:pre;"> </span>request.handleResponse = this._handleResponse.bindTo(this);<div><span class="Apple-tab-span" style="white-space:pre;"> </span>request.addEntry = this.addEntry.bindTo(this);<div><span class="Apple-tab-span" style="white-space:pre;"> </span>request.onreadystatechange = function (){<div><span class="Apple-tab-span" style="white-space:pre;"> </span>if(this.readyState == 4 && this.status == 200){    <div><span class="Apple-tab-span" style="white-space:pre;"> </span>KONtx.application.setNetworkRequestFailed(false);<div><span class="Apple-tab-span" style="white-space:pre;"> </span>var vast = XMLDOM.parse(this.responseXML.toXML());<div><span class="Apple-tab-span" style="white-space:pre;"> </span>var imp = vast.getElementsByTagName("Impression");<div><span class="Apple-tab-span" style="white-space:pre;"> </span>var clips = [];<div><span class="Apple-tab-span" style="white-space:pre;"> </span>for(var i=0;i<imp.length;i++){<div><span class="Apple-tab-span" style="white-space:pre;"> </span>var c = imp.item(i);<div><span class="Apple-tab-span" style="white-space:pre;"> </span>var px = c.firstChild.data;<div><span class="Apple-tab-span" style="white-space:pre;"> </span>var img = new KONtx.element.Image({<div><span class="Apple-tab-span" style="white-space:pre;"> </span>src: px.trim().clean(),<div><span class="Apple-tab-span" style="white-space:pre;"> </span>styles:{<div><span class="Apple-tab-span" style="white-space:pre;"> </span>height:1,<div><span class="Apple-tab-span" style="white-space:pre;"> </span>width: 1<div><span class="Apple-tab-span" style="white-space:pre;"> </span>}<div><span class="Apple-tab-span" style="white-space:pre;"> </span>});<div><span class="Apple-tab-span" style="white-space:pre;"> </span>}<div><span class="Apple-tab-span" style="white-space:pre;"> </span>var media = vast.getElementsByTagName("MediaFile");<div><span class="Apple-tab-span" style="white-space:pre;"> </span>for(var j=0;j<media.length;j++){<div><span class="Apple-tab-span" style="white-space:pre;"> </span>var c = media.item(j);<div><span class="Apple-tab-span" style="white-space:pre;"> </span>var url1 = c.firstChild.data;<div><span class="Apple-tab-span" style="white-space:pre;"> </span>url1 = url1.trim().clean();<div><span class="Apple-tab-span" style="white-space:pre;"> </span>var bitrate1 = c.getAttribute("bitrate");<div><span class="Apple-tab-span" style="white-space:pre;"> </span>clips.push({url:url1, bitrate:bitrate1});<div><span class="Apple-tab-span" style="white-space:pre;"> </span>}<div><span class="Apple-tab-span" style="white-space:pre;"> </span>this.addEntry({streams : clips});<div><span class="Apple-tab-span" style="white-space:pre;"> </span>this.handleResponse();<div><span class="Apple-tab-span" style="white-space:pre;"> </span>} else if(this.readyState == 4 && this.status != 200){<div><span class="Apple-tab-span" style="white-space:pre;"> </span>KONtx.application.setNetworkRequestFailed(true);<div><span class="Apple-tab-span" style="white-space:pre;"> </span>}<div><span class="Apple-tab-span" style="white-space:pre;"> </span>}<span class="Apple-tab-span" style="white-space:pre;"> </span><div><span class="Apple-tab-span" style="white-space:pre;"> </span>request.open("GET", this.config.url, true);<div><span class="Apple-tab-span" style="white-space:pre;"> </span>request.send();<div>    },<div>    _handleResponse: function() {<div><span class="Apple-tab-span" style="white-space:pre;"> </span>this._urlsFetched = true;<div><span class="Apple-tab-span" style="white-space:pre;"> </span>this._callback();<div>    }<div>});<br><div class="quote "><div class="quotetop ">QUOTE<cite>(Benjamin Toll @ 1 Apr 2011 12:57 AM)</cite><blockquote class="quotemain"><div class="quote "><div class="quotetop ">QUOTE <cite>(Bensan George @ Mar 29 2011, 01:15 PM) <a href="index.php?act=findpost&pid=23327"><{POST_SNAPBACK}></a></cite><blockquote class="quotemain">Hello,<br> 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.<br> Any ideas? Any documentation on this topic would help as well. Thank you.</blockquote><br>This should get you started. It was taken and modified from the Fast Expiring Content Example in the mediaplayer docs.<br><br><div class="code generic "><div class="codetop ">CODE<pre class="codemain"><code>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'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("playlist." + 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: "http://www.example.com",<br> bitrate: 300<br>})); <br>playlist.addEntry(new MyCustomPlaylistEntryClass({<br> url: "http://www.example.com",<br> bitrate: 300<br>}));<br><br>/*<br>you can keep adding custom playlist entries or regular ones<br>*/</code></pre><br>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.<br><br>Hope that helps.</div></div></div></div></blockquote></div></div></div></div></div></div></div></div></div></div></div></div></div></div></div></div></div></div></div></div></div></div></div></div></div></div></div></div></div></div></div></div></div></div></div></div></div></div></div></div></div></div></div></div></div></div></div></div></div></div></div></div></div></div></div></div></div></div></div></div></div></div></div>

Reply

Vivek Jani18 Aug 2011 1:43 AM

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.<br><br>Thanks,<br>Vivek<br><br><div class="quote "><div class="quotetop "><br></div></div>

Reply