flv.js + vue 播放 .flv流媒体

flv是什么

• Flv.js 就是由 bilibili 网站开源的 HTML5 Flash 视频（FLV）播放器，纯原生 JavaScript 开发（ECMAScript 6 编写） ，未用到 Flash。
• Flv.js 在 js 中流式解析 flv 文件流，并实时转封装为 fmp4 ，通过 Media Source Extensions （媒体源扩展 API（MSE） 提供了实现无插件且基于 Web 的流媒体的功能。使用 MSE，媒体串流能够通过 JavaScript 创建，并且能通过使用 和 元素进行播放。），实现了 FLV 格式视频的播放。

flv 不支持 rtmp 与 rtsp 播放，均需要自转码为 .flv 或 http-flv

flv + vue 播放 .flv 视频流

• index.html 引入 ./flv.min.js
  • 可以 通过 npm install --save flv.js 下载后 找到 node_modules 里 flv 目录中flv.min.js
  • 也可以从 www.bootcdn.cn/flv.js/ 获取
• 创建测试页面

  <template>
    <el-col>
      <video id="videoElement" width="300px" height="200px"></video>
      <el-button @click="play">播放</el-button>
    </el-col>
  </template>
  
  <script>
    export default {
      name: "list",
      data () {
        return {
          flvPlayer: null
        }
      },
      mounted() {
        if (flvjs.isSupported()) {
          var videoElement = document.getElementById('videoElement');
          this.flvPlayer = flvjs.createPlayer({
            type: 'flv',
            url: 'http://1011.hlsplay.aodianyun.com/demo/game.flv'
          });
          this.flvPlayer.attachMediaElement(videoElement);
          this.flvPlayer.load();
        }
      },
      methods:{
        play () {
          this.flvPlayer.play();
        }
      }
    }
  </script>
  
  <style scoped>
  
  </style>
  

跨域报错 等问题 请优先 查看 issues 传送们