WordPress 主题集成DPlayer播放M3U8流媒体

PetitQ WordPress教程 2022-2-03 1.20K 0 0

M3U8 流媒体目前很流行，可将视频分割成多个部分，减轻服务器负担，加快播放速度，但很少看到有完整的 WordPress 主题集成播放 M3U8 流媒体的教程，这里写个简单的教程供参考。利用 DPlayer 播放组件，通过短代码简单实现 M3U8 流媒体视频播放。

section

使用方法

将解压后的 dplayer 文件夹上传添加到当前主题目录中，打开主题函数模板 functions.php 文件，在最后添加：

也想出现在这里？联系我们吧

    require get_template_directory() . '/dplayer/dplayer.php';

添加短代码

M3U8 视频短代码：

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

MP4 视频短代码：

    [mp4dplayer type="flv"]MP4视频地址[/mp4dplayer]

需要注意的是，要保证 dplayerJS 文件在短代码前加载，一篇文章只能加一个视频短代码。

想实现更多的设置：访问DPlayer 官网查看文档。

或者使用文章最后推荐的插件，添加多个视频地址，实现分集播放。

section

其实还是非常简单，加载相关 JS 脚本，通过短代码加载播放配置文件。

```
    // 加载所需DPlayer脚本
```
```
    function dplayer_scripts() {
```

    	wp_enqueue_script( 'DPlayer.min', get_template_directory_uri() . '/dplayer/DPlayer.min.js', array(), '', false);

    	wp_enqueue_script( 'hls.min', get_template_directory_uri() . '/dplayer/hls.min.js', array(), '', false);

    	wp_enqueue_script( 'flv.min', get_template_directory_uri() . '/dplayer/flv.min.js', array(), '', false);

```
    }
```

    add_action( 'wp_enqueue_scripts', 'dplayer_scripts' );

```
 
```
```
    // M3U8短代码
```

    add_shortcode( 'm3u8dplayer', 'm3u8dplayer_shortcode' );

    function m3u8dplayer_shortcode( $atts, $content = null ) {

    return "<div id='m3u8dplayer'></div>

```
    <script>
```
```
    const dp = new DPlayer({
```

    	container: document.getElementById('m3u8dplayer'),

```
    	video: {
```
```
    		url: '" . $content . "',
```
```
    		type: 'hls',
```
```
    	},
```
```
 
```
```
    	pluginOptions: {
```
```
    		hls: {
```
```
 
```
```
    		},
```
```
    	},
```
```
    });
```
```
    </script>";
```
```
    }
```
```
    // MP4短代码
```

    add_shortcode( 'mp4dplayer', 'mp4dplayer_shortcode' );

    function mp4dplayer_shortcode( $atts, $content = null ) {

```
    return "<div id='mp4dplayer'></div>
```
```
    <script>
```
```
    const dp = new DPlayer({
```

    	container: document.getElementById('mp4dplayer'),

```
    	video: {
```
```
    		url: '" . $content . "',
```
```
    		type: 'flv',
```
```
    	}
```
```
    });
```
```
    </script>";
```
```
    }
```

后附：中央电视台视频流地址，可用于测试。

```
CCTV1：
```

https://cctvalih5ca.v.myalicdn.com/live/cctv1_2/index.m3u8

```
CCTV2：
```

https://cctvalih5ca.v.myalicdn.com/live/cctv2_2/index.m3u8

```
CCTV3：
```

https://cctvalih5ca.v.myalicdn.com/live/cctv3_2/index.m3u8

```
CCTV4：
```

https://cctvalih5ca.v.myalicdn.com/live/cctv4_2/index.m3u8

```
CCTV5：
```

https://cctvalih5ca.v.myalicdn.com/live/cctv5_2/index.m3u8

```
CCTV6：
```

https://cctvalih5ca.v.myalicdn.com/live/cctv6_2/index.m3u8

```
CCTV7：
```

https://cctvalih5ca.v.myalicdn.com/live/cctv7_2/index.m3u8

```
CCTV8：
```

https://cctvalih5ca.v.myalicdn.com/live/cctv8_2/index.m3u8

```
CCTV10：
```

https://cctvalih5ca.v.myalicdn.com/live/cctv10_2/index.m3u8

```
CCTV11：
```

https://cctvalih5ca.v.myalicdn.com/live/cctv11_2/index.m3u8

```
CCTV12：
```

https://cctvalih5ca.v.myalicdn.com/live/cctv12_2/index.m3u8

```
CCTV13：
```

https://cctvalih5ca.v.myalicdn.com/live/cctv13_2/index.m3u8

```
CCTV15：
```

https://cctvalih5ca.v.myalicdn.com/live/cctv15_2/index.m3u8

```
CCTV16：
```

https://cctvalih5ca.v.myalicdn.com/live/cctv16_2/index.m3u8

```
CCTV17：
```

https://cctvalih5ca.v.myalicdn.com/live/cctv18_2/index.m3u8

WordPress 主题集成 DPlayer 播放 M3U8 流媒体

已有 299 人购买

永久更新：
演示数据：

立即购买

查看演示升级 VIP 立刻购买

炫酷企业建站作品展示WordPress中文模板

Supro - 极简电商网站模板WordPress汉化主题

Photon - 全屏摄影相册产品展示网站WordPress汉化主题

WordPress教程

WordPress 主题集成DPlayer播放M3U8流媒体

使用方法

添加短代码

WordPress 主题集成 DPlayer 播放 M3U8 流媒体

相关文章

WordPress 摘要添加字数统计功能

WordPress 给指定页面模板的页面增加自定义字段

WordPress 输出全部 tag 标签 URL，防止中文转码

发表回复取消回复

热销模板

WordPress教程

使用方法

添加短代码

WordPress 主题集成 DPlayer 播放 M3U8 流媒体

相关文章

发表回复 取消回复

热销模板

发表回复取消回复