video.js播放rtmp视频

video.js趟坑经历

人生就得疯狂

13948人浏览 · 2022-03-01 15:35:39

人生就得疯狂 · 2022-03-01 15:35:39 发布

最近公司要求拉取某公司流媒体服务器的视频监控，并在web端页面播放，流媒体服务器发送的是rtmp格式视频流，经过网上查资料，最后敲定使用video.js

rtmp流需要依托flash播放，现在大多浏览器已经禁止使用flash,所以非必要不使用。

回顾我一个大后端在video.js道路上的心酸史，泪流满面！！！网上资料千篇一律，贼鸡巴坑。我也并不是很懂，现在把自己成功后的代码分享一下，希望能帮助哪怕一个人。


<div class="mc-cont">

        <div class="videoBox"  style="margin-bottom: 30px">
        <video
          id="myVideo1"
          controls
          class="vjs-default-skin vjs-big-play-centered vjs-16-9 video-js"
          preload="auto"
          style="width: 712px;height:320px;object-fit: fill"
        >
        </video>
      </div>

        <div class="videoBox"  style="margin-bottom: 30px">
          <video
            id="myVideo2"
            controls
            class="vjs-default-skin vjs-big-play-centered vjs-16-9 video-js"
            preload="auto"
            style="width: 712px;height:320px;object-fit: fill"
          >
          </video>
        </div>

        <div class="videoBox"  style="margin-bottom: 30px">
          <video
            id="myVideo3"
            controls
            class="vjs-default-skin vjs-big-play-centered vjs-16-9 video-js"
            preload="auto"
            style="width: 712px;height:320px;object-fit: fill"
          >
          </video>
        </div>

</div>

这是页面播放视频需要的video标签，我放了三个video,用来播放三个摄像头的画面

我前端使用vue,首先需要安装video.js

npm install video.js@5.6.0

安装完成后你的node_modules里会出现以下内容，video.js装5.x版本。（6.x版本剥离flash,还需安装video.js-flash）

  import videojs from 'video.js'
  import 'video.js/dist/video-js.css'

导入video.js及css

data() {
      return {
        list:[]    //这里用来存放视频地址
}


methods: {

OpenVideo(truckLicenseNo,type){
        //我这里是车牌号的一个点击事件，从后台获取拉取视频地址，这部分替换自己业务
        TruckService.PlayVideo({
            //车牌号
          truckLicenseNo: truckLicenseNo,

        }, (success) => {

          if (success) {
            //请求视频成功
            //判断打开全部或单个
            if (type==='all'){
               //list中push视频地址
              this.list.push( {
                  src:'rtmp://192.144.134.83:19350/live/015049488761_1',
                  id:1,
                },
                {
                  src:'rtmp://192.144.134.83:19350/live/015049488761_1',
                  id:2,
                },
                {
                  src:'rtmp://192.144.134.83:19350/live/015049488761_1',
                  id:3,
                }
              )
            }else if (type==='one'){
              // videojs("myVideo1").reset();
              this.list.push( {
                  src:'rtmp://192.144.134.83:19350/live/015049488761_1',
                  id:1,
                })
            }else if(type==='two'){
              // videojs("myVideo2").reset();
              this.list.push( {
                src:'rtmp://192.144.134.83:19350/live/015049488761_1',
                id:2,
              })
            }else{
              // videojs("myVideo3").reset();
              this.list.push( {
                src:'rtmp://192.144.134.83:19350/live/015049488761_1',
                id:3,
              })
            }

          //返回true,拉流播放视频
          //从这儿开始循环地址并初始化video.js
            this.list.map((item,i)=>{

              let myPlayer = videojs('myVideo'+item.id, {
                sources:[{
                  type: "rtmp/flv",
                  src:item.src
                }],
                //属性可以去查中文文档
                controls: true,
                //自动播放属性,muted:静音播放
                autoplay: true,
                preload: "auto",
                textTrackDisplay: false,
                errorDisplay: false,
                controlBar: false,
                bigPlayButton: false,

              });
              //这里是video.js的监听事件，视频播放中，我延迟3秒执行修改视频窗口的样式
              myPlayer.on("play", function(){

                this.timer = setTimeout(()=>{   //设置延迟执行
                  console.log('延时3秒放大窗口');
                  debugger;
                  let btns = document.getElementById('myVideo'+item.id+'_Flash_api')
                  btns.style.height = "320px"
                  btns.style.width = "712px"
                },3000);

              });
            })

          }

        });

      },
}

我在初始化时加了延迟修改样式，为了解决视频第一次打开画面不能铺满，非要放大再缩小才能铺满问题。如果遇到同样问题可以试试我的办法

let btns = document.getElementById('myVideo'+item.id+'_Flash_api') 获取的是video.js的视频加载后出现的dom,你可以自己看一眼就明白了。