Skip to content

Commit 04e998b

Browse files
author
surmon
committed
update
2 parents bd32458 + cb6e445 commit 04e998b

File tree

9 files changed

+153
-350
lines changed

9 files changed

+153
-350
lines changed

‎README.md

Lines changed: 94 additions & 317 deletions
Large diffs are not rendered by default.

‎examples/01-video.vue

Lines changed: 10 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -44,12 +44,17 @@
4444
return {
4545
// videojs options
4646
playerOptions: {
47+
height: '360',
48+
autoplay: true,
4749
muted: true,
4850
language: 'en',
4951
playbackRates: [0.7, 1.0, 1.5, 2.0],
5052
sources: [{
5153
type: "video/mp4",
52-
src: "https://cdn.theguardian.tv/webM/2015/07/20/150716YesMen_synd_768k_vp8.webm"
54+
// mp4
55+
src: "http://vjs.zencdn.net/v/oceans.mp4",
56+
// webm
57+
// src: "https://cdn.theguardian.tv/webM/2015/07/20/150716YesMen_synd_768k_vp8.webm"
5358
}],
5459
poster: "https://surmon-china.github.io/vue-quill-editor/static/images/surmon-1.jpg",
5560
}
@@ -105,7 +110,11 @@
105110
// player is ready
106111
playerReadied(player) {
107112
// seek to 10s
113+
console.log('example player 1 readied', player);
108114
player.currentTime(10)
115+
setTimeout(() => {
116+
this.$refs.videoPlayer.dispose();
117+
}, 5000)
109118
// console.log('example 01: the player is readied', player)
110119
}
111120
}

‎examples/02-video.vue

Lines changed: 7 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -39,10 +39,15 @@
3939
data() {
4040
return {
4141
playerOptions: {
42+
height: '360',
4243
autoplay: false,
4344
sources: [{
44-
type: "video/mp4",
45-
src: "http://vjs.zencdn.net/v/oceans.mp4"
45+
// mp4
46+
// type: 'video/mp4',
47+
// src: 'http://vjs.zencdn.net/v/oceans.mp4',
48+
// flv
49+
type: 'video/x-flv',
50+
src: 'http://fms.cntv.lxdns.com/live/flv/channel96.flv'
4651
}],
4752
language: 'zh-CN',
4853
techOrder: ['flash'],

‎examples/03-video.vue

Lines changed: 4 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -2,7 +2,7 @@
22
<md-card>
33
<md-card-actions>
44
<div class="md-subhead">
5-
<span>AudioTrack / 音轨</span>
5+
<span>AudioTrack && playsinline / 音轨 及 移动端不全屏</span>
66
</div>
77
<md-button class="md-icon-button"
88
target="_blank"
@@ -14,7 +14,8 @@
1414
<div class="item">
1515
<div class="player">
1616
<video-player class="vjs-custom-skin"
17-
:options="playerOptions"
17+
:options="playerOptions"
18+
:playsinline="true"
1819
@ready="playerReadied($event)"></video-player>
1920
</div>
2021
</div>
@@ -31,13 +32,13 @@
3132
data() {
3233
return {
3334
playerOptions: {
35+
height: '360',
3436
playbackRates: [0.7, 1, 1.3, 1.5, 1.7],
3537
sources: [{
3638
type: "video/mp4",
3739
src: "http://7xkwa7.media1.z0.glb.clouddn.com/sample_video_L"
3840
}],
3941
poster: "https://surmon-china.github.io/vue-quill-editor/static/images/surmon-3.jpg",
40-
height: 360
4142
}
4243
}
4344
},

‎examples/04-video.vue

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -40,6 +40,7 @@
4040
return {
4141
playerOptions: {
4242
// videojs and plugin options
43+
height: '360',
4344
sources: [{
4445
withCredentials: false,
4546
type: "application/x-mpegURL",

‎examples/05-video.vue

Lines changed: 2 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -27,12 +27,13 @@
2727
data() {
2828
return {
2929
playerOptions: {
30+
height: '360',
3031
sources: [{
3132
type: "rtmp/mp4",
3233
src: "rtmp://184.72.239.149/vod/&mp4:BigBuckBunny_115k.mov"
3334
}],
3435
techOrder: ['flash'],
35-
autoplay: true,
36+
autoplay: false,
3637
controls: true,
3738
poster: "https://surmon-china.github.io/vue-quill-editor/static/images/surmon-9.jpg"
3839
}

‎examples/nuxt-ssr-example/nuxt-ssr-example.vue

Lines changed: 6 additions & 6 deletions
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,7 @@
11
<template>
22
<section class="container">
3-
<div class="video-player-box"
3+
<div class="video-player-box"
4+
:playsinline="playsinline"
45
@play="onPlayerPlay($event)"
56
@pause="onPlayerPause($event)"
67
@ended="onPlayerEnded($event)"
@@ -21,12 +22,11 @@
2122
export default {
2223
data () {
2324
return {
25+
// component options
26+
playsinline: true,
27+
28+
// videojs options
2429
playerOptions: {
25-
// component options
26-
start: 0,
27-
playsinline: false,
28-
29-
// videojs options
3030
muted: true,
3131
language: 'en',
3232
playbackRates: [0.7, 1.0, 1.5, 2.0],

‎examples/nuxt-ssr-example/nuxt-video-player-plugin.js

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,5 +1,5 @@
11

22
import Vue from 'vue'
33

4-
const VueVideoPlayer = require('vue-video-player/ssr')
4+
const VueVideoPlayer = require('vue-video-player/dist/ssr')
55
Vue.use(VueVideoPlayer)

‎src/player.vue

Lines changed: 28 additions & 19 deletions
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,6 @@
11
<template>
2-
<div class="video-player">
3-
<video class="video-js"></video>
2+
<div class="video-player" v-if="reseted">
3+
<video class="video-js" ref="video"></video>
44
</div>
55
</template>
66

@@ -65,14 +65,11 @@
6565
globalOptions: {
6666
type: Object,
6767
default: () => ({
68-
autoplay: false,
69-
controls: true,
70-
preload: 'auto',
71-
fluid: false,
72-
muted: false,
73-
width: '100%',
74-
height: '360',
75-
language: 'en',
68+
// autoplay: false,
69+
// controls: true,
70+
// preload: 'auto',
71+
// fluid: false,
72+
// muted: false,
7673
controlBar: {
7774
remainingTimeDisplay: false,
7875
playToggle: {},
@@ -84,7 +81,7 @@
8481
}
8582
},
8683
techOrder: ['html5'],
87-
plugins:{}
84+
plugins: {}
8885
})
8986
},
9087
globalEvents: {
@@ -94,7 +91,8 @@
9491
},
9592
data() {
9693
return {
97-
player: null
94+
player: null,
95+
reseted: true
9896
}
9997
},
10098
mounted() {
@@ -115,11 +113,14 @@
115113
116114
// ios fullscreen
117115
if (this.playsinline) {
118-
this.$el.children[0].setAttribute('playsinline', this.playsinline)
119-
this.$el.children[0].setAttribute('webkit-playsinline', this.playsinline)
116+
this.$refs.video.setAttribute('playsinline', this.playsinline)
117+
this.$refs.video.setAttribute('webkit-playsinline', this.playsinline)
118+
this.$refs.video.setAttribute('x5-playsinline', this.playsinline)
119+
this.$refs.video.setAttribute('x5-video-player-type', 'h5')
120+
this.$refs.video.setAttribute('x5-video-player-fullscreen', false)
120121
}
121122
122-
// ios fullscreen
123+
// cross origin
123124
if (this.crossOrigin !== '') {
124125
this.$el.children[0].crossOrigin = this.crossOrigin
125126
this.$el.children[0].setAttribute('crossOrigin', this.crossOrigin)
@@ -141,11 +142,11 @@
141142
}
142143
143144
// videoOptions
144-
console.log('videoOptions', videoOptions)
145+
// console.log('videoOptions', videoOptions)
145146
146147
// player
147148
const self = this
148-
this.player = videojs(this.$el.children[0], videoOptions, function() {
149+
this.player = videojs(this.$refs.video, videoOptions, function() {
149150
150151
// events
151152
const events = [
@@ -186,13 +187,21 @@
186187
if (this.player.techName_ !== 'Flash') {
187188
this.player.pause && this.player.pause()
188189
}
189-
videojs(this.$el.children[0]).dispose()
190+
this.player.dispose()
191+
this.player = null
192+
this.$nextTick(() => {
193+
this.reseted = false
194+
this.$nextTick(() => {
195+
this.reseted = true
196+
})
197+
})
198+
/*
190199
if (!this.$el.children.length) {
191200
const video = document.createElement('video')
192201
video.className = 'video-js'
193202
this.$el.appendChild(video)
194203
}
195-
this.player = null
204+
*/
196205
}
197206
}
198207
},

0 commit comments

Comments
 (0)