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
文章標題:WordPress 主题集成DPlayer播放M3U8流媒体
文章連結:https://www.wuyanshuo.cn/670.html
更新時間:2022年4月3日
1、本站所有資源均不添加推廣檔案或浮水印,壓縮包內若有廣告檔案和浮水印請勿輕易相信。
2、本站資源均為兩層壓縮,第一層7z(尾碼若為wys,請自行修改為7z)有解壓密碼; 第二層zip或cbz,無解壓密碼,可直接使用漫畫類軟件程式查看; 詳情可參攷解壓教程。
3、本站大部分內容均收集於網絡! 若內容侵犯到您的權益,請發送郵件至:admin#wysacg.top我們將第一時間處理! 資源所需價格並非資源售賣價格,是收集、整理、編輯詳情以及本站運營的適當補貼,並且本站不提供任何免費技術支援。 所有資源僅限於參攷和學習,版權歸原作者所有!