Как отключить видео после проигрывания в ima sdk for html5?

Question

[Qurel]

Как отключить видео после проигрывания в ima sdk for html5?

GitHubPages

spoiler

<div id="page-content">
			<div id="video-container">
				<video id="video-element">
					<source src="https://storage.googleapis.com/interactive-media-ads/media/android.mp4">
					</source>
					<source src="https://storage.googleapis.com/interactive-media-ads/media/android.webm">
					</source>
				</video>
				<div id="ad-container"></div>
			</div>
		</div>
<button class="game-menu__btn" id="play-button">Play Again</button>

var pageContent;
var videoElement;
// Define a variable to track whether there are ads loaded and initially set it to false
var adsLoaded = false;
var adContainer;
var adDisplayContainer;
var adsLoader;
var adsManager;

// On window load, attach an event to the play button click
// that triggers playback on the video element

// window.addEventListener('load', function (event) {
videoElement = document.getElementById('video-element');

initializeIMA();
videoElement.addEventListener('play', function (event) {
	loadAds(event);
});
var playButton = document.getElementById('play-button');
playButton.addEventListener('click', function (event) {
	pageContent = document.getElementById('page-content');
	pageContent.style.transform = 'scale(1.1)';
	videoElement.play();
});
// });

window.addEventListener('resize', function (event) {
	console.log("window resized");
	if (adsManager) {
		var width = videoElement.clientWidth;
		var height = videoElement.clientHeight;
		adsManager.resize(width, height, google.ima.ViewMode.NORMAL);
	}
});

function initializeIMA() {
	console.log("initializing IMA");
	adContainer = document.getElementById('ad-container');
	adContainer.addEventListener('click', adContainerClick);
	adDisplayContainer = new google.ima.AdDisplayContainer(adContainer, videoElement);
	adsLoader = new google.ima.AdsLoader(adDisplayContainer);

	adsLoader.addEventListener(
		google.ima.AdsManagerLoadedEvent.Type.ADS_MANAGER_LOADED,
		onAdsManagerLoaded,
		false);
	adsLoader.addEventListener(
		google.ima.AdErrorEvent.Type.AD_ERROR,
		onAdError,
		false);

	// Let the AdsLoader know when the video has ended
	videoElement.addEventListener('ended', function () {
		adsLoader.contentComplete();
	});

	var adsRequest = new google.ima.AdsRequest();
	adsRequest.adTagUrl = 'https://pubads.g.doubleclick.net/gampad/ads?' +
		'sz=1280x720&iu=/124319096/external/single_ad_samples&ciu_szs=300x250&' +
		'impl=s&gdfp_req=1&env=vp&output=vast&unviewed_position_start=1&' +
		'cust_params=deployment%3Ddevsite%26sample_ct%3Dlinear&correlator=';

	// Specify the linear and nonlinear slot sizes. This helps the SDK to
	// select the correct creative if multiple are returned.
	adsRequest.linearAdSlotWidth = videoElement.clientWidth;
	adsRequest.linearAdSlotHeight = videoElement.clientHeight;
	adsRequest.nonLinearAdSlotWidth = videoElement.clientWidth;
	adsRequest.nonLinearAdSlotHeight = videoElement.clientHeight / 3;

	// Pass the request to the adsLoader to request ads
	adsLoader.requestAds(adsRequest);
}

function adContainerClick(event) {
	console.log("ad container clicked");
	if (videoElement.paused) {
		videoElement.play();
	} else {
		videoElement.pause();
	}
}

function loadAds(event) {
	// Prevent this function from running on if there are already ads loaded
	if (adsLoaded) {
		return;
	}
	adsLoaded = true;

	// Prevent triggering immediate playback when ads are loading
	event.preventDefault();

	console.log("loading ads");

	// Initialize the container. Must be done via a user action on mobile devices.
	videoElement.load();
	adDisplayContainer.initialize();

	var width = videoElement.clientWidth;
	var height = videoElement.clientHeight;
	try {
		adsManager.init(width, height, google.ima.ViewMode.NORMAL);
		adsManager.start();
	} catch (adError) {
		// Play the video without ads, if an error occurs
		console.log("AdsManager could not be started");
		videoElement.play();
	}
}

function onAdsManagerLoaded(adsManagerLoadedEvent) {
	// Instantiate the AdsManager from the adsLoader response and pass it the video element
	adsManager = adsManagerLoadedEvent.getAdsManager(
		videoElement);

	adsManager.addEventListener(
		google.ima.AdErrorEvent.Type.AD_ERROR,
		onAdError);

	adsManager.addEventListener(
		google.ima.AdEvent.Type.CONTENT_PAUSE_REQUESTED,
		onContentPauseRequested);

	adsManager.addEventListener(
		google.ima.AdEvent.Type.CONTENT_RESUME_REQUESTED,
		onContentResumeRequested);

	adsManager.addEventListener(
		google.ima.AdEvent.Type.LOADED,
		onAdLoaded);
}

function onAdLoaded(adEvent) {
	var ad = adEvent.getAd();
	if (!ad.isLinear()) {
		videoElement.play();
	}
}

function onAdError(adErrorEvent) {
	// Handle the error logging.
	console.log(adErrorEvent.getError());
	if (adsManager) {
		adsManager.destroy();
	}
}

function onContentPauseRequested() {
	videoElement.pause();
}

function onContentResumeRequested() {
	videoElement.play();
}