在vue中接收rtmp视频流并播放,切换视频源
Posted awei4home
tags:
篇首语:本文由小常识网(cha138.com)小编为大家整理,主要介绍了在vue中接收rtmp视频流并播放,切换视频源相关的知识,希望对你有一定的参考价值。
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视频流并播放,切换视频源的主要内容,如果未能解决你的问题,请参考以下文章
videojs修改播放器样式并实现四路动态播放rtmp流视频
开发直播网站,想在手机浏览器播放,用rtmp推流,但是手机浏览器无法接收rtmp,请问有啥好的方法吗