WordPress集成DPlayer支持m3u8视频播放

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

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

Wordpress集成DPlayer支持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文件必须在短代码之前加载,不然会失效,

正常情况下一篇文章只能加入一个视频短代码,想插入多视视频的方法如下:

已经评论,立即刷新
加密内容,评论可见立即评论

文件下载

更多使用方法文档下载。

HTML5 // 1.26.0版本 // 448kb // 下载6次

晨岩, 姜辰Jcs.Moe, Boke.One, XI, Xi, 阿和, 威言威语, maqingxi, 老麦等人对本文发表了16条热情洋溢的评论。
  1. 晨岩说道: 0

    前段时间看直播找了一些m3u8的源,发现时间长了都不稳定,因为看得少就没再折腾了

    1. 老王说道:

      嗯,直播源还是找那些知名大平台的比较靠谱!

  2. 姜辰Jcs.Moe说道: 0

    看了半天,发现看不懂,但是总感觉很厉害。

    1. 老王说道:

      其实我也不懂,我只是个搬运工。😂

  3. Boke.One说道: 0

    牛的!

  4. Xi说道: 2

    大佬,V5
    再集成一个ffmpeg转m3u8就更好了。

    1. 老王说道:

      这个我需求暂时不大,你可以看下这个:https://www.itbkz.com/9321.html

      1. XI说道: 2

        和PC下一句话命令转化没啥区别

  5. 阿和说道: 5

    我只觉代码不认识我,我更不认识它。评论区都是牛人啊。

    1. 老王说道:

      高手在民间,你也不要谦虚~~

  6. 威言威语说道: 1

    公司屏蔽了西瓜、抖音、爱奇艺等一众视频网站域名,之前打开你博客的时候看到页面上报错,开始还以为引用视频的问题。

    1. 老王说道:

      不是吧,你们公司难道是有自己的视频网站吗?
      之前TX视频换服务器地址导致我这边视频全部挂了才换的西瓜,当时以为是我的网站问题!

  7. maqingxi说道: 1

    之前在知更鸟博客上看到介绍,也觉得挺有趣的,比如看个凤凰卫视。😝

    1. 老王说道:

      刚去看了下他的代码,好像弄的有点复杂,他每个类型分开写的。。。
      凤凰还是比较人性化些,不像咱们的CCA*V,引用过来竟然满屏马赛克😱

  8. 老麦说道: 1

    好久这个项目很久没有更新了,之前测试过一段时间。但搞了半天才发现自己用不上

    1. 老王说道:

      嗯,2年没更新了!我偶尔会用到!😊

gravatar头像

发表评论

您的电子邮箱地址不会被公开。