jdgo-mars/index.html

## index.html
<!DOCTYPE html>
<!--
*
* Copyright (C) 2016, bitmovin GmbH, All Rights Reserved
*
* This source code and its use and distribution, is subject to the terms
* and conditions of the applicable license agreement.
*
-->
<html lang="en">
	<head>
		<title>Bitmovin Player Demo</title>
		<meta charset="UTF-8" />
		<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1" />
		<meta name="viewport" content="width=device-width, initial-scale=1.0" />

		<!-- Bitmovin Player -->
		<script type="text/javascript" src="bitdash-player/bitmovinplayer.js"></script>

		<style>
			.container {
				color: white;
				text-align: center;
			}
			.container a {
				color: white;
			}
			.container h1 {
				margin-bottom: 22px;
				line-height: 66px;
			}
			.container h2 {
				font-weight: normal;
				margin-bottom: 36px;
				line-height: 26px;
			}
			.player-wrapper {
				width: 95%;
				margin: 20px auto;
				box-shadow: 0 0 30px rgba(0, 0, 0, 0.7);
			}
		</style>
	</head>
	<body>
		<div class="container">
			<div class="content">
				<div class="player-wrapper">
					<div id="player"></div>
				</div>
			</div>
		</div>
		<script type="text/javascript">
			const container = document.getElementById('player');
			let videoElement;
			const conf = {
				key: 'a2602931-36e9-48e8-a313-0753ddcce065',
				location: {
					ui: 'https://cdn.bitmovin.com/player/web/8/bitmovinplayer-ui.js',
					ui_css: 'https://cdn.bitmovin.com/player/web/8/bitmovinplayer-ui.css'
				},
				autoplay: true,
				advertising: {
					adBreaks: [
						{
							id: '1',
							tag: {
								url:
									'http://fabian-test-eu-fra.s3.amazonaws.com/vast-test-area/vast2-default-5sec.xml?b=[BLOCKED]&corr=[CACHEBUSTER]',
								type: 'vast'
							},
							position: 'pre'
						}
					],
					awesomeConfiguration: {
						foo: 'bar'
					}
				}
			};

			const source = {
				dash:
					'//bitmovin-a.akamaihd.net/content/MI201109210084_1/mpds/f08e80da-bf1d-4e3d-8899-f0f6155f6efa.mpd'
			};
			let isLinearAdActive = true;
			const advertisingModule = {
				name: 'Advertising',
				module: () =>
					function AdvertisingModule(playerDelegate, config) {
						_playerDelegate = playerDelegate;
						return {
							onTimeChanged: time => {},
							onSeek: (from, to) => {},
							onResize: (width, height, isFullscreen) => {},
							onVolumeChanged: volume => {},
							beforeContent: () => Promise.resolve(),
							afterContent: () => Promise.resolve(),
							schedule: () => {},
							list: () => [],
							getActiveAdBreak: () => {},
							getActiveAd: () => {},
							isLinearAdActive: playing => isLinearAdActive,
							discardAdBreak: adBreakId => {},
							currentTime: () => videoElement.currentTime,
							duration: () => videoElement.duration,
							pause: () => {},
							resume: () => {},
							skip: () => {},
							getModuleInfo: () => {
								return { name: 'Custom ad module' };
							},
							reset: () => {},
							dispose: () => {}
						};
					},
				hooks: {
					setup: (module, player) => {}
				}
			};

			bitmovin.player.Player.addModule(advertisingModule);

			const player = new bitmovin.player.Player(container, conf);

			player.on(bitmovin.player.PlayerEvent.Play, (event, data) => {
				console.log('#### On Player.Play', event, data);
			});

			player.on(bitmovin.player.PlayerEvent.AdStarted, (event, data) => {
				console.log('#### On Player.AdStarted', event, data);
			});

			player.on(bitmovin.player.PlayerEvent.AdBreakStarted, (event, data) => {
				console.log('#### On Player.AdBreakStarted', event, data);
			});

			player.on(bitmovin.player.PlayerEvent.AdBreakFinished, (event, data) => {
				console.log('#### On Player.AdBreakFinished', event, data);
				isLinearAdActive = false;
			});

			player.on(bitmovin.player.PlayerEvent.AdFinished, (event, data) => {
				console.log('#### On Player.AdFinished', event, data);
			});

			player.load(source).then(
				player => {
					console.log('Successfully created Bitmovin Player instance');
					nextAD();
				},
				reason => {
					console.log('Error while creating Bitmovin Player instance');
				}
			);

			_playerDelegate = null;
			_adPlaybackApi = null;
			_adPlayer = null;
			_currentAd = -1;

			//Demo with multiple mediaFiles:
			const mediaFiles = [
				'https://keep.burgeins.de/cdn/mog/opener.mp4',
				'https://fabian-test-eu-fra.s3.amazonaws.com/vast-test-area/clips/homad_testad_pod_1.0.mp4',
				'https://keep.burgeins.de/cdn/5secs.mp4'
			];

			//Demo with 1 mediaFile, then it works:
			/*
			 const mediaFiles = [
			   'https://keep.burgeins.de/cdn/mog/opener.mp4'
			 ];
			 */

			function nextAD() {
				_currentAd++;
				var videoUrl = mediaFiles[_currentAd];
				requestPlayback(videoUrl);
			}

			function requestPlayback(videoUrl) {
				if (!_adPlaybackApi) {
					_playerDelegate.requestAdPlayback({}).then(adPlaybackApi => {
						_adPlaybackApi = adPlaybackApi;
						requestPlayer(videoUrl);
					});
				} else {
					requestPlayer(videoUrl);
				}
			}

			function requestPlayer(videoUrl) {
				_adPlaybackApi.requestPlayer().then(adPlayer => {
					_adPlayer = adPlayer;
					playAd(videoUrl);
				});
			}

			function playAd(videoUrl) {
				const linearAd = {
					mediaFileUrl: videoUrl,
					isLinear: true,
					uiConfig: {
						requestsUi: true
					}
				};

				_adPlayer.on(
					bitmovin.player.PlayerEvent.PlaybackFinished,
					function(e) {
						console.log('PlaybackFinished');
						disposeAdPlayer();
						if (_currentAd < mediaFiles.length - 1) {
							nextAD();
						} else {
							_adPlaybackApi.done();
						}
					}.bind(this),
					false
				);

				_adPlayer.load(linearAd).then(() => {
					videoElement = container.getElementsByTagName('video')[0];
					_adPlayer.play();
				});
			}

			function disposeAdPlayer() {
				if (_adPlayer) {
					_adPlayer.done();
					_adPlayer = null;
				}
			}
		</script>
	</body>
</html>
	<!DOCTYPE html>
	<!--
	*
	* Copyright (C) 2016, bitmovin GmbH, All Rights Reserved
	*
	* This source code and its use and distribution, is subject to the terms
	* and conditions of the applicable license agreement.
	*
	-->
	<html lang="en">
	<head>
	<title>Bitmovin Player Demo</title>
	<meta charset="UTF-8" />
	<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1" />
	<meta name="viewport" content="width=device-width, initial-scale=1.0" />

	<!-- Bitmovin Player -->
	<script type="text/javascript" src="bitdash-player/bitmovinplayer.js"></script>

	<style>
	.container {
	color: white;
	text-align: center;
	}
	.container a {
	color: white;
	}
	.container h1 {
	margin-bottom: 22px;
	line-height: 66px;
	}
	.container h2 {
	font-weight: normal;
	margin-bottom: 36px;
	line-height: 26px;
	}
	.player-wrapper {
	width: 95%;
	margin: 20px auto;
	box-shadow: 0 0 30px rgba(0, 0, 0, 0.7);
	}
	</style>
	</head>
	<body>
	<div class="container">
	<div class="content">
	<div class="player-wrapper">
	<div id="player"></div>
	</div>
	</div>
	</div>
	<script type="text/javascript">
	const container = document.getElementById('player');
	let videoElement;
	const conf = {
	key: 'a2602931-36e9-48e8-a313-0753ddcce065',
	location: {
	ui: 'https://cdn.bitmovin.com/player/web/8/bitmovinplayer-ui.js',
	ui_css: 'https://cdn.bitmovin.com/player/web/8/bitmovinplayer-ui.css'
	},
	autoplay: true,
	advertising: {
	adBreaks: [
	{
	id: '1',
	tag: {
	url:
	'http://fabian-test-eu-fra.s3.amazonaws.com/vast-test-area/vast2-default-5sec.xml?b=[BLOCKED]&corr=[CACHEBUSTER]',
	type: 'vast'
	},
	position: 'pre'
	}
	],
	awesomeConfiguration: {
	foo: 'bar'
	}
	}
	};

	const source = {
	dash:
	'//bitmovin-a.akamaihd.net/content/MI201109210084_1/mpds/f08e80da-bf1d-4e3d-8899-f0f6155f6efa.mpd'
	};
	let isLinearAdActive = true;
	const advertisingModule = {
	name: 'Advertising',
	module: () =>
	function AdvertisingModule(playerDelegate, config) {
	_playerDelegate = playerDelegate;
	return {
	onTimeChanged: time => {},
	onSeek: (from, to) => {},
	onResize: (width, height, isFullscreen) => {},
	onVolumeChanged: volume => {},
	beforeContent: () => Promise.resolve(),
	afterContent: () => Promise.resolve(),
	schedule: () => {},
	list: () => [],
	getActiveAdBreak: () => {},
	getActiveAd: () => {},
	isLinearAdActive: playing => isLinearAdActive,
	discardAdBreak: adBreakId => {},
	currentTime: () => videoElement.currentTime,
	duration: () => videoElement.duration,
	pause: () => {},
	resume: () => {},
	skip: () => {},
	getModuleInfo: () => {
	return { name: 'Custom ad module' };
	},
	reset: () => {},
	dispose: () => {}
	};
	},
	hooks: {
	setup: (module, player) => {}
	}
	};

	bitmovin.player.Player.addModule(advertisingModule);

	const player = new bitmovin.player.Player(container, conf);

	player.on(bitmovin.player.PlayerEvent.Play, (event, data) => {
	console.log('#### On Player.Play', event, data);
	});

	player.on(bitmovin.player.PlayerEvent.AdStarted, (event, data) => {
	console.log('#### On Player.AdStarted', event, data);
	});

	player.on(bitmovin.player.PlayerEvent.AdBreakStarted, (event, data) => {
	console.log('#### On Player.AdBreakStarted', event, data);
	});

	player.on(bitmovin.player.PlayerEvent.AdBreakFinished, (event, data) => {
	console.log('#### On Player.AdBreakFinished', event, data);
	isLinearAdActive = false;
	});

	player.on(bitmovin.player.PlayerEvent.AdFinished, (event, data) => {
	console.log('#### On Player.AdFinished', event, data);
	});

	player.load(source).then(
	player => {
	console.log('Successfully created Bitmovin Player instance');
	nextAD();
	},
	reason => {
	console.log('Error while creating Bitmovin Player instance');
	}
	);

	_playerDelegate = null;
	_adPlaybackApi = null;
	_adPlayer = null;
	_currentAd = -1;

	//Demo with multiple mediaFiles:
	const mediaFiles = [
	'https://keep.burgeins.de/cdn/mog/opener.mp4',
	'https://fabian-test-eu-fra.s3.amazonaws.com/vast-test-area/clips/homad_testad_pod_1.0.mp4',
	'https://keep.burgeins.de/cdn/5secs.mp4'
	];

	//Demo with 1 mediaFile, then it works:
	/*
	const mediaFiles = [
	'https://keep.burgeins.de/cdn/mog/opener.mp4'
	];
	*/

	function nextAD() {
	_currentAd++;
	var videoUrl = mediaFiles[_currentAd];
	requestPlayback(videoUrl);
	}

	function requestPlayback(videoUrl) {
	if (!_adPlaybackApi) {
	_playerDelegate.requestAdPlayback({}).then(adPlaybackApi => {
	_adPlaybackApi = adPlaybackApi;
	requestPlayer(videoUrl);
	});
	} else {
	requestPlayer(videoUrl);
	}
	}

	function requestPlayer(videoUrl) {
	_adPlaybackApi.requestPlayer().then(adPlayer => {
	_adPlayer = adPlayer;
	playAd(videoUrl);
	});
	}

	function playAd(videoUrl) {
	const linearAd = {
	mediaFileUrl: videoUrl,
	isLinear: true,
	uiConfig: {
	requestsUi: true
	}
	};

	_adPlayer.on(
	bitmovin.player.PlayerEvent.PlaybackFinished,
	function(e) {
	console.log('PlaybackFinished');
	disposeAdPlayer();
	if (_currentAd < mediaFiles.length - 1) {
	nextAD();
	} else {
	_adPlaybackApi.done();
	}
	}.bind(this),
	false
	);

	_adPlayer.load(linearAd).then(() => {
	videoElement = container.getElementsByTagName('video')[0];
	_adPlayer.play();
	});
	}

	function disposeAdPlayer() {
	if (_adPlayer) {
	_adPlayer.done();
	_adPlayer = null;
	}
	}
	</script>
	</body>
	</html>