在vue和html中播放.flv格式的视频

借助一个html标签object,来嵌入一个swf媒体播放文件，并利用该文件来播放你预设的文件。下载链接

利用B站开源的flv.js 通过将FLV文件流转换为ISO BMFF（Fragmented MP4）段，然后<video>通过Media Source Extensions API 将mp4段提供给HTML5 元素。

一

需要借助一个swf媒体播放文件

.flv格式视频地址 下面代码中示例地址为 https://file.njshushuo.com/8d2164883f65d1f78180b3fcc159d282 。 实际开发时将其替换为自己的地址

<!-- 视频 
借助一个html标签object,来嵌入一个swf媒体播放文件，并利用该文件来播放你预设的文件
https://file.njshushuo.com/flvplayer.swf
-->
<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&IsAutoPlay=1&IsContinue=1"
		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>

参数名称	参数说明	默认值
vcastr_file	方法2传递影片flv文件地址参数，多个使用|分开	空
vcastr_title	影片标题参数，多个使用|分开，与方法2配合使用	空
vcastr_xml	方法3 传递影片flv文件地址参数，样板参考 http://www.ruochi.com/product/vcastr2/vcastr.xml	vcastr.xml
IsAutoPlay	影片自动播放参数：0表示不自动播放，1表示自动播放	0
IsContinue	影片连续播放参数：0表示不连续播放，1表示连续循环播	0
IsRandom	影片随机播放参数：0表示不随机播放，1表示随机播放	0
DefaultVolume	默认音量参数 ：0-100 的数值，设置影片开始默认音量大小	100
BarPosition	控制栏位置参数 ：0表示在上浮动显示，1表示在影片下方显示	0
IsShowBar	控制栏显示参数 ：0表示不显示；1表示一直显示；2表示鼠标悬停时显示；3表示开始不显示，鼠标悬停后显示	2
BarColor	播放控制栏颜色，颜色都以0x开始16进制数字表示	0x000033
BarTransparent	播放控制栏透明度	60
GlowColor	图标颜色，颜色都以0x开始16进制数字表示	0x66ff00
IconColor	悬停时光晕颜色，颜色都以0x开始16进制数字表示	0xFFFFFF
TextColor	文字颜色，颜色都以0x开始16进制数字表示	0xFFFFFF
LogoText	可以添加自己等信息(英文)	空
LogoUrl	可以从外部读取图片,注意自己调整logo大小,支持图片格式和swf格式	空
EndSwf	影片播放结束后,从外部读取swf文件，可以添加相关影片信息，影片分享等信息，需自己制作	空
BeginSwf	影片开始播放之前,从外部读取swf文件，可以添加广告，或者网站信息，需自己制作	空
IsShowTime	是否显示时间 : 0表示不显示时间，1表示显示时间	1
BufferTime	缓冲时间，单位（秒）	2

 

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

安装flash困难
如果禁用了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);
}