Skip to content

Commit d7dcefd

Browse files
author
Tim Kamanin
committed
Added vimeo support via videojs-vimeo
1 parent bd3579b commit d7dcefd

File tree

5 files changed

+114
-2
lines changed

5 files changed

+114
-2
lines changed

README.md

Lines changed: 21 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -8,7 +8,7 @@
88

99
# Vue-Video-Player
1010
Video/Live player for Vue.js(1.x ~ 2.x)
11-
基于 [video.js](https://github.com/videojs/video.js) + [videojs-resolution-switcher](https://github.com/kmoskwiak/videojs-resolution-switcher) + [videojs-contrib-hls](https://github.com/videojs/videojs-contrib-hls) + [videojs-youtube](https://github.com/videojs/videojs-youtube)
11+
基于 [video.js](https://github.com/videojs/video.js) + [videojs-resolution-switcher](https://github.com/kmoskwiak/videojs-resolution-switcher) + [videojs-contrib-hls](https://github.com/videojs/videojs-contrib-hls) + [videojs-youtube](https://github.com/videojs/videojs-youtube) + [videojs-vimeo](https://github.com/videojs/videojs-vimeo)
1212

1313
> ### V2.4.5
1414
> ...
@@ -168,6 +168,23 @@ export default {
168168
}
169169
}
170170

171+
// vimeo - player config example
172+
export default {
173+
data () {
174+
return {
175+
videoOptions: {
176+
source: {
177+
type: "video/vimeo",
178+
src: "https://vimeo.com/167054481"
179+
},
180+
techOrder: ["vimeo"],
181+
autoplay: false,
182+
controls: false
183+
}
184+
}
185+
}
186+
}
187+
171188
//-------------------------------------------------------------
172189
// player state changed callback event
173190

@@ -228,7 +245,7 @@ export default {
228245
| height | Number | player height (default: 360) |
229246
| controlBar | Object | player controlBar dsipaly config | need to video.js api doc
230247
| language | String | player language(default: 'en') |
231-
| techOrder | Array | player support video type (default: example) | ['html5', 'flash', 'youtube'] |
248+
| techOrder | Array | player support video type (default: example) | ['html5', 'flash', 'youtube', 'vimeo'] |
232249
| customEventName| String | player state changed event name (default: example) | 'player-state-changed' |
233250

234251

@@ -244,6 +261,8 @@ export default {
244261

245262
[videojs-youtube](https://github.com/videojs/videojs-youtube)
246263

264+
[videojs-vimeo](https://github.com/videojs/videojs-vimeo)
265+
247266

248267
# Author Blog
249268
[Surmon](http://surmon.me)

examples/07-video.vue

Lines changed: 89 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,89 @@
1+
<template>
2+
<md-card>
3+
<md-card-actions v-md-ink-ripple>
4+
<div class="md-subhead">
5+
<span>Vimeo</span>
6+
</div>
7+
<md-button class="md-icon-button"
8+
target="_blank"
9+
href="https://github.com/surmon-china/vue-video-player/tree/master/examples/07-video.vue">
10+
<md-icon>code</md-icon>
11+
</md-button>
12+
</md-card-actions>
13+
<md-card-media>
14+
<div class="item">
15+
<div class="player">
16+
<video-player :options="videoOptions" ref="videoPlayer"></video-player>
17+
</div>
18+
<div class="codemirror">
19+
<codemirror v-model="code" :options="editorOption"></codemirror>
20+
</div>
21+
</div>
22+
</md-card-media>
23+
</md-card>
24+
</template>
25+
26+
<script>
27+
const code =
28+
`<template>
29+
<video-player :options="videoOptions"></video-player>
30+
</template>
31+
32+
<script>
33+
export default {
34+
data() {
35+
return {
36+
videoOptions: {
37+
source: {
38+
type: "video/vimeo",
39+
src: "https://vimeo.com/167054481"
40+
},
41+
defaultSrcReId: "low",
42+
techOrder: ["vimeo"],
43+
autoplay: false,
44+
controls: false
45+
}
46+
}
47+
}
48+
}
49+
<\/script>`
50+
export default {
51+
data() {
52+
return {
53+
code,
54+
editorOption: {
55+
tabSize: 4,
56+
styleActiveLine: true,
57+
lineNumbers: true,
58+
line: true,
59+
foldGutter: true,
60+
styleSelectedText: true,
61+
gutters: ["CodeMirror-linenumbers", "CodeMirror-foldgutter"],
62+
highlightSelectionMatches: { showToken: /\w/, annotateScrollbar: true },
63+
mode: 'text/x-vue',
64+
keyMap: "sublime",
65+
matchBrackets: true,
66+
showCursorWhenSelecting: true,
67+
theme: "base16-dark"
68+
},
69+
videoOptions: {
70+
source: {
71+
type: "video/vimeo",
72+
src: "https://vimeo.com/167054481"
73+
},
74+
defaultSrcReId: "low",
75+
techOrder: ["vimeo"],
76+
autoplay: false,
77+
controls: false,
78+
ytControls: true
79+
}
80+
}
81+
},
82+
computed: {
83+
player() {
84+
return this.$refs.videoPlayer.player
85+
}
86+
}
87+
}
88+
</script>
89+

index.js

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -21,6 +21,7 @@ var videoPlayer = {
2121
configs.switcher = configs.switcher !== undefined ? configs.switcher : true
2222
if (configs.hls) require('videojs-contrib-hls')
2323
if (configs.youtube) require('videojs-youtube')
24+
if (configs.vimeo) require('videojs-vimeo')
2425
if (configs.switcher) require('videojs-resolution-switcher')
2526
},
2627
install: function(Vue) {

package.json

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -30,6 +30,7 @@
3030
"dependencies": {
3131
"video.js": "^5.11.7",
3232
"videojs-youtube": "^2.1.1",
33+
"videojs-vimeo": "^2.0.2",
3334
"videojs-contrib-hls": "^3.6.0",
3435
"videojs-resolution-switcher": "^0.4.2"
3536
}

player.vue

Lines changed: 2 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -19,6 +19,7 @@
1919
default: function () {
2020
return {
2121
youtube: false,
22+
vimeo: false,
2223
switcher: true,
2324
hls: true
2425
}
@@ -58,6 +59,7 @@
5859
var configs = this.configs
5960
if (configs.hls) require('videojs-contrib-hls/dist/videojs-contrib-hls.js')
6061
if (configs.youtube) require('videojs-youtube')
62+
if (configs.vimeo) require('videojs-vimeo')
6163
if (configs.switcher) require('videojs-resolution-switcher')
6264
6365
// init

0 commit comments

Comments
 (0)