一个支持m3u8和flv的播放器

开发直播功能半年了，下面来说一下开发直播播放器的心得

技术栈： JS + TS + VUE

采用框架：video.js flv.js videojs-flvjs videojs-contrib-hls(可不用)

下面先说一下，m3u8 和 flv的区别 在PC端直播播放直播流时，推荐使用flv，移动端推荐使用m3u8，m3u8兼容性比flv好，在移动端可以兼容IOS flv的延迟比m3u8低，flv实测延迟4 - 8s之内，m3u8实测20 - 30s或者更久；

	下载对应模块
    yarn add video.js
    yarn add videojs-contrib-hls
    yarn add videojs-flvjs
    yarn add videojs-flvjs
    
    新建一个组件文件，video.vue，导入：
   	
    import video from "video.js/dist/video.min";
    const flvjs = require("flv.js/dist/flv.min");
    window.videojs = video;
    window.flvjs = flvjs;
    import "video.js/dist/video-js.min.css";
    
	**  注意事项，需要将flv,video对象绑定到window对象上  **
    
    ** HTML **
   	
    // 入参备注
    
  	@Prop({ default: "auto" }) preload!: String; // 预加载  auto 自动  metadata   none
  	@Prop({ default: true }) muted!: boolean; // 是否禁音
    @Prop({ default: true }) autoplay!: boolean; // 是否自动播放
    @Prop({ default: "" }) poster!: string; //封面
    
    <video
      id="video-dom"
      class="video-contents"
      :autoplay="autoplay"  // 是否自动播放
      :preload="preload"  // 
      :muted="muted"
      :poster="poster"
      :controls="false"
      ref="video"
    >
      <source :src="m3u8Url" :type="url.includes('flv') ? 'video/x-flv' : ''" />
    </video>
    
    // url.includes('flv') ? 'video/x-flv' : '' 此处需要判断类型，flv流请使用 video/x-flv 类型，否者会播放失败
    
    
    
   

** 需要注意的是，浏览器策略，有的浏览器会禁止自动播放并且播放声音，所以我们需要静音自动播放，或者用户点击触发播放 **

	JS部分代码
    
    
    // options 配置
    @Prop({
      default: () => {
        return {
          techOrder: ["html5", "flvjs"],
          bigPlayButton: false,
          textTrackDisplay: false,
          posterImage: true,
          errorDisplay: false,
          controlBar: true,
          controls: false,
        };
      },
    })
    options!: Object;
    
    // 初始化
    this.vid = video("video-dom", this.options);
    
    // 需要找到唯一的video播放器对象，否则后续自定义控制播放，暂停，设置音效会有问题；
    const video_dom: any = document.getElementsByTagName("video")[0];
    
    // video监听事件可以参考：
    https://blog.csdn.net/Q147351/article/details/106663908/
    
    例如：
    
    this.vid.on("canplay", () => {
      this.initPlay(); // 初始化播放 可以做一些loading处理等等
    });
    // 视频源加载错误
    this.vid.on("error", (err: any) => {
      console.log(err);
    });
    

** 异步处理播放问题 解决方案 **

1. 可以在组件中 v-if 判断是否有播放地址，有才显示
2. 切换视频源，可以通过一下方法重新设置视频源：

	const source = [
      {
        src: this.m3u8Url,
        withCredentials: false,
        type: this.m3u8Url.includes("flv") ? "video/x-flv" : "",
      },
    ];
    this.vid.src(source);
    this.vid.play();

** 章主要阐述实现支持m3u8 flv流播放功能，本人技术水平一般，有更好建议的小伙伴欢迎留言 **