Skip to content

Commit 6bc9336

Browse files
author
surmon
committed
update
1 parent 04e998b commit 6bc9336

File tree

8 files changed

+405
-156
lines changed

8 files changed

+405
-156
lines changed

‎README.md

Lines changed: 6 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -116,8 +116,8 @@ videojs.addLanguage('es', {
116116
### Difference（使用方法的异同）
117117

118118
**SSR and the only difference in the use of the SPA:**
119-
- SPA worked by the `component`, find swiper instance by `ref attribute`.
120-
- SSR worked by the `directive`, find swiper instance by `directive arg`.
119+
- SPA worked by the `component`, find videojs instance by `ref attribute`.
120+
- SSR worked by the `directive`, find videojs instance by `directive arg`.
121121
- Other configurations, events are the same.
122122

123123

@@ -229,8 +229,10 @@ videojs.addLanguage('es', {
229229

230230
# API
231231
- component api:
232-
* playsinline(boolean, default: false): set player not full-screen in mobile device
233-
* customEventName(string, default: 'statechanged'): custom the state change event name
232+
* `events`(array, default: []): custom videojs event to component
233+
* `playsinline`(boolean, default: false): set player not full-screen in mobile device
234+
* `crossOrigin`(string, default: ''): set crossOrigin to video
235+
* `customEventName`(string, default: 'statechanged'): custom the state change event name
234236

235237
- video.js api
236238
* [video.js options](http://docs.videojs.com/tutorial-options.html)

‎config/build.conf.js

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -10,7 +10,7 @@ module.exports = merge(baseConfig, {
1010
'vue-video-player': './src/index.js'
1111
},
1212
externals: {
13-
swiper: 'swiper',
13+
'video.js': 'video.js',
1414
'object-assign': 'object-assign'
1515
},
1616
output: {

‎dist/ssr.js

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

‎dist/vue-video-player.js

Lines changed: 1 addition & 0 deletions
Some generated files are not rendered by default. Learn more about customizing how changed files appear on GitHub.

‎examples/01-video.vue

Lines changed: 1 addition & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -110,11 +110,8 @@
110110
// player is ready
111111
playerReadied(player) {
112112
// seek to 10s
113-
console.log('example player 1 readied', player);
113+
console.log('example player 1 readied', player)
114114
player.currentTime(10)
115-
setTimeout(() => {
116-
this.$refs.videoPlayer.dispose();
117-
}, 5000)
118115
// console.log('example 01: the player is readied', player)
119116
}
120117
}

‎src/index.js

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -10,7 +10,7 @@ import _videojs from 'video.js'
1010
import videoPlayer from './player.vue'
1111

1212
const videojs = window.videojs || _videojs
13-
const install = (Vue, config) => {
13+
const install = function (Vue, config) {
1414
if (config) {
1515
if (config.options) {
1616
videoPlayer.props.globalOptions.default = () => config.options

‎src/player.vue

Lines changed: 18 additions & 14 deletions
Original file line numberDiff line numberDiff line change
@@ -34,6 +34,19 @@
3434
})
3535
}
3636
37+
// as of videojs 6.6.0
38+
const DEFAULT_EVENTS = [
39+
'loadeddata',
40+
'canplay',
41+
'canplaythrough',
42+
'play',
43+
'pause',
44+
'waiting',
45+
'playing',
46+
'ended',
47+
'error'
48+
]
49+
3750
// export
3851
export default {
3952
name: 'video-player',
@@ -66,7 +79,7 @@
6679
type: Object,
6780
default: () => ({
6881
// autoplay: false,
69-
// controls: true,
82+
controls: true,
7083
// preload: 'auto',
7184
// fluid: false,
7285
// muted: false,
@@ -122,8 +135,8 @@
122135
123136
// cross origin
124137
if (this.crossOrigin !== '') {
125-
this.$el.children[0].crossOrigin = this.crossOrigin
126-
this.$el.children[0].setAttribute('crossOrigin', this.crossOrigin)
138+
this.$refs.video.crossOrigin = this.crossOrigin
139+
this.$refs.video.setAttribute('crossOrigin', this.crossOrigin)
127140
}
128141
129142
// emit event
@@ -149,16 +162,7 @@
149162
this.player = videojs(this.$refs.video, videoOptions, function() {
150163
151164
// events
152-
const events = [
153-
'loadeddata',
154-
'canplay',
155-
'canplaythrough',
156-
'play',
157-
'pause',
158-
'waiting',
159-
'playing',
160-
'ended',
161-
'error'].concat(this.events).concat(this.globalEvents)
165+
const events = DEFAULT_EVENTS.concat(this.events).concat(this.globalEvents)
162166
163167
// watch events
164168
const onEdEvents = {}
@@ -183,7 +187,7 @@
183187
})
184188
},
185189
dispose() {
186-
if (this.player && videojs) {
190+
if (this.player && this.player.dispose) {
187191
if (this.player.techName_ !== 'Flash') {
188192
this.player.pause && this.player.pause()
189193
}

0 commit comments

Comments
 (0)