2019-05-06 21:53:14 +05:30
|
|
|
var options = {
|
2019-06-08 06:26:41 +05:30
|
|
|
preload: 'auto',
|
2019-05-20 22:45:48 +05:30
|
|
|
liveui: true,
|
2019-05-06 21:53:14 +05:30
|
|
|
playbackRates: [0.25, 0.5, 0.75, 1.0, 1.25, 1.5, 2.0],
|
|
|
|
controlBar: {
|
|
|
|
children: [
|
2019-06-08 06:26:41 +05:30
|
|
|
'playToggle',
|
|
|
|
'volumePanel',
|
|
|
|
'currentTimeDisplay',
|
|
|
|
'timeDivider',
|
|
|
|
'durationDisplay',
|
|
|
|
'progressControl',
|
|
|
|
'remainingTimeDisplay',
|
|
|
|
'captionsButton',
|
|
|
|
'qualitySelector',
|
|
|
|
'playbackRateMenuButton',
|
|
|
|
'fullscreenToggle'
|
2019-05-06 21:53:14 +05:30
|
|
|
]
|
|
|
|
}
|
|
|
|
}
|
|
|
|
|
|
|
|
if (player_data.aspect_ratio) {
|
|
|
|
options.aspectRatio = player_data.aspect_ratio;
|
|
|
|
}
|
|
|
|
|
|
|
|
var embed_url = new URL(location);
|
|
|
|
embed_url.searchParams.delete('v');
|
2019-06-05 21:40:23 +05:30
|
|
|
short_url = location.origin + '/' + video_data.id + embed_url.search;
|
2019-05-06 21:53:14 +05:30
|
|
|
embed_url = location.origin + '/embed/' + video_data.id + embed_url.search;
|
|
|
|
|
|
|
|
var shareOptions = {
|
2019-06-08 06:26:41 +05:30
|
|
|
socials: ['fbFeed', 'tw', 'reddit', 'email'],
|
2019-05-06 21:53:14 +05:30
|
|
|
|
2019-06-05 21:40:23 +05:30
|
|
|
url: short_url,
|
2019-05-06 21:53:14 +05:30
|
|
|
title: player_data.title,
|
|
|
|
description: player_data.description,
|
|
|
|
image: player_data.thumbnail,
|
|
|
|
embedCode: "<iframe id='ivplayer' type='text/html' width='640' height='360' src='" + embed_url + "' frameborder='0'></iframe>"
|
|
|
|
}
|
|
|
|
|
2019-06-08 06:26:41 +05:30
|
|
|
var player = videojs('player', options, function () {
|
2019-05-06 21:53:14 +05:30
|
|
|
this.hotkeys({
|
|
|
|
volumeStep: 0.1,
|
|
|
|
seekStep: 5,
|
|
|
|
enableModifiersForNumbers: false,
|
|
|
|
enableHoverScroll: true,
|
|
|
|
customKeys: {
|
|
|
|
// Toggle play with K Key
|
|
|
|
play: {
|
|
|
|
key: function (e) {
|
|
|
|
return e.which === 75;
|
|
|
|
},
|
|
|
|
handler: function (player, options, e) {
|
|
|
|
if (player.paused()) {
|
|
|
|
player.play();
|
|
|
|
} else {
|
|
|
|
player.pause();
|
|
|
|
}
|
|
|
|
}
|
|
|
|
},
|
|
|
|
// Go backward 10 seconds
|
|
|
|
backward: {
|
|
|
|
key: function (e) {
|
|
|
|
return e.which === 74;
|
|
|
|
},
|
|
|
|
handler: function (player, options, e) {
|
|
|
|
player.currentTime(player.currentTime() - 10);
|
|
|
|
}
|
|
|
|
},
|
|
|
|
// Go forward 10 seconds
|
|
|
|
forward: {
|
|
|
|
key: function (e) {
|
|
|
|
return e.which === 76;
|
|
|
|
},
|
|
|
|
handler: function (player, options, e) {
|
|
|
|
player.currentTime(player.currentTime() + 10);
|
|
|
|
}
|
|
|
|
},
|
|
|
|
// Increase speed
|
|
|
|
increase_speed: {
|
|
|
|
key: function (e) {
|
|
|
|
return (e.which === 190 && e.shiftKey);
|
|
|
|
},
|
|
|
|
handler: function (player, _, e) {
|
|
|
|
size = options.playbackRates.length;
|
|
|
|
index = options.playbackRates.indexOf(player.playbackRate());
|
|
|
|
player.playbackRate(options.playbackRates[(index + 1) % size]);
|
|
|
|
}
|
|
|
|
},
|
|
|
|
// Decrease speed
|
|
|
|
decrease_speed: {
|
|
|
|
key: function (e) {
|
|
|
|
return (e.which === 188 && e.shiftKey);
|
|
|
|
},
|
|
|
|
handler: function (player, _, e) {
|
|
|
|
size = options.playbackRates.length;
|
|
|
|
index = options.playbackRates.indexOf(player.playbackRate());
|
|
|
|
player.playbackRate(options.playbackRates[(size + index - 1) % size]);
|
|
|
|
}
|
|
|
|
}
|
|
|
|
}
|
|
|
|
});
|
|
|
|
});
|
|
|
|
|
2019-06-08 21:22:47 +05:30
|
|
|
if (location.pathname.startsWith('/embed/')) {
|
|
|
|
player.overlay({
|
|
|
|
overlays: [{
|
|
|
|
start: 'loadstart',
|
2019-06-16 23:44:56 +05:30
|
|
|
content: '<h1><a href="' + location.origin + '/watch?v=' + video_data.id + '">' + player_data.title + '</a></h1>',
|
2019-06-08 21:22:47 +05:30
|
|
|
end: 'playing',
|
|
|
|
align: 'top'
|
|
|
|
}, {
|
|
|
|
start: 'pause',
|
2019-06-16 23:44:56 +05:30
|
|
|
content: '<h1><a href="' + location.origin + '/watch?v=' + video_data.id + '">' + player_data.title + '</a></h1>',
|
2019-06-08 21:22:47 +05:30
|
|
|
end: 'playing',
|
|
|
|
align: 'top'
|
|
|
|
}]
|
|
|
|
});
|
|
|
|
}
|
|
|
|
|
2019-05-06 21:53:14 +05:30
|
|
|
player.on('error', function (event) {
|
|
|
|
if (player.error().code === 2 || player.error().code === 4) {
|
|
|
|
setInterval(setTimeout(function (event) {
|
|
|
|
console.log('An error occured in the player, reloading...');
|
|
|
|
|
|
|
|
var currentTime = player.currentTime();
|
|
|
|
var playbackRate = player.playbackRate();
|
|
|
|
var paused = player.paused();
|
|
|
|
|
|
|
|
player.load();
|
|
|
|
|
|
|
|
if (currentTime > 0.5) {
|
|
|
|
currentTime -= 0.5;
|
|
|
|
}
|
|
|
|
|
|
|
|
player.currentTime(currentTime);
|
|
|
|
player.playbackRate(playbackRate);
|
|
|
|
|
|
|
|
if (!paused) {
|
|
|
|
player.play();
|
|
|
|
}
|
|
|
|
}, 5000), 5000);
|
|
|
|
}
|
|
|
|
});
|
|
|
|
|
|
|
|
// Add markers
|
|
|
|
if (video_data.params.video_start > 0 || video_data.params.video_end > 0) {
|
|
|
|
var markers = [{ time: video_data.params.video_start, text: 'Start' }];
|
|
|
|
|
|
|
|
if (video_data.params.video_end < 0) {
|
|
|
|
markers.push({ time: video_data.length_seconds - 0.5, text: 'End' });
|
|
|
|
} else {
|
|
|
|
markers.push({ time: video_data.params.video_end, text: 'End' });
|
|
|
|
}
|
|
|
|
|
|
|
|
player.markers({
|
|
|
|
onMarkerReached: function (marker) {
|
|
|
|
if (marker.text === 'End') {
|
|
|
|
if (player.loop()) {
|
|
|
|
player.markers.prev('Start');
|
|
|
|
} else {
|
|
|
|
player.pause();
|
|
|
|
}
|
|
|
|
}
|
|
|
|
},
|
|
|
|
markers: markers
|
|
|
|
});
|
|
|
|
|
|
|
|
player.currentTime(video_data.params.video_start);
|
|
|
|
}
|
|
|
|
|
|
|
|
player.volume(video_data.params.volume / 100);
|
|
|
|
player.playbackRate(video_data.params.speed);
|
|
|
|
|
2019-05-20 22:45:48 +05:30
|
|
|
player.on('waiting', function () {
|
|
|
|
if (player.playbackRate() > 1 && player.liveTracker.isLive() && player.liveTracker.atLiveEdge()) {
|
|
|
|
console.log('Player has caught up to source, resetting playbackRate.')
|
|
|
|
player.playbackRate(1);
|
|
|
|
}
|
|
|
|
});
|
|
|
|
|
2019-06-08 20:48:45 +05:30
|
|
|
if (video_data.premiere_timestamp && Math.round(new Date() / 1000) < video_data.premiere_timestamp) {
|
|
|
|
player.getChild('bigPlayButton').hide();
|
|
|
|
}
|
|
|
|
|
2019-05-06 21:53:14 +05:30
|
|
|
if (video_data.params.autoplay) {
|
|
|
|
var bpb = player.getChild('bigPlayButton');
|
2019-06-08 20:48:45 +05:30
|
|
|
bpb.hide();
|
|
|
|
|
|
|
|
player.ready(function () {
|
|
|
|
new Promise(function (resolve, reject) {
|
|
|
|
setTimeout(() => resolve(1), 1);
|
|
|
|
}).then(function (result) {
|
|
|
|
var promise = player.play();
|
|
|
|
|
|
|
|
if (promise !== undefined) {
|
|
|
|
promise.then(_ => {
|
|
|
|
}).catch(error => {
|
|
|
|
bpb.show();
|
|
|
|
});
|
|
|
|
}
|
2019-05-06 21:53:14 +05:30
|
|
|
});
|
2019-06-08 20:48:45 +05:30
|
|
|
});
|
2019-05-06 21:53:14 +05:30
|
|
|
}
|
|
|
|
|
|
|
|
if (!video_data.params.listen && video_data.params.quality === 'dash') {
|
|
|
|
player.httpSourceSelector();
|
|
|
|
}
|
|
|
|
|
|
|
|
player.vttThumbnails({
|
|
|
|
src: location.origin + '/api/v1/storyboards/' + video_data.id + '?height=90'
|
|
|
|
});
|
|
|
|
|
|
|
|
// Enable annotations
|
2019-05-09 19:06:36 +05:30
|
|
|
if (!video_data.params.listen && video_data.params.annotations) {
|
2019-05-06 21:53:14 +05:30
|
|
|
var video_container = document.getElementById('player');
|
|
|
|
let xhr = new XMLHttpRequest();
|
|
|
|
xhr.responseType = 'text';
|
|
|
|
xhr.timeout = 60000;
|
|
|
|
xhr.open('GET', '/api/v1/annotations/' + video_data.id, true);
|
|
|
|
|
|
|
|
xhr.onreadystatechange = function () {
|
|
|
|
if (xhr.readyState === 4) {
|
|
|
|
if (xhr.status === 200) {
|
|
|
|
videojs.registerPlugin('youtubeAnnotationsPlugin', youtubeAnnotationsPlugin);
|
|
|
|
if (!player.paused()) {
|
|
|
|
player.youtubeAnnotationsPlugin({ annotationXml: xhr.response, videoContainer: video_container });
|
|
|
|
} else {
|
|
|
|
player.one('play', function (event) {
|
|
|
|
player.youtubeAnnotationsPlugin({ annotationXml: xhr.response, videoContainer: video_container });
|
|
|
|
});
|
|
|
|
}
|
|
|
|
}
|
|
|
|
}
|
|
|
|
}
|
|
|
|
|
|
|
|
window.addEventListener('__ar_annotation_click', e => {
|
|
|
|
const { url, target, seconds } = e.detail;
|
|
|
|
var path = new URL(url);
|
|
|
|
|
|
|
|
if (path.href.startsWith('https://www.youtube.com/watch?') && seconds) {
|
|
|
|
path.search += '&t=' + seconds;
|
|
|
|
}
|
|
|
|
|
|
|
|
path = path.pathname + path.search;
|
|
|
|
|
|
|
|
if (target === 'current') {
|
|
|
|
window.location.href = path;
|
|
|
|
} else if (target === 'new') {
|
|
|
|
window.open(path, '_blank');
|
|
|
|
}
|
|
|
|
});
|
2019-06-15 20:38:06 +05:30
|
|
|
|
|
|
|
xhr.send();
|
2019-05-06 21:53:14 +05:30
|
|
|
}
|
|
|
|
|
|
|
|
// Since videojs-share can sometimes be blocked, we defer it until last
|
|
|
|
player.share(shareOptions);
|