在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流视频

是否可以在 Cesium 中显示 rtmp 直播视频?

开发直播网站,想在手机浏览器播放,用rtmp推流,但是手机浏览器无法接收rtmp,请问有啥好的方法吗

在vue项目中使用video.js实现视频播放和视频进度条打点

记:rtmp,rtsp,http视频流播放

vue视频播放 切换视频地址后还播放之前的路径视频