video.js 实现 RTMP 视频流播放

首先想说的是，video 太坑了。
其次想说的是，搜到的教程都没有完整可跑起来的 demo。
最后想说的是，遇到的坑搜到的解决方法都解决不了。

在这里贴个 demo，在 package.json 安装指定版本一定跑的起来。

package.json

//dependencies
"video.js": "^5.6.0",
"videojs-flash": "^2.2.0",
"videojs-swf": "^5.4.2",

webpack.base.conf.js

//module.rules
{
  test: /\.swf$/,
  loader: 'url-loader',
  options: {
    limit: 1024,
    name: 'file/[path][name].[hash7].[ext]'
  }
},

demo.vue

<template>
  <div style="width:100%;height:100%">
    <!-- 头 start -->
    <div style="width:100%;height:12%">

    </div>
    <!-- 头 end -->
    <!-- 内容 start -->
    <div style="width:100%;height:88%">
        <!-- 容器 start -->
        <div style="width:100%; height:100%">
          <!-- video start -->
          <div class="video" style="width:50%;height:80%;float:left">
            <!-- title -->
            <div style="text-align: center;">
              <h1> rtmp 视频</h1>
            </div>
            <!-- video -->
            <div style="width:90%;height:80%;margin:auto;margin-top:3%">
              <video 
                style="width:100%;height:100%"
                v-if="rtmp_address"
                id="player"
                class="video-js vjs-default-skin vjs-big-play-centered"
                preload="none"
                data-setup='{ "html5" : { "nativeTextTracks" : false }}'>
              </video>
            </div>
          </div>
          <!-- video end -->
        </div>
        <!-- 容器 end -->
    </div>
    <!-- 内容 end -->
  </div>
</template>

<script>
  import axios from '@/libs/api.request'
  import videojs from 'video.js'
  import 'video.js/dist/video-js.css'
  import 'videojs-flash'
  import SWF_URL from 'videojs-swf/dist/video-js.swf'
  videojs.options.flash.swf = SWF_URL

  export default {
    data() {
      return {
        // rtmp 地址
        rtmp_address: null,
        // 定时器ID, 用来检测 rtmp 地址是否准备好
        intervalId:null,
        // 视频播放器配置参数
        VideoOptions: {
          autoplay: true, // 是否自动播放
          muted: false, // 是否静音
          controls: false,
          fluid: false, // 宽高自适应
          // techOrder: ["flash"],
          sources: [{
              src: '',
              type: 'rtmp/flv'
          }]
        }
      }
    },
    computed:{},
    mounted(){
      this.getDetail()

      this.intervalId = self.setInterval(this.checkRtmpAdd, 100)
    },
    methods: {
      getDetail(){
        this.rtmp_address = "rtmp://58.200.131.2:1935/livetv/hunantv"
      },
      initVideo(rtmp_address){
        let _style = 'background:red;color:#fff;font-size:15px'
        let _c = "%c "
        console.log(_c + "----------> 视频流", _style);
        console.log(_c, _style, Date());

        this.VideoOptions.sources[0].src = rtmp_address

        console.log(_c, _style, "Video 配置参数:", this.VideoOptions);
        console.log(_c, _style, "Video rtmp:", this.VideoOptions.sources[0].src);

        console.log(_c, _style, "init Video");

        let _this = this
        this.videoPlayer = videojs('player', this.VideoOptions, function onPlayerReady() {
          console.log(_c, _style, 'success init Video!')
          
          this.on('play', function() {
              console.log(_c, _style, 'video play!')
          })

          this.on('pause', function() {
              console.log(_c, _style, 'video pause!')
          })

          this.on('ended', function() {
              console.log(_c, _style, 'video ended!')
          })
        })
      },
      checkRtmpAdd(){
        console.log("interval --> 检测 rtmp 地址: ", this.rtmp_address);
        if (this.rtmp_address){
          // 清除
          window.clearInterval(this.intervalId)
          // 初始化视频流
          this.initVideo(this.rtmp_address)
        }
      },
    }
  }
</script>

<style>
.el-divider {
    background-color:dodgerblue
}
</style>