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

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

0576

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 文件在短代码前加载,一篇文章只能加一个视频短代码。

想实现更多的设置:访问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
温馨提示:本文最后更新于2022-05-12 08:48:45,某些文章具有时效性,若有错误或已失效,请在下方留言或联系乡野博文
您阅读这篇文章共花了: 0小时00分00秒
-----本页内容已结束,喜欢请分享!-----
© 版权声明
THE END
喜欢本站内容,请点【点赞】【分享】和【收藏】~
点赞6 分享
评论 抢沙发

请登录后发表评论