Loading
0

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

公众号搜索菜鸟站长之家 腾讯云服务器活动

教程前言:

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

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

怎么给WordPress 主题集成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://zmingcx.com/

文章声明:
1、本站文章来源于互联网,仅供学习交流使用,严禁用于商业用途,因此造成的一切法律后果自行承担。
2、本站不对文章内容的完整性和安全性负责,请自行辨别,如发现有问题,请及时联系我们进行处理。
3、如果你有比较好的文章需要发布,可以联系菜鸟站长之家小编,或者自行点击 投稿
4、若文章中有侵权或不适当内容,请留言告知我们,本站会第一时间进行处理。
5、转载请保留原文地址,违者后果自负,本站保留一切法律追责权力。
6、如遇下载地址失效,请留言告知或者联系客服获取。