vue use video.js support flash rtmp

在 Vue 中使用 video.js，兼容 flash 视频，研究了一天，简单记录一下。 1.包安装

npm install --save videojs
npm install --save videojs-flash //如果需要用flash的话

2.实现 vue-video.vue 文件

<template>
  <div>
    <video ref="videoPlayer" class="video-js"></video>
  </div>
</template>

<script>
import videojs from 'video.js'
import 'videojs-flash'                                // if use flash
import SWF_PATH from 'videojs-swf/dist/video-js.swf'  // if use flash
import 'video.js/dist/video-js.min.css'

export default {
  props: {
    options: {
      type: Object,
      default() {
        return {}
      }
    }
  },
  data() {
    return {
      player: null
    }
  },
  mounted() {
    this.options.flash = {}           // if use flash
    this.options.flash.swf = SWF_PATH // if use flash
    this.player = videojs(this.$refs.videoPlayer, this.options)
  },
  beforeDestroy() {
    if (this.player) {
      this.player.dispose()
    }
  }
}
</script>

3.使用

<template>
  <div id="app">
    <vue-video :options="videoOptions" />
  </div>
</template>

<script>
import vueVideo from './path/to/vue-video.vue'

export default {
  name: 'App',
  components: {
    vueVideo
  },
  data() {
    return {
      // videoOptions标准参考 https://docs.videojs.com/
      videoOptions: {
        autoplay: true,
        controls: false,
        language: 'zh',
        width: 100,
        height: 200,
        sources: [
          {
            src: 'rtmp://*************/live/qq',
            type: 'rtmp/flv'
          }
        ]
        // techOrder: ['flash']
      }
    }
  }
}
</script>

rtmp、mp4 已测试没有问题，其他格式就没测试了。
需要发布才能进行测试，类似 file://C:/test.html 这种文件形式的是无法使用的

---

版权声明：
除非注明，本博文章均为原创，转载请以链接形式标明本文地址。

---