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

写在前面

前几天刚好看到了个好玩的项目 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>

如下代码

确实如此哦！

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

简单修改一下

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

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

下载

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

可以到这里下载

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

参考文献

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