本文主要是介绍基于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示例如下
<!DOCTYPE html>
<html lang="en"><head><meta charset="UTF-8" /><metaname="viewport"content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0"/><meta http-equiv="X-UA-Compatible" content="ie=edge" /><title>Document</title></head><body><div id="dplayer" style="height: 400px; width: 800px"></div></body>
</html>
<script src="flv.min.js"></script>
<script src="hls.min.js"></script>
<script src="DPlayer.min.js"></script>
<script>const dp = new DPlayer({container: document.getElementById('dplayer'),autoplay: true,volume: 0,video: {url: 'http://192.168.1.52:9002/live/3508.live.flv',type: 'flv',},// video: {// url: 'http://192.168.1.52:9002/live/3508/hls.m3u8',// type: 'customHls',// 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()// })// },// },// },})
</script>
几点说明: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
这篇关于基于DPlayer的原生flv和hls播放的文章就介绍到这儿,希望我们推荐的文章对编程师们有所帮助!