ssr.js 5.6 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181
  1. 'use strict';
  2. Object.defineProperty(exports, "__esModule", {
  3. value: true
  4. });
  5. exports.install = exports.videoPlayer = exports.videojs = undefined;
  6. var _video = require('video.js');
  7. var _video2 = _interopRequireDefault(_video);
  8. var _objectAssign = require('object-assign');
  9. var _objectAssign2 = _interopRequireDefault(_objectAssign);
  10. function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
  11. 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; }
  12. var DEFAULT_EVENTS = ['loadeddata', 'canplay', 'canplaythrough', 'play', 'pause', 'waiting', 'playing', 'ended', 'error'];
  13. var videoPlayerDirective = function videoPlayerDirective(globalOptions) {
  14. globalOptions.events = globalOptions.events || [];
  15. globalOptions.options = globalOptions.options || {};
  16. var getInstanceName = function getInstanceName(el, binding, vnode) {
  17. var instanceName = null;
  18. if (binding.arg) {
  19. instanceName = binding.arg;
  20. } else if (vnode.data.attrs && (vnode.data.attrs.instanceName || vnode.data.attrs['instance-name'])) {
  21. instanceName = vnode.data.attrs.instanceName || vnode.data.attrs['instance-name'];
  22. } else if (el.id) {
  23. instanceName = el.id;
  24. }
  25. return instanceName || 'player';
  26. };
  27. var repairDom = function repairDom(el) {
  28. if (!el.children.length) {
  29. var video = document.createElement('video');
  30. video.className = 'video-js';
  31. el.appendChild(video);
  32. }
  33. };
  34. var initPlayer = function initPlayer(el, binding, vnode) {
  35. var self = vnode.context;
  36. var attrs = vnode.data.attrs || {};
  37. var options = binding.value || {};
  38. var instanceName = getInstanceName(el, binding, vnode);
  39. var customEventName = attrs.customEventName || 'statechanged';
  40. var player = self[instanceName];
  41. var componentEvents = attrs.events || [];
  42. var playsinline = attrs.playsinline || false;
  43. if (playsinline) {
  44. el.children[0].setAttribute('playsinline', playsinline);
  45. el.children[0].setAttribute('webkit-playsinline', playsinline);
  46. el.children[0].setAttribute('x5-playsinline', playsinline);
  47. el.children[0].setAttribute('x5-video-player-type', 'h5');
  48. el.children[0].setAttribute('x5-video-player-fullscreen', false);
  49. }
  50. if (attrs.crossOrigin) {
  51. el.children[0].crossOrigin = attrs.crossOrigin;
  52. el.children[0].setAttribute('crossOrigin', attrs.crossOrigin);
  53. }
  54. if (!player) {
  55. var videoOptions = (0, _objectAssign2.default)({}, {
  56. controls: true,
  57. controlBar: {
  58. remainingTimeDisplay: false,
  59. playToggle: {},
  60. progressControl: {},
  61. fullscreenToggle: {},
  62. volumeMenuButton: {
  63. inline: false,
  64. vertical: true
  65. }
  66. },
  67. techOrder: ['html5'],
  68. plugins: {}
  69. }, globalOptions.options, options);
  70. if (videoOptions.plugins) {
  71. delete videoOptions.plugins.__ob__;
  72. }
  73. var eventEmit = function eventEmit(vnode, name, data) {
  74. var handlers = vnode.data && vnode.data.on || vnode.componentOptions && vnode.componentOptions.listeners;
  75. if (handlers && handlers[name]) handlers[name].fns(data);
  76. };
  77. var emitPlayerState = function emitPlayerState(event, value) {
  78. if (event) {
  79. eventEmit(vnode, event, player);
  80. }
  81. if (value) {
  82. eventEmit(vnode, customEventName, _defineProperty({}, event, value));
  83. }
  84. };
  85. player = self[instanceName] = (0, _video2.default)(el.children[0], videoOptions, function () {
  86. var _this = this;
  87. var events = DEFAULT_EVENTS.concat(componentEvents).concat(globalOptions.events);
  88. var onEdEvents = {};
  89. for (var i = 0; i < events.length; i++) {
  90. if (typeof events[i] === 'string' && onEdEvents[events[i]] === undefined) {
  91. (function (event) {
  92. onEdEvents[event] = null;
  93. _this.on(event, function () {
  94. emitPlayerState(event, true);
  95. });
  96. })(events[i]);
  97. }
  98. }
  99. this.on('timeupdate', function () {
  100. emitPlayerState('timeupdate', this.currentTime());
  101. });
  102. emitPlayerState('ready');
  103. });
  104. }
  105. };
  106. var disposePlayer = function disposePlayer(el, binding, vnode) {
  107. var self = vnode.context;
  108. var instanceName = getInstanceName(el, binding, vnode);
  109. var player = self[instanceName];
  110. if (player && player.dispose) {
  111. if (player.techName_ !== 'Flash') {
  112. player.pause && player.pause();
  113. }
  114. player.dispose();
  115. repairDom(el);
  116. self[instanceName] = null;
  117. delete self[instanceName];
  118. }
  119. };
  120. return {
  121. inserted: initPlayer,
  122. bind: function bind(el, binding, vnode) {
  123. repairDom(el);
  124. },
  125. update: function update(el, binding, vnode) {
  126. var options = binding.value || {};
  127. disposePlayer(el, binding, vnode);
  128. if (options && options.sources && options.sources.length) {
  129. initPlayer(el, binding, vnode);
  130. }
  131. },
  132. unbind: disposePlayer
  133. };
  134. };
  135. var videoPlayer = videoPlayerDirective({});
  136. var install = function install(Vue) {
  137. var globalOptions = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : {
  138. options: {},
  139. events: []
  140. };
  141. Vue.directive('video-player', videoPlayerDirective(globalOptions));
  142. };
  143. var VueVideoPlayer = { videojs: _video2.default, videoPlayer: videoPlayer, install: install };
  144. exports.default = VueVideoPlayer;
  145. exports.videojs = _video2.default;
  146. exports.videoPlayer = videoPlayer;
  147. exports.install = install;