如何在vue中使用flv.js在本地测试http-flv播放

在网上找了很久可以直接用来测试播放的flv格式流地址，都没找到能用的，于是自己搞了个flv流来测试，以下就是如何自己搭建flv流的具体步骤，记录一下。

1.安装ffmpeg

从ffmpeg官网下载ffmpeg安装包
具体安装步骤可参考以下文章：
基于EasyDarwin和ffmpeg推流和拉流rtsp

2.安装python

安装步骤参考：Python安装教程（新手）

3.用python搭建一个http服务

以上环境安装完成后，win+r 输入cmd打开任务窗口，通过执行如下命令创建一个最简单的 HTTP 服务器：

python -m http.server

服务器默认监听端口是 8000，支持自定义端口号：

python -m http.server 9000

此时就是监听9000端口
在浏览器中输入http://localhost:8000可以看到文件夹目录。

4.ffmpeg将本地MP4转为flv格式视频

输入指令

ffmpeg.exe -re -i F:/video/30year.mp4 -c:v copy -c:a copy F:/video/30year.flv

注：指令中 F:/video/30year.flv 为输出flv格式视频流的地址，将这个地址跟 start.py 放在同一个目录下。

此时就得到了可以播放的flv视频地址：http://localhost:8000/30year.flv

此时在浏览器中播放会报错

这是由于跨域问题引起的，因此，我们需要修改 HTTP 静态服务的属性，让其允许跨域访问。创建一个 python 脚本，命名为 start.py，内容如下：

#!/usr/bin/env python
try:
    # Python 3
    from http.server import HTTPServer, SimpleHTTPRequestHandler, test as test_orig
    import sys
    def test (*args):
        test_orig(*args, port=int(sys.argv[1]) if len(sys.argv) > 1 else 8000)
except ImportError: # Python 2
    from BaseHTTPServer import HTTPServer, test
    from SimpleHTTPServer import SimpleHTTPRequestHandler

class CORSRequestHandler (SimpleHTTPRequestHandler):
    def end_headers (self):
        self.send_header('Access-Control-Allow-Origin', '*')
        SimpleHTTPRequestHandler.end_headers(self)

if __name__ == '__main__':
    test(CORSRequestHandler, HTTPServer)

执行start.py

python start.py

以下贴上我的测试demo：
先安装flv.js

npm install flv.js

<template>
  <div class="wrapper">
    <video id="videoElement" controls autoplay muted width="800px" height="600px">
    </video>
  </div>
</template>
<script>
  import flvjs from "flv.js";
  export default {
    data() {
      return {
        player: null,
      }
    },
    mounted() {
        if (flvjs.isSupported()) {
          var videoElement = document.getElementById('videoElement');
          this.flvPlayer = flvjs.createPlayer({
            type: 'flv',
        isLive: true,
        hasAudio: false,
            url: 'http://localhost:8000/30year.flv' //测试地址
          });
          this.flvPlayer.attachMediaElement(videoElement);
          this.flvPlayer.load();
        this.flvPlayer.play();
        }
    },
    methods: {
     
    },
    beforeDestroy() {
      // 播放器存在清除播放器
      if (this.player) {
         this.player.destroy()
       }
    }
  }
</script>
<style scoped>
  .wrapper {
    width: 800px;
    height: 600px;
    margin: 100px 30px;
    overflow: hidden;
    position: relative;
  }
  .iframe {
    width: 1024px;
    height: 608px;
    position: absolute;
    top: -150px;
    left: -120px;
  }
</style>

页面运行结果：

成功播放啦

感谢大佬的文章：
flv.js 实现播放本地视频文件的技巧