M3U8 流媒体目前很流行，可将视频分割成多个部分，减轻服务器负担，加快播放速度，但很少看到有完整的 WordPress 主题集成播放 M3U8 流媒体( 6 b d [ 4 v x V的教程，这里写个简单的教程供d O ~参考。利用 DPla8 g [ t / i _yer 播放组件，通过短代码{ a E简单实现 M3U8 流媒体视频播x 1 ` 8放。
使用方法
将解压后的 dplayer 文件夹上传添加到当前主题目录中，打开主题函p 0 y A V L数模板 functions.php 文件，在最后添加：
- require get_templateR + | 9 g 4_directory() . '/dplayer/dplayer.php';
添加短代码
M3U8 视频短代码：
- [m3u8dplayer type="hls"]M3U8视频流地址[/m3u8dplayer]
MP4 视频短代码：
- [mp4dplayer type="flv"]MP4视频地址[/mp4dplayer]
需要注意的是，要保证 dplayerJS 文件在短代码前加载，一篇文章只能加一个视频短代码。
想实@ Y r b现更多的设置：访问DPlayer 官网 查看文档。
或者使用文章最后推荐的插件，添加多个! B h y [ @ @ /视频地址，实现分集播放。
其实还是非常简单，加载相关 JS 脚本，通过短代码加载播放配置文件。
- // 加载所需DPlayer脚本
- function dplayer_scripts() Q X ! #123;
- wp_enqueue_script( 'DPlayer.min', get_template_directory_uri() . '/dplayer/DPlayer.min.js', array(), ''p V ) ? ] L, falsn $ L i / ke);
- wp_enqueue_script( 'hls.minS 8 6 a b .', get_template_directory_uT a | n Tri() . '/dplayer/hls.min.js', array(), '', false);
- wp_enqueu% ~ a v o m U & 0e_scriptK E & } T G { c0; 'flv.min', get_template_directory_uri() . '/dplayer/flv.min.js', array(), '', false);
- }
- add_action( 't c @ g ` u Nwp_enqueue_scripts', 'dpX 0 { i m # , flayer_scripts' );
- // M3U8短代码
- add_shortcode( 'm3u8dplayer', 'm3u8dplayer_shortcode' );
- function m3u8dplayer_shortcode( $atts, $contentj 1 [ F m = null ) {
- return "<div id='m3u8d1 { / !player'>&+ u \ /lt;/div>
- <script&gx s V ] j ^t;
- const dp = new DPlayer({
- container: document.getElementById('m3u8dp2 v f j ,layer'),
- video: {
- url: '" . $content . "',
- type: 'hls',
- },
- plugin2 O s | Q %Options: {
- hls: {
- },
- },
- });
- </scrig z K 1 Spt>"S I ^ N F | m;
- }
- // MP4短代码
- add_shortcodh F \ { b q E ge( 'mp4dplayer', 'mp4dplayer_shortcode' );
- function mp4dpC D 8 o ^ e X Klayer; M j & }_shortcode* q \ R d N s = 0( $atts, $content = nf 7 $ 8 - | k \ 0ull A Z o m1; {( \ d Q % A u k
- return "<div id='mp4dpq ` : G ^ alayer'></div>
- <script>
- const dp =w J Y y T 2 A new DPlayer({
- contain+ z f i Ber: docum) u cent.gez | V c :tEleme~ L v Y { ; ontBL A h R ! X _yId('mp4dplayer'),
- video: {
- url: 'R / N 7 !" . $content . "',
- typeq d - n: 'flv',
- }
- });
- </script>";
- }| W 8 P R I +;
后附：中央电视台视频流地址，可用于测试。
- CCTV1：
- https://cctvalih5ca.v.myalicdn.com/live/c2 y O * - E q Xctv1_2/index.m3u8
- CCTV2：
- https://cctvalih5ca.v.myalicdn.com/live/cctv2_2/indy | | Q : W ^ hex.m3u8
- CCTV3：
- https://cctvalih5ca.v.myalicdn.com/live/cctv3_2/index.m3u8
- CCTV4：
- https://cctvalih5ca.v.myalicdn.com/l| X M d ?ive/cctv4_2/ind| ! u y 6 A |ex.m3uU C - / P { o {8
- CCTV5：
- htte d p x ! 5ps://cctvalih5ca.v.myalicdn.com/live/cctv5_2/index.m3uV P N H V e B8
- CCTV6：
- httC p Xps://cctvalih5ca.v.myalicdn.com/live/cctv6_2/in\ 0 . H {dex.m3u8
- CCTV7：
- https://cctvalih5ca.v.myalicdn.com/live/cctv7_2/index.m3u8
- CCTV8：
- https://s C # \ #cctvalih5ca.v.myalicdn.com/live/cctv8_2/index? U $ V d.m3u8
- CCTV10：
- httpn 0 Y & Y As://cctvalih5ca.v.myalicdn.c. 6 g 9 / p I ~ kom/livI g a u k { W | 5e/cco * / 0 jtv10_2/index.m3u8
- CCTV11：
- https://ccH / | a @ m u Ttvalih5ca.v.myalicdn.com/live/cctv11_2/index.m3u8
- CCTV12：
- https://ccc / atvalih5ca.v.myalicdn.com/live/cctv12_2/index.m3u8
- CCTV13：
- https://cctvalih5ca.v.myalicdn^ q B O 7 @ ` m.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
