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

一、使用方法

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

引入dplayer

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

添加短代码

M3U8 视频短代码：

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

MP4 视频短代码：

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

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

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

二、DPlayer 实现分集播放

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

其实还是非常简单，加载相关 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