m3u8格式的视频在网页上拥有更快的加载速度，但是HTML5的video标签只支持MP4/WebM和Ogg格式。最终，虫子菌为WordPress部署了在Github拥有25106个Star的Video.js播放器。
1.全局引入
1.1 CSS
打开wordpress主题目录，找到页首文件header.php，在/head标签前添加如下代码。
<link href="https://cdn.bootcss.com/video.js/7.5.4/video-js.min.css" rel="stylesheet">
1.2 JS
找到页脚文件footer.php，在/body标签前添加如下代码。
<script src="https://cdn.bootcss.com/video.js/7.5.4/video.min.js"></script>
video.js v6版本之前，播放基于HLS协议的m3u8视频需要引入video.min.js和videojs-contrib-hls.min.js两个JS文件，在v7版之后只引入video.min.js一个JS文件即可。
2.部署项目
打开主题functions.php文件，添加如下代码
//videojs/*WordPress部署H5播放器Video.js教程演示https://www.cccitu.com/4362.html*/function videojs_html5($atts) {extract(shortcode_atts(array( 'url' => '', 'webm' => '', 'ogv' => '', 'mp4' => '', 'width' => '', 'controls' => '', 'preload' => 'auto', 'autoplay' => 'false', 'loop' => 'false', 'muted' => '', 'poster' => '', 'class' => '',), $atts));if(empty($url)){ return __('you need to specify the src of the video file', 'videojs-html5-player');}//poster$poster = 'poster="'.$poster.'"'; //src$src = '<source src="'.$url.'" type="application/x-mpegURL" />';if (!empty($webm)) { $webm = '<source src="'.$webm.'" type="video/webm" />'; $src = $src.$webm;}if (!empty($ogv)) { $ogv = '<source src="'.$ogv.'" type="video/ogg" />'; $src = $src.$ogv;}if (!empty($mp4)) { $mp4 = '<source src="'.$mp4.'" type="video/mp4" />'; $src = $src.$mp4;}//controlsif($controls == "false") { $controls = "";}else{ $controls = " controls";}//preloadif($preload == "metadata") { $preload = ' preload="metadata"';}else if($preload == "none") { $preload = ' preload="none"';}else{ $preload = ' preload="auto"';}//autoplayif($autoplay == "true"){ $autoplay = " autoplay";}else{ $autoplay = "";}//loopif($loop == "true"){ $loop = " loop";}else{ $loop = "";}//mutedif($muted == "true"){ $muted = " muted";}else{ $muted = "";}//custom style$output = <<<EOT<video id="my-player" class="video-js vjs-default-skin vjs-big-play-centered vjs-fluid" width="100%" height="264"{$poster}{$controls}{$preload}{$autoplay}{$loop}{$muted} data-setup='{}'> $src</video>EOT;return $output;}add_shortcode('videojs','videojs_html5');
3.使用说明
3.1 添加方法
如果要播放m3u8格式的视频，只需要在文本模式下添加如下短代码，并将文字视频封面和视频地址改为你需要添加的信息
[videojs poster="视频封面" url="视频地址"]
如果要播放mp4/ogg和webm格式，就将代码中的url改为你要播放的格式，如播放mp4：
[videojs poster="视频封面" mp4="视频地址"]
3.2 参数说明
'url' => '','webm' => '','ogv' => '','mp4' => '','width' => '','controls' => '','preload' => 'auto','autoplay' => 'false','loop' => 'false','muted' => '','poster' => '','class' => '',
在functions.php添加的代码中，有如上部分，我们主要看以下几个参数
autoplay：
自动播放选项，true允许自动播放，false禁止自动播放，默认false，具体写法：
'autoplay' => 'true','autoplay' => 'false',
controls：
控制条选择，true显示控制条，false禁止显示控制条，默认true，具体写法：
'controls' => 'true', 'controls' => 'false',
loop：
循环播放选项， true视频播放结束后循环播放，false播放结束后禁止循环播放，具体写法：
'loop' => 'true', 'loop' => 'false',
muted：
静音选项， true默认静音播放，false默认非静音播放，具体写法：
'muted' => 'true','muted' => 'false',
preload：
预加载选项，auto自动判断，metadata加载视频长度，尺寸等元数据信息 ，none不预加载任何数据，直到用户点击开始播放才加载视频文件数据。
'preload' => 'auto','preload' => 'metadata','preload' => 'none',
注意事项
当使用m3u8格式视频时，需要注意跨域问题，如果视频网址和加载个视频网站的网址不一样，一定要在视频文件所在服务器或CDN上设置跨域。
允许所有网站引用
add_header Access-Control-Allow-Origin *;
将*改为具体的域名，则是仅允许该域名引用，如只允许cccitu.com引用
add_header Access-Control-Allow-Origin cccitu.com;