使用 WordPress 的短码来部署H5播放器Video.js，支持m3u8、MP4、WebM和Ogg格式。

header.php里引入videojs的css部分

<link href="https://cdn.bootcdn.net/ajax/libs/video.js/7.9.5/alt/video-js-cdn.min.css" rel="stylesheet">
// videojs的广告插件
<link href="https://cdn.bootcdn.net/ajax/libs/videojs-contrib-ads/6.7.0/videojs.ads.min.css" rel="stylesheet">

footer.php里引入videojs的js部分

<!-- videojs -->
<script src="https://cdn.bootcdn.net/ajax/libs/video.js/7.9.5/video.min.js"></script>
<!-- flash 用来兼容不支持html5的浏览器将会调用flash来播放-->
<script src="https://cdn.bootcdn.net/ajax/libs/videojs-flash/2.2.1/videojs-flash.min.js"></script>
<!-- videojs的广告插件 -->
<script src="https://cdn.bootcdn.net/ajax/libs/videojs-contrib-ads/6.7.0/videojs.ads.min.js"></script>

在主题的Functions.php 里添加以下代码，如果没有Functions.php可以自己创建一个。

add_shortcode('videojs',function($atts){
    extract(shortcode_atts(array(
        'hls' => '', // hls播放源 m3u8
        'webm' => '', // webm播放源
        'ogv' => '', //ogg播放源
        'mp4' => '', // mp4播放源
        'width' => '', // 宽度
        'controls' => '', // 控制按钮
        'preload' => 'auto', // 预加载
        'autoplay' => 'false', // 自动播放
        'loop' => 'false', // 循环
        'muted' => '', // 静音
        'poster' => '', // 封面
        'class' => '', // 可以用来设置皮肤
    ), $atts));
    if(empty($hls) && empty($webm) && empty($ogv) && empty($mp4))return __('you need to specify the src of the video file', 'videojs-html5-player');
    // poster 封面
    $poster = ' poster="'.$poster.'"';
    // source
    $source = '';
    // hls m3u8
    if(!empty($hls)) $source .= '<source src="'.$hls.'" type="application/x-mpegURL" />';
    // webm 格式
    if (!empty($webm)) $source .= '<source src="'.$webm.'" type="video/webm" />';
    // ogv 格式
    if (!empty($ogv)) $source .= '<source src="'.$ogv.'" type="video/ogg" />';
    // mp4 格式
    if (!empty($mp4)) $source .= '<source src="'.$mp4.'" type="video/mp4" />';

    // controls 控制按钮
    $controls = ($controls == "false") ? "" : "controls";
    // preload 预加载
    $preload = $preload == "metadata" ? 'preload="metadata"' : ($preload == "none" ? ' preload="none"' : ' preload="auto"');
    // autoplay 自动播放
    $autoplay = ($autoplay == "true") ? "autoplay" : "";
    // loop 循环播放
    $loop = ($loop == "true") ? "loop" : "";
    //muted
    $muted = ($muted == "true") ? "muted" : "";

    // custom style 默认皮肤样式class
    $output = <<<EOT
    <div class="videojs">
        <video id="container" class="video-js vjs-default-skin vjs-big-play-centered vjs-fluid " width="100%" height="auto" {$poster} {$controls} {$preload} {$autoplay} {$loop} {$muted} data-setup='{}'>
            $source
        </video>
    </div>
    EOT;
    return $output;
});

在写文章里调用：

[videojs poster="视频封面" hls="https://xxx.com/hls/test.m3u8"]
[videojs poster="视频封面" mp4="https://xxx.com/mp4/test.mp4"]