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

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

利用DPlayer播放组件，通过短代码简单实现M3U8流媒体视频播放。

使用方法：

将解压后的dplayer文件夹上传添加到当前主题目录中：

打开主题函数模板functions.php文件，在最后添加：

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

编辑文章时添加短代码

M3U8视频短代码：
[m3u8dplayer type="hls"]M3U8视频流地址[/m3u8dplayer]
MP4视频短代码：
[mp4dplayer type="flv"]MP4视频地址[/mp4dplayer]
需要注意要保证dplayerJS文件在短代码前加载，一篇文章只能加一个视频短代码。

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

想要了解可以看看官方文章

点击前往

基本代码：

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

}

 播放器演示：

点击前往

附：中央电视台视频流地址

中央一套

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

中央六套

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

插件下载：

蓝奏盘

转载请注明来源：https://www.wakey.fit/2022/03/wordpress-dplayerm3u8.html

本文来自：菜鸟站长之家