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

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

使用方法

将解压后的 dplayer 文件夹上传添加到当前主题目录中,打开主题函数模板 functions.php 文件,在最后添加:

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

添加短代码

M3U8 视频短代码:

  1. [m3u8dplayer type="hls"]M3U8视频流地址[/m3u8dplayer]

MP4 视频短代码:

  1. [mp4dplayer type="flv"]MP4视频地址[/mp4dplayer]

需要注意的是,要保证 dplayerJS 文件在短代码前加载,一篇文章只能加一个视频短代码。

想实现更多的设置:访问DPlayer 官网 查看文档。

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

其实还是非常简单,加载相关 JS 脚本,通过短代码加载播放配置文件。

  1. // 加载所需DPlayer脚本
  2. function dplayer_scripts() {
  3. wp_enqueue_script( 'DPlayer.min', get_template_directory_uri() . '/dplayer/DPlayer.min.js', array(), '', false);
  4. wp_enqueue_script( 'hls.min', get_template_directory_uri() . '/dplayer/hls.min.js', array(), '', false);
  5. wp_enqueue_script( 'flv.min', get_template_directory_uri() . '/dplayer/flv.min.js', array(), '', false);
  6. }
  7. add_action( 'wp_enqueue_scripts', 'dplayer_scripts' );
  8. // M3U8短代码
  9. add_shortcode( 'm3u8dplayer', 'm3u8dplayer_shortcode' );
  10. function m3u8dplayer_shortcode( $atts, $content = null ) {
  11. return "<div id='m3u8dplayer'></div>
  12. <script>
  13. const dp = new DPlayer({
  14. container: document.getElementById('m3u8dplayer'),
  15. video: {
  16. url: '" . $content . "',
  17. type: 'hls',
  18. },
  19. pluginOptions: {
  20. hls: {
  21. },
  22. },
  23. });
  24. </script>";
  25. }
  26. // MP4短代码
  27. add_shortcode( 'mp4dplayer', 'mp4dplayer_shortcode' );
  28. function mp4dplayer_shortcode( $atts, $content = null ) {
  29. return "<div id='mp4dplayer'></div>
  30. <script>
  31. const dp = new DPlayer({
  32. container: document.getElementById('mp4dplayer'),
  33. video: {
  34. url: '" . $content . "',
  35. type: 'flv',
  36. }
  37. });
  38. </script>";
  39. }

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

  1. CCTV1:
  2. https://cctvalih5ca.v.myalicdn.com/live/cctv1_2/index.m3u8
  3. CCTV2:
  4. https://cctvalih5ca.v.myalicdn.com/live/cctv2_2/index.m3u8
  5. CCTV3:
  6. https://cctvalih5ca.v.myalicdn.com/live/cctv3_2/index.m3u8
  7. CCTV4:
  8. https://cctvalih5ca.v.myalicdn.com/live/cctv4_2/index.m3u8
  9. CCTV5:
  10. https://cctvalih5ca.v.myalicdn.com/live/cctv5_2/index.m3u8
  11. CCTV6:
  12. https://cctvalih5ca.v.myalicdn.com/live/cctv6_2/index.m3u8
  13. CCTV7:
  14. https://cctvalih5ca.v.myalicdn.com/live/cctv7_2/index.m3u8
  15. CCTV8:
  16. https://cctvalih5ca.v.myalicdn.com/live/cctv8_2/index.m3u8
  17. CCTV10:
  18. https://cctvalih5ca.v.myalicdn.com/live/cctv10_2/index.m3u8
  19. CCTV11:
  20. https://cctvalih5ca.v.myalicdn.com/live/cctv11_2/index.m3u8
  21. CCTV12:
  22. https://cctvalih5ca.v.myalicdn.com/live/cctv12_2/index.m3u8
  23. CCTV13:
  24. https://cctvalih5ca.v.myalicdn.com/live/cctv13_2/index.m3u8
  25. CCTV15:
  26. https://cctvalih5ca.v.myalicdn.com/live/cctv15_2/index.m3u8
  27. CCTV16:
  28. https://cctvalih5ca.v.myalicdn.com/live/cctv16_2/index.m3u8
  29. CCTV17:
  30. https://cctvalih5ca.v.myalicdn.com/live/cctv18_2/index.m3u8

给TA打赏
共{{data.count}}人
人已打赏
WordPress教程

WordPress 滚动自动加载分页数据插件

2022-4-3 13:46:52

WordPress教程

WordPress 后台默认选项菜单重命名方法

2022-4-3 17:03:45

0 条回复 A文章作者 M管理员
    暂无讨论,说说你的看法吧
个人中心
购物车
优惠劵
今日签到
有新私信 私信列表
搜索