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