用了 video.js
import videojs from 'video.js'
import 'video.js/dist/video-js.css'
data () {
return {
player: null,
watchMaxTime: 0
}
},
getInitVideo () {
this.$nextTick(() => {
const _this = this
this.player = videojs(this.$refs.videoPlayer, {
// 预加载
// 自动播放 默认值false
// autoplay : false,
// 控制栏
controls: true,
language: 'zh-CN', // 设置语言
muted: false, // 是否静音
height: '100%',
width: '100%',
preload: 'auto'
}, function onPlayerReady () {
// 这里绑定事件
const myPlayer = this
// 绑定 播放时间改变事件
myPlayer.on('play', function () {
console.log('播放')
})
myPlayer.on('pause', function () {
console.log('暂停')
})
myPlayer.on('ended', function () {
console.log('结束')
})
myPlayer.on('loadedmetadata', () => {
const val = _this.currentitem.play_status !== 1 ? _this.currentitem.process : 0 // 设置之前的播放进度
myPlayer.play()
myPlayer.currentTime(val)
})
myPlayer.on('timeupdate', function () {
const time = myPlayer.currentTime()
if (time > _this.watchMaxTime) {
_this.watchMaxTime = _this.currentitem.process > time ? _this.currentitem.process : time // 设置最大可播放时间
} else {
_this.watchMaxTime = _this.currentitem.process // 设置最大可播放时间为之前已经播放到的进度
}
})
})
videojs.use('*', function (player) {
return {
setCurrentTime: function (time) {
const { play_status } = _this.currentitem
// 快进 值比最大观看点的大 则跳转至最大观看点
let val = time
if (time > _this.watchMaxTime && play_status !== 1) {
val = _this.watchMaxTime
}
return val
}
}
})
})
},
