如何在html中播放.flv格式的视频【vue和普通html皆可用】

前言

之前一直主要做微信小程序方面的内容，视频播放这块一直没怎么在意视频格式的问题，最近开发了一个律所的官网项目，涉及到大量flv格式的视频，让用户转成mp4工作量太大，所以就找了找，如何在html中播放.flv格式的视频。

正文

目前主流浏览器不能直接嵌入并且播放FLV文件，所以直接用video标签播放是行不通的，网上查了一下，发现有两种常用方法：

1. 借助一个html标签object,来嵌入一个swf媒体播放文件，并利用该文件来播放你预设的文件。
2. 利用B站开源的flv.js 通过将FLV文件流转换为ISO BMFF（Fragmented MP4）段，然后<video>通过Media Source Extensions API 将mp4段提供给HTML5 元素。

第一种方法

首先来说一下第一种方法，需要借助一个swf媒体播放文件，网上文章中大多数下载的媒体文件都不能正常工作（坑人啊），所以最后自己找了一个可用的上传到阿里云上，地址： swf播放器
.flv格式视频地址 下面代码中示例地址为 https://file.njshushuo.com/8d2164883f65d1f78180b3fcc159d282 。 实际开发时将其替换为自己的地址。附上代码：

<object
    classid="clsid:d27cdb6e-ae6d-11cf-96b8-444553540000"
    codebase="http://download.macromedia.com/pub/shockwave/cabs/flash/swflash.cab#version=9,0,0,0"
    width="640"
    height="480"
    id="VideoPlayer"
    align="middle"
  >
    <param name="allowScriptAccess" value="*" />
    <param name="allowFullScreen" value="true" />
    <param
      name="movie"
      value="./flvplayer.swf?video=https://file.njshushuo.com/8d2164883f65d1f78180b3fcc159d282&autoplay=true"
    />
    <param name="quality" value="high" />
    <param name="bgcolor" value="#ffffff" />
    <embed
      src="./flvplayer.swf"
      flashvars="vcastr_file=https://file.njshushuo.com/8d2164883f65d1f78180b3fcc159d282" 
      quality="high"
      bgcolor="#000000"
      width="500"
      height="380"
      name="VideoPlayer"
      align="middle"
      allowScriptAccess="*"
      allowfullscreen="true"
      type="application/x-shockwave-flash"
      pluginspage="http://www.macromedia.com/go/getflashplayer"
    />
  </object>

将html打开，果然.flv格式能够播放了，外观也挺不错。

放入vue项目中，却遇到了一个坑，那就是swf文件不能为相对路径，需要改成网络绝对路径，否则加载不到。
ok，大功告成！
然而这种方法主要是利用flash插件完成的，需要浏览器安装flash插件，而对于普通用户而言：

1. 安装flash困难
2. 如果禁用了flash，再次开启也存在一定的困难。

另外，flash播放还存在 稳定性 和cpu占用率高的缺点。同时，由于该项目支持移动端，而移动端并没有flash插件，所以只能放弃第一种方法

第二种方法

然后开始研究flv.js, 附上B站flv.js的github地址 https://github.com/Bilibili/flv.js

简介

flv.js是bilibili网站开源的使用纯JavaScript而不使用Flash编写的HTML5 Flash视频（FLV）播放器。通过将FLV文件流转换为ISO BMFF（Fragmented MP4）段，然后<video>通过Media Source Extensions API 将mp4段提供给HTML5 元素。
flv.js用ECMAScript 6编写，由Babel Compiler编译成ECMAScript 5 ，并与Browserify捆绑在一起。

优势

• 带有H.264 + AAC / MP3编解码器播放的FLV容器
• 多部分分段视频播放
• HTTP FLV低延迟直播流播放
• FLV 通过 WebSocket 实时流播放
• 兼容Chrome，FireFox，Safari 10，IE11和Edge
• 极低的开销，以及浏览器加速的硬件！

附上代码

<script src="flv.min.js"></script>
<video id="videoElement"></video>
<script>
    if (flvjs.isSupported()) {
        var videoElement = document.getElementById('videoElement');
        var flvPlayer = flvjs.createPlayer({
            type: 'flv',
            url: 'http://example.com/flv/video.flv'
        });
        flvPlayer.attachMediaElement(videoElement);
        flvPlayer.load();
        flvPlayer.play();
    }
</script>

将其放在vue项目中， 通过 npm install flv.js引入 flv.js，创建一个mvideo组件，代码如下：

<template>
  <div class="video">
    <video
      class="video-component"
      ref="videoElement"
      controls
      autoplay
    >Your browser is too old which doesn't support HTML5 video.</video>
  </div>
</template>
<script>
import flvjs from "flv.js";
export default {
  name: "Video",
  props: {
    types: {
      type: String,
      default: "flv"
    },
    url: {
      types: String,
      default: ""
    }
  },
  data() {
    return {
      flvPlayer: null
    };
  },
  watch: {
    url() {
      if (this.flvPlayer) {
        this.flvPlayer.detachMediaElement();
        this.flvPlayer.destroy();
      }
      this.createVideo();
    }
  },
  mounted() {
    this.$nextTick(() => {
      this.createVideo();
    });
  },
  methods: {
    createVideo() {
      const videoElement = this.$refs.videoElement;
      this.flvPlayer = flvjs.createPlayer({
        type: this.types,
        url: this.url
      });
      this.flvPlayer.attachMediaElement(videoElement);
      this.flvPlayer.load();
    }
  }
};
</script>

使用：<w-video :url="imgUrl + item.videoFileId" :types="item.videoFileType" />

flv.js的缺点在于 需要知道该资源的文件类型，在createPlayer时，传入type

switch (mds.type) {
	case 'flv':
    	return new FlvPlayer(mds, optionalConfig);
	default:
    	return new NativePlayer(mds, optionalConfig);
}

文末

好了，两种方法都介绍完了，总体而言，第一种方法需要flash插件，稳定性和cpu占用率高，且不支持移动端。第二种方法则需要提前知道视频的格式，具体怎么选择就要根据自己的项目抉择了。