WordPress集成DPlayer支持m3u8视频播放

楚客追梦

发布于 2022-11-11 19:41:16

2.9K00

代码可运行

文章被收录于专栏：网页杂谈网页杂谈

运行总次数：0

代码可运行

阳春三月，我们等来不是草长莺飞，也不是拂堤杨柳，而是居家工作和学习。不知不觉小王子在家上网课已有2周了，虽然现在没有2020年时的慌乱，但还是让我多了一些事，除了盯作业外，还有就是帮他找一些学习资源，只是现在好多网站的视频都是m3u8流媒体，下载下来某些视频软件不支持，另外发现本站也不支持m3u8播放。

通俗地理解就是，m3u8是一个视频的目录，让你的电脑(浏览器)按这个目录上的顺序一个个地下载视频分片，然后播放出来。可以很好的减轻服务器的负担，并加快播放加载速度。正常看m3u8是一个完整的视频，实际上它是由多个小视频文件组成的，只要拿到m3u8的链接，就相当于有了一个目录，我们只需要使用工具按这个目录下载，就可以下载到我们需要的视频。

今天无意在GitHub上发现了这个视频播放器，而且看到支持很多格式，于是决定移植到本站上。

DPlayer简介

DPlayer是采用MIT许可的开源项目，使用完全免费。官方介绍是一款可爱的HTML5弹幕视频播放器。 DPlayer播放器支持弹幕，音量调节，后期的弹幕设置以及放大缩小屏幕等操作

使用方法

1.引入js文件

html

<script src="https://cdn.jsdelivr.net/npm/dplayer/dist/DPlayer.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/flv.js/dist/flv.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/hls.js/dist/hls.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/dashjs/dist/dash.all.min.js"></script>
<script src="https://cdn.jsdelivr.net/webtorrent/latest/webtorrent.min.js"></script>

第1个文件必备，后面四个文件针对不同的格式视频，根据自己需要加入。当然也可以下载到自己服务器主题文件夹内引用。

不同视频格式和类型对应的js文件可以参考官方文档：

https://dplayer.js.org/guide.html#options

2. 打开主题函数模板functions.php，在最后加入以下代码：

php

function dplayer($atts, $content = null ) {
extract(shortcode_atts(array("type"=>'hls'),$atts));
return '
<div id="dplayer"></div>
<script>
    const dp = new DPlayer({
    container: document.getElementById("dplayer"),
    autoplay: false,
    video: {
        url: "'.$content.'",
        type: "'.$type.'",
    },
    pluginOptions: {
        '.$type.': { },
    },
});
</script>';
}
add_shortcode('dplayer', 'dplayer');

3. 编辑文章时添加以下短代码

mp3音频短代码：

php

[dplayer type="auto"]MP3音频地址[/dplayer]

m3u8视频短代码：

php

[dplayer type="hls"]M3U8视频流地址[/dplayer]

mp4视频短代码：

php

[dplayer type="flv"]mp4视频地址[/dplayer]

js文件必须在短代码之前加载，不然会失效，

本文参与腾讯云自媒体同步曝光计划，分享自作者个人站点/博客。

如有侵权请联系 cloudcommunity@tencent.com 删除

php

云点播

html

本文分享自作者个人站点/博客前往查看

如有侵权，请联系 cloudcommunity@tencent.com 删除。

本文参与腾讯云自媒体同步曝光计划，欢迎热爱写作的你一起参与！

php

云点播

html

登录后参与评论

0 条评论

热度