通过Vue+flvjs在HTML5中播放flv格式视频文件—demo及api

Posted 2022-02-10 1024_Byte

目前主流浏览器不能直接嵌入并且播放FLV文件，所以直接用video标签播放是行不通的。
因此提供两种解析方法

• 嵌入一个swf媒体播放文件，并利用该文件来播放你预设的文件。
  这里推荐dplayer——http://dplayer.js.org/zh/guide.html#flv（亲测同样好用）

• 利用B站开源的flv.js，通过将FLV文件流转换为ISO BMFF（Fragmented MP4）段，然后通过Media Source Extensions API 将mp4段提供给html5 元素。
  github地址：https://github.com/bilibili/flv.js

flv.js是支持在 HTML5 视频中播放 FLV 格式视频的 javascript 库。使用 ES6 编写的，如果低版本兼容需要通过 Babel编译一下

这里仅展示实现demo

安装

npm install --save flv.js 

元素

<template>
  <div>
	<video id="videoElement" controls autoplay muted width="300px" height="200px">
    </video>
	<button @click="play">播放</button>
  </div>
</template>

代码

import flvjs from 'flv.js'
export default 
  data () 
    return 
	  flvPlayer:null
    
  ,
   mounted() 
      if (flvjs.isSupported()) 
        var videoElement = document.getElementById('videoElement');
        this.flvPlayer = flvjs.createPlayer(
          type: 'flv',
		  isLive: true,
		  hasAudio: false,
          url: 'http://1011.hlsplay.aodianyun.com/demo/game.flv'
        );
        this.flvPlayer.attachMediaElement(videoElement);
        this.flvPlayer.load();
		this.flvPlayer.play();
      
    ,
    methods:
      play () 
        this.flvPlayer.play();
      
    

效果

Flv还包含了很多的方法和属性
https://gitee.com/mirrors/flv.js/blob/master/docs/api.md#flvjsissupported
这是码云的flv API文档可根据实际使用情况按需使用