123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181 |
- '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;
|