You can not select more than 25 topics Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.

182 lines
5.6 KiB

4 years ago
'use strict';
Object.defineProperty(exports, "__esModule", {
value: true
});
exports.install = exports.videoPlayer = exports.videojs = undefined;
var _video = require('video.js');
var _video2 = _interopRequireDefault(_video);
var _objectAssign = require('object-assign');
var _objectAssign2 = _interopRequireDefault(_objectAssign);
function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
function _defineProperty(obj, key, value) { if (key in obj) { Object.defineProperty(obj, key, { value: value, enumerable: true, configurable: true, writable: true }); } else { obj[key] = value; } return obj; }
var DEFAULT_EVENTS = ['loadeddata', 'canplay', 'canplaythrough', 'play', 'pause', 'waiting', 'playing', 'ended', 'error'];
var videoPlayerDirective = function videoPlayerDirective(globalOptions) {
globalOptions.events = globalOptions.events || [];
globalOptions.options = globalOptions.options || {};
var getInstanceName = function getInstanceName(el, binding, vnode) {
var instanceName = null;
if (binding.arg) {
instanceName = binding.arg;
} else if (vnode.data.attrs && (vnode.data.attrs.instanceName || vnode.data.attrs['instance-name'])) {
instanceName = vnode.data.attrs.instanceName || vnode.data.attrs['instance-name'];
} else if (el.id) {
instanceName = el.id;
}
return instanceName || 'player';
};
var repairDom = function repairDom(el) {
if (!el.children.length) {
var video = document.createElement('video');
video.className = 'video-js';
el.appendChild(video);
}
};
var initPlayer = function initPlayer(el, binding, vnode) {
var self = vnode.context;
var attrs = vnode.data.attrs || {};
var options = binding.value || {};
var instanceName = getInstanceName(el, binding, vnode);
var customEventName = attrs.customEventName || 'statechanged';
var player = self[instanceName];
var componentEvents = attrs.events || [];
var playsinline = attrs.playsinline || false;
if (playsinline) {
el.children[0].setAttribute('playsinline', playsinline);
el.children[0].setAttribute('webkit-playsinline', playsinline);
el.children[0].setAttribute('x5-playsinline', playsinline);
el.children[0].setAttribute('x5-video-player-type', 'h5');
el.children[0].setAttribute('x5-video-player-fullscreen', false);
}
if (attrs.crossOrigin) {
el.children[0].crossOrigin = attrs.crossOrigin;
el.children[0].setAttribute('crossOrigin', attrs.crossOrigin);
}
if (!player) {
var videoOptions = (0, _objectAssign2.default)({}, {
controls: true,
controlBar: {
remainingTimeDisplay: false,
playToggle: {},
progressControl: {},
fullscreenToggle: {},
volumeMenuButton: {
inline: false,
vertical: true
}
},
techOrder: ['html5'],
plugins: {}
}, globalOptions.options, options);
if (videoOptions.plugins) {
delete videoOptions.plugins.__ob__;
}
var eventEmit = function eventEmit(vnode, name, data) {
var handlers = vnode.data && vnode.data.on || vnode.componentOptions && vnode.componentOptions.listeners;
if (handlers && handlers[name]) handlers[name].fns(data);
};
var emitPlayerState = function emitPlayerState(event, value) {
if (event) {
eventEmit(vnode, event, player);
}
if (value) {
eventEmit(vnode, customEventName, _defineProperty({}, event, value));
}
};
player = self[instanceName] = (0, _video2.default)(el.children[0], videoOptions, function () {
var _this = this;
var events = DEFAULT_EVENTS.concat(componentEvents).concat(globalOptions.events);
var onEdEvents = {};
for (var i = 0; i < events.length; i++) {
if (typeof events[i] === 'string' && onEdEvents[events[i]] === undefined) {
(function (event) {
onEdEvents[event] = null;
_this.on(event, function () {
emitPlayerState(event, true);
});
})(events[i]);
}
}
this.on('timeupdate', function () {
emitPlayerState('timeupdate', this.currentTime());
});
emitPlayerState('ready');
});
}
};
var disposePlayer = function disposePlayer(el, binding, vnode) {
var self = vnode.context;
var instanceName = getInstanceName(el, binding, vnode);
var player = self[instanceName];
if (player && player.dispose) {
if (player.techName_ !== 'Flash') {
player.pause && player.pause();
}
player.dispose();
repairDom(el);
self[instanceName] = null;
delete self[instanceName];
}
};
return {
inserted: initPlayer,
bind: function bind(el, binding, vnode) {
repairDom(el);
},
update: function update(el, binding, vnode) {
var options = binding.value || {};
disposePlayer(el, binding, vnode);
if (options && options.sources && options.sources.length) {
initPlayer(el, binding, vnode);
}
},
unbind: disposePlayer
};
};
var videoPlayer = videoPlayerDirective({});
var install = function install(Vue) {
var globalOptions = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : {
options: {},
events: []
};
Vue.directive('video-player', videoPlayerDirective(globalOptions));
};
var VueVideoPlayer = { videojs: _video2.default, videoPlayer: videoPlayer, install: install };
exports.default = VueVideoPlayer;
exports.videojs = _video2.default;
exports.videoPlayer = videoPlayer;
exports.install = install;