David LaPalomento dmlap

Playlists

Playlists are a great way to give your audience more options. If they liked your default video, why not present them with more content to enjoy? Video Cloud makes it easy to curate playlists by hand or automatically through tagging. Once you have playlists created in your account, they're super easy to use with the Brightcove Player.

Media Playlists

Goals

Single video plugins are compatible without needing to be playlist-aware
Playlist events provide a consistent and predictable lifecycle for upstream developers

API

// load a playlist into a player
player.playlist([{
  sources: [firstMp4, firstOgv],

	// just playlist API
	{}

	// playlist API + UI, no autoadvance
	{
	"playlist": true
	}
	// playlist API + UI, autoadvance after 5 seconds
	{
	"playlist": true,

	<!doctype html>
	<html>
	<head>
	<title>TVE Example</title>
	</head>
	<body>
	<!-- Make sure your player doesn't have a video associated with it
	and don't use data-video-id to assign one. We'll request a video
	from the catalog by hand, detect that it's TVE content, trigger TVE
	authentication and then load the video into the player. -->

	// option 1
	player.playlist(); // get the current playlist
	player.playlist([a, b, c]); // set the current playlist
	player.playlistItem(1); // advance to b
	player.next(); // advance to c
	player.previous(); // return to b

	// option 2
	player.playlist.list(); // get the current playlist
	player.playlist.list([a, b, c]); // set the current playlist

	<!doctype html>
	<html>
	<head>
	<title>Dynamic Player Loading</title>
	</head>
	<body>
	<button id="create-a-player">Create a player!</button>

	<!-- Load the player script. Note the "async" attribute -->
	<script id="player-script" src="//players.brightcove.net/acctId/player_id/index.min.js" async></script>

	/**
	* PLUGIN CODE
	*/

	// create a simple javascript plugin that gets the current video ID and sets up ads:
	videojs.plugin('setupAds', function() {
	'use strict';
	var player = this,
	currentVideoId = player.el().getAttribute('data-video-id');
	player.ima3({

	!function(e){if("object"==typeof exports&&"undefined"!=typeof module)module.exports=e();else if("function"==typeof define&&define.amd)define([],e);else{var f;"undefined"!=typeof window?f=window:"undefined"!=typeof global?f=global:"undefined"!=typeof self&&(f=self),(f.pkcs7\|\|(f.pkcs7={})).unpad=e()}}(function(){var define,module,exports;return (function e(t,n,r){function s(o,u){if(!n[o]){if(!t[o]){var a=typeof require=="function"&&require;if(!u&&a)return a(o,!0);if(i)return i(o,!0);throw new Error("Cannot find module '"+o+"'")}var f=n[o]={exports:{}};t[o][0].call(f.exports,function(e){var n=t[o][1][e];return s(n?n:e)},f,f.exports,e,t,n,r)}return n[o].exports}var i=typeof require=="function"&&require;for(var o=0;o<r.length;o++)s(r[o]);return s})({1:[function(_dereq_,module,exports){
	(function (global){
	global.window.pkcs7 = {
	unpad: _dereq_('./unpad')
	};

	}).call(this,typeof self !== "undefined" ? self : typeof window !== "undefined" ? window : {})
	},{"./unpad":2}],2:[function(_dereq_,module,exports){
	/*
	* p

	<!doctype html>
	<video
	data-account="1234"
	data-player="abc-123"
	data-embed="default"
	class="video-js" controls></video>
	<script src="//players.brightcove.net/1234/abc-123_default/index.min.js"></script>
	<script>
	var player = videojs(document.querySelector('video'));
	player.catalog.getVideo('17', function(error, video) {

	/**
	* Adapted from
	* https://github.com/brightcove/videojs-debugger/blob/d9380572dab701130e6b44a055f9dffb6e70f516/src/js/bootstrap.js#L77
	*/
	videojs.plugin('customPlugin', function() {
	'use strict';
	var player = this,
	loaded,
	script,
	stylesheet,;