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

教程
1086 6

写在前面

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

安装 DPlayer

npm

npm install dplayer --save

Yarn

yarn add dplayer

当然,我用的是CDN引入

<!-- css -->

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


<!-- javascript -->

    <script src="https://cdn.jsdelivr.net/npm/dplayer/dist/DPlayer.min.js"></script>

简单的例子

在较为充分的阅读了文档后你就会发现,其实是非常简单使用的,忘了贴文档地址了,待会放在末尾。

这是DPlayer给出的最简单的例子

<div id="dplayer"></div>

<script>
    const dp = new DPlayer({
    container: document.getElementById('dplayer'),
    video: {
        url: 'demo.mp4',
    },
});
</script>

挺简单的。

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

回到正题

我做这个的目的可不是为了解析mp4,我是为了解析m3u8来着。

那么ok 继续做。

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

Hls.js

    <script src="https://cdn.jsdelivr.net/npm/hls.js@latest"></script>

如下代码

image.png

确实如此哦!

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

简单修改一下

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

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

下载

在线演示:https://www.4z1.cn/dp/DPlayer.html

可以到这里下载

https://library.4z1.cn/Program/DPlayer_Demo.zip

参考文献

DPlayer:http://dplayer.js.org/zh

最后更新 2021-08-14
评论 ( 6 )
OωO
隐私评论
  1. cccc

    博主链接失效了,可以再补充下吗?

    1个月前回复
    1. @cccc

      点开演示站点https://www.4z1.cn/dp/DPlayer.html 右键查看源代码 复制粘贴即可,并没有使用到本地包

      1个月前回复
      1. cccc
        @Nice

        好的谢谢

        1个月前回复
  2. 博主您好,很高兴能学习到您的文章,想下载源码学习,但是链接好像失效了,方便邮箱发我一份嘛?我的邮箱:main@mainblog.cn

    1个月前回复
    1. @阁主博客

      辛苦等待一会儿 我翻翻源码

      1个月前回复
  3. 感觉挺不错的呢可以直接在浏览器内解析m3u8 (ฅ´ω`ฅ) 虽然我小白一个,不知道几时派用上场 xD
    另外看到博主使用用MDUI,我还是第一次看到,感觉很好看下!

    4个月前回复