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

想实现更多的设置:访问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>"; }

后附:中央电视台视频流地址,可用于测试

原文链接:https://blog.csdn.net/cnpinpai/article/details/128537957?ops_request_misc=%257B%2522request%255Fid%2522%253A%2522171852351316777224461445%2522%252C%2522scm%2522%253A%252220140713.130102334.pc%255Fblog.%2522%257D&request_id=171852351316777224461445&biz_id=0&utm_medium=distribute.pc_search_result.none-task-blog-2~blog~first_rank_ecpm_v1~times_rank-23-128537957-null-null.nonecase&utm_term=wordpress%E4%B8%BB%E9%A2%98

© 版权声明
THE END
喜欢就支持一下吧
点赞8 分享