flv.js 是一个使用纯JavaScript编写的FLV(HTML5 Flash Video)播放器

原创

奥特慢更快 2023-04-09 20:27:42 博主文章分类：工作 ©著作权

文章标签 前端 css html ide 上传 文章分类 JavaScript 前端开发

©著作权归作者所有：来自51CTO博客作者奥特慢更快的原创作品，请联系作者获取转载授权，否则将追究法律责任

1、script引入

<script src="https://cdn.bootcdn.net/ajax/libs/flv.js/1.6.1/flv.js"></script>

<script src="https://cdn.bootcdn.net/ajax/libs/flv.js/1.6.1/flv.min.js"></script>

2、官方网站与文档

3、MuiPlayer

官网与相关文档

4、源码处理

使用说明

1、功能

FLV 容器，具有 H.264 + AAC 编解码器播放功能
多部分分段视频播放
HTTP FLV 低延迟实时流播放
FLV 通过 WebSocket 实时流播放
兼容 Chrome, FireFox, Safari 10, IE11 和 Edge
十分低开销，并且通过你的浏览器进行硬件加速
以上是官方的介绍，重点是开源让我们用了，谢谢B站的大神们

5、vue中使用

简书使用方法

第一步先下载flv.js

npm install --save flv.js

第二步引入

import flv from '/public/static/js/flv.min.js'

下面这个文件在百度网盘

flv.js 是一个使用纯JavaScript编写的FLV(HTML5 Flash Video)播放器_html

第三步准备一个容器

<video
      id="videoElementByFlv"
      class="flvplayer-app"
      controls
      autoplay
      muted
    ></video>

第四步逻辑部分

created() {
    this.init()
  },
  computed: {
  },
  methods: {
    init() {
      var that = this;
      // 在js中flv改为flvjs即可,flvjs是默认的参数
      if (flv.isSupported()) {
        setTimeout(function () {
          // 这里加了个200ms的定时器,原因是因为抓取元素之后vue无法瞬间响应
          var videoElement = document.getElementById('videoElementByFlv')
          that.flvPlayer = flv.createPlayer({
            url: "http://1011.hlsplay.aodianyun.com/demo/game.flv",
            type: 'flv',
          })
          that.flvPlayer.attachMediaElement(videoElement)
          that.flvPlayer.load()
        }, 200)
      }

    }