|
|
@@ -16,20 +16,26 @@ export default {
|
|
|
return {
|
|
|
poster: videoPoster,
|
|
|
needPause: this.controls && !this.autoplay,
|
|
|
- paused: false,
|
|
|
+ paused: true,
|
|
|
loading: false,
|
|
|
+ waiting: false,
|
|
|
needReset: true
|
|
|
}
|
|
|
},
|
|
|
computed: {
|
|
|
statusIconClass () {
|
|
|
- if (this.loading) {
|
|
|
- return 'el-icon-loading'
|
|
|
- }
|
|
|
- if (this.needReset) {
|
|
|
- return 'el-icon-refresh'
|
|
|
+ switch (true) {
|
|
|
+ case this.loading:
|
|
|
+ return 'el-icon-loading'
|
|
|
+ case this.needReset:
|
|
|
+ return 'el-icon-refresh has-active'
|
|
|
+ case this.waiting:
|
|
|
+ return 'el-icon-loading has-active'
|
|
|
+ case this.paused:
|
|
|
+ return 'el-icon-video-play has-active'
|
|
|
+ default:
|
|
|
+ return 'el-icon-video-pause has-active'
|
|
|
}
|
|
|
- return this.paused ? 'el-icon-video-play has-active' : 'el-icon-video-pause has-active'
|
|
|
},
|
|
|
isPlaying () {
|
|
|
return !(this.loading || this.needReset || this.controls && this.paused)
|
|
|
@@ -48,19 +54,19 @@ export default {
|
|
|
},
|
|
|
playUrl (url) {
|
|
|
if (mpegtsjs.isSupported()) {
|
|
|
+ this.loading = true
|
|
|
this.needReset = false
|
|
|
- const player = mpegtsjs.createPlayer({
|
|
|
- type: 'flv',
|
|
|
- isLive: true,
|
|
|
- hasAudio: false,
|
|
|
- url
|
|
|
- })
|
|
|
- player.on(mpegtsjs.Events.ERROR, e => {
|
|
|
- console.log('mpegtsjs', mpegtsjs.Events.ERROR, e)
|
|
|
- this.destroyPlayer()
|
|
|
- })
|
|
|
-
|
|
|
try {
|
|
|
+ const player = mpegtsjs.createPlayer({
|
|
|
+ type: 'flv',
|
|
|
+ isLive: true,
|
|
|
+ hasAudio: false,
|
|
|
+ url
|
|
|
+ })
|
|
|
+ player.on(mpegtsjs.Events.ERROR, e => {
|
|
|
+ console.log('mpegtsjs', mpegtsjs.Events.ERROR, e)
|
|
|
+ this.destroyPlayer()
|
|
|
+ })
|
|
|
this.$player = player
|
|
|
this.onVideoWaiting()
|
|
|
player.attachMediaElement(this.$refs.video)
|
|
|
@@ -77,9 +83,10 @@ export default {
|
|
|
clearTimeout(this.$timer)
|
|
|
this.needReset = true
|
|
|
this.loading = false
|
|
|
+ this.waiting = false
|
|
|
+ this.paused = true
|
|
|
const player = this.$player
|
|
|
if (player) {
|
|
|
- this.paused = true
|
|
|
player.pause()
|
|
|
player.unload()
|
|
|
player.detachMediaElement()
|
|
|
@@ -149,7 +156,6 @@ export default {
|
|
|
this.paused = false
|
|
|
if (this.loading) {
|
|
|
this.loading = false
|
|
|
- clearTimeout(this.$timer)
|
|
|
if (this.needPause) {
|
|
|
this.$player.pause()
|
|
|
}
|
|
|
@@ -158,15 +164,17 @@ export default {
|
|
|
onVideoPause () {
|
|
|
console.log('onVideoPause')
|
|
|
this.paused = true
|
|
|
+ if (this.waiting) {
|
|
|
+ this.waiting = false
|
|
|
+ clearTimeout(this.$timer)
|
|
|
+ }
|
|
|
},
|
|
|
onVideoWaiting () {
|
|
|
console.log('onVideoWaiting')
|
|
|
- if (!this.loading) {
|
|
|
- this.loading = true
|
|
|
- }
|
|
|
+ this.waiting = true
|
|
|
clearTimeout(this.$timer)
|
|
|
this.$timer = setTimeout(() => {
|
|
|
- if (this.loading) {
|
|
|
+ if (this.loading || this.waiting) {
|
|
|
this.destroyPlayer()
|
|
|
this.$message({
|
|
|
type: 'warning',
|
|
|
@@ -177,8 +185,8 @@ export default {
|
|
|
},
|
|
|
onVideoPlaying () {
|
|
|
console.log('onVideoPlaying')
|
|
|
- if (this.loading) {
|
|
|
- this.loading = false
|
|
|
+ if (this.waiting) {
|
|
|
+ this.waiting = false
|
|
|
clearTimeout(this.$timer)
|
|
|
}
|
|
|
},
|