vue环境
1、包
"video.js": "5.19",
"videojs-flash": "2.1.2"
2、html
<video id="my-player1" class="video-js vjs-default-skin vjs-big-play-centered" preload="auto" width="500" height="400" data-setup='{ "html5" : { "nativeTextTracks" : false } }'> </video>
3、js
data里放
options1: {
autoplay: true, // 是否自动播放
muted: false, // 是否静音
controls: false,
fluid: true, // 宽高自适应
sources: [{
src: 'rtmp://-----------------------',
type: 'rtmp/flv'
}]
}
mounted()中
this.player1 = videojs('my-player1', this.options1, function onPlayerReady() {
videojs.log('播放器已经准备好了!')
this.on('play', function() {
console.log('开始/恢复播放')
})
this.on('pause', function() {
console.log('暂停播放')
})
this.on('ended', function() {
console.log('结束播放')
})
})
this.player1.play()
切换视频源,踩了坑记录下,就下面几行代码:
this.player1 = videojs('my-player1', this.options1, function onPlayerReady() {
var player1 = this
player1.src({ src: 'rtmp://------------------', type: 'rtmp/flv' })
this.play()
})