基于DPlayer的原生flv和hls播放

Part1前言

著名的hls.js和flv.js可以分别支持hls协议和flv协议的播放。两个库地址如下 https://github.com/bilibili/flv.js

https://github.com/video-dev/hls.js

但是我现在需要一个库同时支持hls和flv协议播放，这里推荐一个库DPlayer https://github.com/DIYgod/DPlayer

本文主要研究如何在纯html环境下，实现对其的使用。

Part2下载js文件

官网提供了npm的安装方法，没有提供js文件的下载。我们采用npm进行安装，之后拷贝出js文件。

npm install dplayer --save

然后再node_modules\dplayer\dist下拷贝出DPlayer.min.js。

由于其使用依赖于hls.js和flv.js。所以以同样的方法下载到其js文件。

最后组装进同一个工程

Part3播放视频

播放视频的html示例如下

  

几点说明：1、由于我们需要设置自动播放，所以需要将音量设置为0才可以以及自动播放设置为true

autoplay: true,
    volume: 0,

另外，这种方法对flv协议可以有用，但是对hls协议不行，我们针对hls协议采用自定义方法进行播放，示例如下

customType: {
    customHls: function (video, player) {
    const hls = new Hls()
    hls.loadSource(video.src)
    hls.attachMedia(video)
    hls.on(Hls.Events.MANIFEST_PARSED, function () {
    video.play()
    })
    },
    },

Part4总结

本文主要介绍了基于Dplayer的原生html播放hls和flv协议的方法。示例demo下载地址：https://download.csdn.net/download/g0415shenw/86847487