How To Create Playlists

Hi Raja,

Thanks for clarifying. As I added more content, I began seeing playlists created.

Here is an example of the code I used on another theme (using the child theme to integrate it):

jQuery.noConflict(); 	
"use strict";

// var ca_waterfallIndex = 0;
// var ca_fallbacks = [
//   "http://search.spotxchange.com/vast/2.00/87884?VPAID=1&content_page_url=__page-url__&cb=__random-number__&player_width=__player-width__&player_height=__player-height__&vid_duration=__item-duration__&vid_url=__item-file__&vid_id=__item-file__&vid_title=__item-title__&vid_description=__item-description__&content_type=video",
//   "http://video1.fastclick.net/w/get.video?vpsid=69561&vpaid=1",
//   "http://dbam.dashbida.com/mantrends/vast/rightster.xml?cb=__timestamp__",
//   "http://ad4.liverail.com/?LR_PUBLISHER_ID=14963&LR_SCHEMA=vast2-vpaid&LR_VERTICAL=preroll&LR_URL=$REFERRER&LR_AUTOPLAY=0&LR_CONTENT=6&LR_MUTED=0&LR_VIDEO_ID=[player_videoid_macro]&LR_TITLE=[video_title_macro]"
// ]

jQuery(document).ready(function() {
	// if(!(typeof jwplayer === 'undefined')){
	// 	ca_initializeJWHooks();
	// }
});

function ca_initializeJWHooks(){
	if(!(jQuery.isFunction(jwplayer().onPlaylistItem))){
		return;
	}

	jwplayer().onPlaylistItem(ca_handleNewPlaylistItem);

	// Ad Error Handling
	jwplayer().onAdError(function(event) {
		if(ca_waterfallIndex < ca_fallbacks.length) {
			jwplayer().playAd(ca_fallbacks[ca_waterfallIndex]);
			ca_waterfallIndex++;
		} else {
			jwplayer().play(true);
		}
	});

	jwplayer().onAdPlay(function(event){
		jwplayer().pause(true);
	});

	jwplayer().onAdComplete(function(event){
		jwplayer().play(true);
	});
}

function ca_handleNewPlaylistItem(index, playlist){
	ca_waterfallIndex = 0;

	// Play first ad in waterfall
	jwplayer().playAd(ca_fallbacks[ca_waterfallIndex]);
	ca_waterfallIndex++;
}

That was saved to creative-v1.0.5.js, then another file, mantrends-custom-v1.0.2.js I have this:
jQuery.noConflict(); 	
"use strict";

var upNextList;

jQuery(document).ready(function() {
	mt_hideUnwantedElements();

	if(!(typeof jwplayer === 'undefined')){
		mt_loadUpNextVideos();
		mt_setNextVideoHook();
	}

	ca_overlayPlayButton();
});

function ca_overlayPlayButton(){
	jQuery(jQuery.find('a[href*="-video"]')).parent().find('.overlay-image').html("");
}

function mt_hideUnwantedElements(){
	jQuery('.sortbar:contains("hide-bars")').parent().find('.pagination-wrapper').remove();
	jQuery('.sortbar:contains("hide-bars")').parent().find('.sortbar').remove();
}

function mt_loadUpNextVideos(){
	var container = jQuery('.articles:contains("up-next-bar")');
	upNextList = container.find('a');
	container.remove();
}

function mt_setNextVideoHook(){
	if(!(jQuery.isFunction(jwplayer().onComplete))){
		return;
	}

	if(upNextList == null || upNextList.length < 1){
		return;
	}

	var upNextIndex = localStorage.getItem("upNextIndex");

	if(upNextIndex == null){
		upNextIndex = 0;
	}

	jwplayer().onComplete(function(event){
		upNextIndex++;

		upNextIndex = mt_ensureIndexValidity(upNextIndex);
		
		//Don't repeat ourselves
		if(upNextList[upNextIndex - 1] == window.location.href){
			upNextIndex++;

			upNextIndex = mt_ensureIndexValidity(upNextIndex);
		}

		localStorage.setItem('upNextIndex', upNextIndex);

		window.location.href = jQuery(upNextList[upNextIndex - 1]).attr('href');
	});
}

function mt_ensureIndexValidity(upNextIndex){
	if(upNextIndex >= upNextList.length){
		upNextIndex = 1;
	}

	return upNextIndex;
}


Lastly, in the functions.php of the child theme created for the Implicit theme, I have this:
<?php
	function creactive_load_js(){
		wp_register_script('creactive', get_stylesheet_directory_uri() . '/js/creactive-v1.0.5.js', array('jquery'));
		wp_enqueue_script('creactive');

		wp_register_script('mantrends-custom', get_stylesheet_directory_uri() . '/js/mantrends-custom-v1.0.2.js', array('jquery'));
		wp_enqueue_script('mantrends-custom');
	}

	add_action('wp_enqueue_scripts', 'creactive_load_js');
?>

That is how I was able to get the page to refresh after each video played. It also controls the pre-rolls used on JW Player and ensures that I have a waterfall of various ad networks to try to get fill from by using the JW Player Waterfall.

There is NO theme or script out there that makes it easy to add pre-roll tags to videos. JW Player requires that you pay for their Ads Edition version of JW Player.
———————–
I ran into a major problem. So the theme automatically uses your copy of JW Player. I entered my key to get JW Player Ads Edition rather than the free version which doesn’t allow pre-rolls.

I’m unsure of how to make it use the JW Player WordPress Plugin that was created by JW Player and has my pre-roll system setup. I use a VAST tag (as you can see) to do this.

Do you think you could please help me in adding pre-rolls or at least making the theme utilize the JW Player WordPress Plugin that allows you to enter your pre-roll tag?

Here is an example of a script I wrote that is less concise than the one above to show you all the pieces:

jQuery.noConflict(); 	
"use strict";

var ca_playlistFirstVideo = true;
var ca_waterfallIndex = 0;
var ca_secondaryPlaylist = null;
var ca_fallbacks = [
  "http://search.spotxchange.com/vast/2.00/87884?VPAID=1&content_page_url=__page-url__&cb=__random-number__&player_width=__player-width__&player_height=__player-height__&vid_duration=__item-duration__&vid_url=__item-file__&vid_id=__item-file__&vid_title=__item-title__&vid_description=__item-description__&content_type=video",
  // "http://video1.fastclick.net/w/get.video?vpsid=69561&vpaid=1",
  // "http://dbam.dashbida.com/mantrends/vast/rightster.xml?cb=__timestamp__",
  "http://ad4.liverail.com/?LR_PUBLISHER_ID=14963&LR_SCHEMA=vast2-vpaid&LR_VERTICAL=preroll&LR_URL=$REFERRER&LR_AUTOPLAY=0&LR_CONTENT=6&LR_MUTED=0&LR_VIDEO_ID=[player_videoid_macro]&LR_TITLE=[video_title_macro]"
]

jQuery(document).ready(function() {
	ca_processAds();

	if(!(typeof jwplayer === 'undefined')){
		ca_initializeJWHooks();
	}
});

function ca_initializeJWHooks(){
	if(!(jQuery.isFunction(jwplayer().onPlaylistItem))){
		return;
	}

	jwplayer().onPlaylistItem(ca_handleNewPlaylistItem);

	// Ad Error Handling
	jwplayer().onAdError(function(event) {
		if(ca_waterfallIndex < ca_fallbacks.length) {
			jwplayer().playAd(ca_fallbacks[ca_waterfallIndex]);
			ca_waterfallIndex++;
		} else {
			jwplayer().play(true);
		}
	});

	jwplayer().onAdPlay(function(event){
		jwplayer().pause(true);
	});

	jwplayer().onAdComplete(function(event){
		jwplayer().play(true);
	});

	jwplayer().onComplete(function(event){
		if(jwplayer().getPlaylist().length == 1 && ca_secondaryPlaylist != null){
			// Wrapped in a timeout to fix issue with first video skipping
			setTimeout(function(){
				jwplayer().load(ca_secondaryPlaylist);
				ca_secondaryPlaylist = null;
			}, 500);
		}
	});

	jwplayer().onPlaylistComplete(function(event){
		setTimeout(function(){
			jwplayer().playlistItem(0);
		}, 500);
	});
}

function ca_handleNewPlaylistItem(index, playlist){
	ca_waterfallIndex = 0;

	//Play first ad in waterfall
	jwplayer().playAd(ca_fallbacks[ca_waterfallIndex]);
	ca_waterfallIndex++;

	if(ca_playlistFirstVideo){
		ca_playlistFirstVideo = false;
		return;
	}

	var item = jwplayer().getPlaylistItem();
	if(item){
		jQuery(jQuery.find('.main-title')).text(item.title);
		jQuery(jQuery.find('.main-subtitle')).text(item.description);
	}

	ca_refreshAllAds();
}

function ca_refreshAllAds(){
	var adDivs = jQuery.find('.ca-advertisement');

	if(adDivs != null && adDivs.length > 0){
		jQuery(adDivs).each(function( index ) {
			ca_refreshIframe('ca_advert_frame'+index);
		});
	}
}

function ca_refreshIframe(id) {
    var ifr = document.getElementById(id);
    ifr.src = ifr.src;
}

function ca_processAds(){
	ca_addSideNavAd();

	var adDivs = jQuery.find('.ca-advertisement');

	if(adDivs != null && adDivs.length > 0){
		jQuery(adDivs).each(function( index ) {
			var div = jQuery(this);
	  		div.empty();

	  		var adType = div.data('ad-type');
	  		var width = adType.substring(0, adType.indexOf('x'));
	  		var height = adType.substring(adType.indexOf('x') + 1);

	  		var src = ca_getAdBaseUrl() + adType + ".htm";

	  		div.html('<iframe src="'+src+'" class="ca_center" width="'+width+'px" height="'+height+'px" frameborder="0" scrolling="no" id="ca_advert_frame'+index+'" onLoad="ca_autoResize(\'ca_advert_frame'+index+'\');"></iframe>');
			div.addClass('ca_center');
		});
	}
}

function ca_addSideNavAd(){
	if ((!(typeof ca_isFrontPage === 'undefined')) && ca_isFrontPage) {
   		jQuery(jQuery.find('#sticky-nav-inner')).append('<div class="ca-advertisement" data-ad-type="160x600"></div>');
	}
}

function ca_autoResize(id){
    var newheight;
    var newwidth;

    if(document.getElementById){
        newheight=document.getElementById(id).contentWindow.document .body.scrollHeight;
        newwidth=document.getElementById(id).contentWindow.document .body.scrollWidth;
    }

    document.getElementById(id).height= (newheight) + "px";
    document.getElementById(id).width= (newwidth) + "px";
}

function ca_getAdBaseUrl() {
	var href = window.location.href.split('/');
	href = href[0]+'//'+href[2]+'/';

	if(href.indexOf('localhost') > -1)
		href += 'man-trends/'

	return href + 'wp-content/banners/';
}

This script ALSO refreshes each banner unit individually rather than the entire page, but Google and ad networks frown upon that now since they hate iframes.

I am really stuck as to how to force the theme to use my JW Player installation and I can’t make preroll ads work when I inject the code into your jw player files. I only use that player as well.

Thanks so much for your help! If you can help me figure this out, I am fine with you using my code.