// videojs recommends this style of import when using webpack
import videojs from '!video.js';
import 'video.js/dist/video-js.css';
import 'videojs-ima/dist/videojs.ima.css';
import 'videojs-contrib-ads';
import 'videojs-ima';
import titleOverlay from './titleOverlay.js';
/*
* Autoplay sometimes doesn't work as expected.
* This is a hack to try to autoplay a little harder
* TODO: test that this is necessary, even with autoload=any
* @param {object} videojs player instance
*/
function autoplayShim(player) {
// TODO: prevent playing if user already stopped the video
setTimeout(() => {
// likely will cause a console error, but still functions
player.play();
// MAGIC: 400 ms chosen because it worked most reliably
}, 400);
}
/**
* Mounts the video player to a video element.
*
* @param {DOMElement} element - A DOM element, such as the return value from
* document.getElementById(...)
* @param {object} options - All video.js options are supported
* @return A videojs player instance
*
* Additional options:
* - `adTagUrl` - a VAST url for in-video ads
* - `autoplay` - (default: `false`) - boolean, 'play', 'mute', or 'any'
*
* @example <caption>Mount the video tag with id `example`</caption>
* wralvideo(document.getElementById('example'));
*
* TODO: remove @deprecated 3rd arg from consuming code
*/
const wralvideo = (elem, opts, deprecatedAdTagUrl = null) => {
const options = Object.assign({}, wralvideo.defaults, opts);
if (deprecatedAdTagUrl) {
console.warn('WARNING', '[wralvideo]',
'passing the 3rd argument to wralvideo as an adTagUrl is '
+ 'deprecated, use the options object in the second argument instead');
options.adTagUrl = deprecatedAdTagUrl;
}
// Mount wralvideo to the element
elem.classList.add('video-js', 'wral-video');
const player = videojs(elem, options);
// Use google ads if google is available in global scope
if (window.google && options.adTagUrl && player.ima) {
player.ima({ adTagUrl: options.adTagUrl });
} else {
console.warn('IMA disabled');
}
titleOverlay(player, elem.getAttribute('data-title'));
if (options.autoplay) {
autoplayShim(player);
}
const playButton = document.querySelector('.vjs-big-play-button');
if (playButton) {
playButton.style = 'top: 50%; left: 50%; margin-top: -0.81666em; margin-left: -1.5em; transition: none; z-index: 9999;';
}
// TODO: publish coverage, passed tests, package version to CDN as html
return player;
};
wralvideo.defaults = {
adTagUrl: null,
autoplay: false,
preload: 'auto',
};
// TODO: use this verb in consuming code
export const createWralVideo = wralvideo;
export default wralvideo;