[其他] 今天来做一个简单的例子 DPlayer 播放器, 解析 m3u8/Flv/mp4/MPEG

[查看百度是否已收录]
悬剑 Lv.3 显示全部楼层 发表于 2021-8-16 21:41:55

写在前面


前几天刚好看到了个好玩的项目 Oneindex 是一个 OneDrive 的列表程序,挺好玩的,但是 m3u8 文件貌似播放不了,于是就想着怎么解决这个问题,然后找了找发现 DPlayer 能够解析,于是就简单记录了一下这个例子

安装 DPlayer


npm
npm install dplayer --save
Yarn
yarn add dplayer
当然,我用的是 CDN 引入
  1. <!-- css -->

  2.     <link class="dplayer-css" rel="stylesheet" href="https://cdn.jsdelivr.net/npm/dplayer/dist/DPlayer.min.css">


  3. <!-- javascript -->

  4.     <script src="https://cdn.jsdelivr.net/npm/dplayer/dist/DPlayer.min.js"></script>
复制代码
简单的例子在较为充分的阅读了文档后你就会发现,其实是非常简单使用的,忘了贴文档地址了,待会放在末尾。
这是 DPlayer 给出的最简单的例子
  1. <div id="dplayer"></div>

  2. <script>
  3.     const dp = new DPlayer({
  4.     container: document.getElementById('dplayer'),
  5.     video: {
  6.         url: 'demo.mp4',
  7.     },
  8. });
  9. </script>
复制代码
挺简单的。
1.jpg

对了 demo.mp4 的地址自己换自己的哈

回到正题


我做这个的目的可不是为了解析 mp4,我是为了解析 m3u8 来着。
那么 ok 继续做。
2.jpg

DPlayer 文档中,如果你加载了 hls.js 这个 js 的话,那么你是可以解析 m3u8 的文件的,那么好,我们来试试。

Hls.js
  1.     <script src="https://cdn.jsdelivr.net/npm/hls.js@latest"></script>
复制代码

3.jpg

确实如此哦!
4.jpg

当然,你的 m3u8 文件里面得有切片地址。

简单修改一下


当然其实这样看其实不咋地,我们简单的修改一下,只需要一点点 css 基础。
5.jpg

然后我又加了点能支持的格式,大家可以自行研究

下载


在线演示:https://www.4z1.cn/dp/DPlayer.html
可以到这里下载:
https://library.4z1.cn/Program/DPlayer_Demo.zip

参考文献
DPlayer:http://dplayer.js.org/zh





上一篇:外卖cps源码 外卖侠
下一篇:一款简洁大气的个人主页源码【全解】
回复

使用道具 举报

发表回复

您需要登录后才可以回帖 登录 | 立即注册

本版积分规则

  • 返回顶部

  • 快速回复 返回顶部 返回列表