在vue中接收rtmp視頻流並播放,切換視頻源
阿新 • • 發佈:2018-11-16
視頻 end this uid ack vue tex tro ready
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()
})
在vue中接收rtmp視頻流並播放,切換視頻源