video视频直播总结（m3u8格式、flv格式）

1、视频播放标签video

• video属性和方法的可以在网上直接找，链接菜鸟教程
  如果是MP4格式的视频，可以用video标签直接播放，其属性可以直接用，这个格式视频一般是静态的资源，可能是本地也可能是服务器上。

<video class="video-img" :src="url" controls="controls"></video>//url即视频地址

2、video标签事件与方法

• 事件是可以直接放到video标签上进行监听，在视频播放过程中会执行相应事件。
• 方法是可以直接获取video元素，不管是原生的getElementById(),还是vue的this.$refs来让video元素执行方法，video标签的方法比较少，如图，其他的都是事件，事件比较多。
  

3、m3u8格式视频流播放

• 该格式需要安装videojs与video标签结合播放

//html代码
<video id="videoss" class="video-js vjs-default-skin" style="width: 100%;height: 100%" muted>
        <source :src="videoSrc" />
</video>
//js
import videojs from "video.js";//引入videojs
//在mounted中初始化
this.video = videojs(
      "videoss",
      {
        controls: false,//这些都是video标签的属性
        loop: true,
        autoplay: true,
        width: "100%",
        height: "100%",
        preload: "auto",
      },
      function () {
        this.play();
      }
    );

4、flv.js播放HTTP-FLV协议视频流

• 安装flvjs cnpm install --save flv.js
• 代码

<template>
    <div class="video">
        <video id="videoElement" class="centeredVideo" autoplay controls width="1024" height="576"></video>
  </div>
</template>
<script>
import flvjs from 'flv.js'
export default {
  data() {
    return {
      flvPlayer: null
    }
  },
  methods: {
    /**
     * @description 新建flv实例
     */
    createFlvPlayer() {
      if (flvjs.isSupported()) {
        const videoElement = document.getElementById('videoElement')
        this.flvPlayer = flvjs.createPlayer({
          type: 'flv',
          isLive: true,
          url: window.g.videoBaseUrl
        })
        
        this.flvPlayer.attachMediaElement(videoElement)
        this.flvPlayer.load()
        this.flvPlayer.play()
      }
    },

    /**
     * @description 停止混流播放并移除直播流抓取
     * (注：离开并重新进入当前路由，观察Network，可知该操作的必要性)
     */
    pausemix() {
      this.flvPlayer.pause()
      this.flvPlayer.unload()
      this.flvPlayer.detachMediaElement()
      this.flvPlayer.destroy()
      this.flvPlayer = null
    }
  },
  mounted() {
    this.createFlvPlayer()
  },
  beforeDestroy() {
    this.pausemix()
  }
}
</script>
<style lang="scss">
.video{
    height: 800px;
    width: 1920px;
}
</style>

5、总结

• 由于我的项目中从其他平台接入的是rtpm格式，这个格式需要flash插件，目前Chrome已经不支持。后台搭建了台服务器转格式，开始是转m3u8，但这个格式的实时性不好，有几秒的延时。后来改成flv协议了，不同的格式需要不同的播放器去解析。
• 刚刚开始我是有vue-video-player这个基于vue封装的video插件，这个插件是自己封装进度条（播放、暂停、音量、全屏切换、字幕、轨道），视频流的格式是基于videojs去封装的，对flvjs协议的视频流不兼容，就放弃用改插件了。