美文网首页
vue中播放flv格式视频(b站flv.js的使用)

vue中播放flv格式视频(b站flv.js的使用)

作者: 羊羊羊0703 | 来源:发表于2020-03-31 17:37 被阅读0次

    flv.js是什么?

    flv.js就是由 bilibili 网站开源的 HTML5 Flash 视频(FLV)播放器,纯原生 JavaScript 开发(ECMAScript 6 编写) ,没有用到 Flash。它的工作原理是 Flv.js 在 JavaScript 中流式解析 flv 文件流,并实时转封装为 fmp4 ,通过 Media Source Extensions 喂给浏览器,实现了 FLV 格式视频的播放。

    flv.js的特点:

    具有H.264 + AAC / MP3编解码器播放功能的FLV容器
    多段分段视频播放
    HTTP FLV低延迟实时流播放
    通过WebSocket进行FLV实时流播放
    与Chrome,FireFox,Safari 10,IE11和Edge兼容
    极低的开销,浏览器可以加速硬件!

    flv.js使用步骤

    1、准备一个flv格式的视频
    我的文件,关于分片上传可参考 vue中使用Plupload分片上传

    flv格式视频
    2、下载flv.js
    npm install --save flv.js
    3、引用
    import flvjs from 'flv.js'
    我之前是引用了这个 但是直接导致了ie11进不去报错“语法错误”,所以我换成了下面的引用
    import flvjs from 'flv.js/dist/flv.min.js'
    4、使用
    if (flvjs.isSupported()) {
      var videoElement = document.getElementById('videoElement')
      var flvPlayer = flvjs.createPlayer({
        type: getFileSuffix(row.fileName),
        url: this.getCurrectUrl(row.issueUrl.substr(1))
      })
      flvPlayer.attachMediaElement(videoElement)
      flvPlayer.load()
      flvPlayer.play()
    }
    
    

    相关文章

      网友评论

          本文标题:vue中播放flv格式视频(b站flv.js的使用)

          本文链接:https://www.haomeiwen.com/subject/qncguhtx.html