2018-10-12 23:00:20 +02:00
|
|
|
/*! videojs-ass
|
|
|
|
* Copyright (c) 2014 Sunny Li
|
|
|
|
* Licensed under the Apache-2.0 license. */
|
|
|
|
|
|
|
|
(function (videojs, libjass) {
|
|
|
|
'use strict';
|
|
|
|
|
|
|
|
var vjs_ass = function (options) {
|
2020-01-25 17:44:53 +01:00
|
|
|
var overlay = document.createElement('div'),
|
|
|
|
clock = null,
|
2018-10-12 23:00:20 +02:00
|
|
|
clockRate = options.rate || 1,
|
|
|
|
delay = options.delay || 0,
|
|
|
|
player = this,
|
2020-01-25 17:44:53 +01:00
|
|
|
renderer = null,
|
|
|
|
AssButton = null,
|
|
|
|
AssButtonInstance = null,
|
|
|
|
VjsButton = null;
|
2018-10-12 23:00:20 +02:00
|
|
|
|
|
|
|
if (!options.src) {
|
|
|
|
return;
|
|
|
|
}
|
|
|
|
|
|
|
|
overlay.className = 'vjs-ass';
|
2020-01-25 17:44:53 +01:00
|
|
|
player.el().insertBefore(overlay, player.el().firstChild.nextSibling);
|
2018-10-12 23:00:20 +02:00
|
|
|
|
|
|
|
function getCurrentTime() {
|
|
|
|
return player.currentTime() - delay;
|
|
|
|
}
|
|
|
|
|
2020-01-25 17:44:53 +01:00
|
|
|
clock = new libjass.renderers.AutoClock(getCurrentTime, 500);
|
2018-10-12 23:00:20 +02:00
|
|
|
|
|
|
|
player.on('play', function () {
|
2020-01-25 17:44:53 +01:00
|
|
|
clock.play();
|
2018-10-12 23:00:20 +02:00
|
|
|
});
|
|
|
|
|
|
|
|
player.on('pause', function () {
|
2020-01-25 17:44:53 +01:00
|
|
|
clock.pause();
|
2018-10-12 23:00:20 +02:00
|
|
|
});
|
|
|
|
|
|
|
|
player.on('seeking', function () {
|
2020-01-25 17:44:53 +01:00
|
|
|
clock.seeking();
|
2018-10-12 23:00:20 +02:00
|
|
|
});
|
|
|
|
|
|
|
|
function updateClockRate() {
|
2020-01-25 17:44:53 +01:00
|
|
|
clock.setRate(player.playbackRate() * clockRate);
|
2018-10-12 23:00:20 +02:00
|
|
|
}
|
2020-01-25 17:44:53 +01:00
|
|
|
|
2018-10-12 23:00:20 +02:00
|
|
|
updateClockRate();
|
|
|
|
player.on('ratechange', updateClockRate);
|
|
|
|
|
|
|
|
function updateDisplayArea() {
|
|
|
|
setTimeout(function () {
|
2020-01-25 17:44:53 +01:00
|
|
|
renderer.resize(player.el().offsetWidth, player.el().offsetHeight);
|
2018-10-12 23:00:20 +02:00
|
|
|
}, 100);
|
|
|
|
}
|
2020-01-25 17:44:53 +01:00
|
|
|
|
|
|
|
if (player.fluid()) {
|
|
|
|
window.addEventListener('resize', updateDisplayArea);
|
|
|
|
}
|
2018-10-12 23:00:20 +02:00
|
|
|
|
|
|
|
player.on('loadedmetadata', updateDisplayArea);
|
|
|
|
player.on('resize', updateDisplayArea);
|
|
|
|
player.on('fullscreenchange', updateDisplayArea);
|
|
|
|
|
|
|
|
player.on('dispose', function () {
|
2020-01-25 17:44:53 +01:00
|
|
|
clock.disable();
|
2018-10-12 23:00:20 +02:00
|
|
|
});
|
|
|
|
|
|
|
|
libjass.ASS.fromUrl(options.src, libjass.Format.ASS).then(
|
|
|
|
function (ass) {
|
2020-01-25 17:44:53 +01:00
|
|
|
var rendererSettings = new libjass.renderers.RendererSettings();
|
2018-10-12 23:00:20 +02:00
|
|
|
if (options.hasOwnProperty('enableSvg')) {
|
|
|
|
rendererSettings.enableSvg = options.enableSvg;
|
|
|
|
}
|
|
|
|
if (options.hasOwnProperty('fontMap')) {
|
|
|
|
rendererSettings.fontMap = new libjass.Map(options.fontMap);
|
|
|
|
} else if (options.hasOwnProperty('fontMapById')) {
|
|
|
|
rendererSettings.fontMap = libjass.renderers.RendererSettings
|
|
|
|
.makeFontMapFromStyleElement(document.getElementById(options.fontMapById));
|
|
|
|
}
|
|
|
|
|
2020-01-25 17:44:53 +01:00
|
|
|
renderer = new libjass.renderers.WebRenderer(ass, clock, overlay, rendererSettings);
|
|
|
|
console.debug(renderer);
|
2018-10-12 23:00:20 +02:00
|
|
|
}
|
|
|
|
);
|
|
|
|
|
2020-01-25 17:44:53 +01:00
|
|
|
// Visibility Toggle Button
|
|
|
|
if (!options.hasOwnProperty('button') || options.button) {
|
|
|
|
VjsButton = videojs.getComponent('Button');
|
|
|
|
AssButton = videojs.extend(VjsButton, {
|
|
|
|
constructor: function (player, options) {
|
|
|
|
options.name = options.name || 'assToggleButton';
|
|
|
|
VjsButton.call(this, player, options);
|
|
|
|
|
|
|
|
this.addClass('vjs-ass-button');
|
|
|
|
|
|
|
|
this.on('click', this.onClick);
|
|
|
|
},
|
|
|
|
onClick: function () {
|
|
|
|
if (!this.hasClass('inactive')) {
|
|
|
|
this.addClass('inactive');
|
|
|
|
overlay.style.display = "none";
|
2018-10-12 23:00:20 +02:00
|
|
|
} else {
|
2020-01-25 17:44:53 +01:00
|
|
|
this.removeClass('inactive');
|
|
|
|
overlay.style.display = "";
|
2018-10-12 23:00:20 +02:00
|
|
|
}
|
|
|
|
}
|
2020-01-25 17:44:53 +01:00
|
|
|
});
|
2018-10-12 23:00:20 +02:00
|
|
|
|
2020-01-25 17:44:53 +01:00
|
|
|
player.ready(function () {
|
|
|
|
AssButtonInstance = new AssButton(player, options);
|
|
|
|
player.controlBar.addChild(AssButtonInstance);
|
|
|
|
player.controlBar.el().insertBefore(
|
|
|
|
AssButtonInstance.el(),
|
|
|
|
player.controlBar.getChild('customControlSpacer').el().nextSibling
|
|
|
|
);
|
|
|
|
});
|
|
|
|
}
|
2018-10-12 23:00:20 +02:00
|
|
|
};
|
|
|
|
|
|
|
|
videojs.plugin('ass', vjs_ass);
|
|
|
|
}(window.videojs, window.libjass));
|