最开始用的是 CKplayer 因为盗版颜色视频网站等很多用它，知道的最早，官网有中文文档，也找到了配置代码，一把梭哈就干上了，CK 强在使用 Flash 播放，使用 H5 方式很多不支持，然后就是 Dplayer 半路捡了一个，一堆乱七八糟功能，花里胡哨小孩子行为，最强的弹幕之类看不懂不想看，本来就觉得弹幕是现代最脑残的设计之一，就类似当年吹 16:9 的电脑显示屏多棒一样。去年开始各大浏览器逐渐放弃 Flash 支持，版权管理一天天严格，也宣告CK彻底没落。

Video.js 大名早有耳闻，以前什么都看不懂，没看到手把手的教程就没去管它了。好像不支持 H.265 编码的视频，很多 IPTV 源也播放不了，还是有些遗憾。

首先载入JS和CSS文件

function guihet_theme_scripts() {
    wp_enqueue_style('style-videojs','https://vjs.zencdn.net/7.15.4/video-js.css', array(), '7.15.4');
    wp_enqueue_script('script-videojs','https://vjs.zencdn.net/7.15.4/video.min.js', array(), '7.15.4');
}
add_action( 'wp_enqueue_scripts', 'guihet_theme_scripts' );

如果资源要放在服务器本地就把 CDN 地址改为如下形式：

get_template_directory_uri().'/css/mycss/video-js.css'

创建一个短代码并增加Html编辑器按钮

//videojs - 黑鸟博客
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;
}
//controls
if($controls == "false") {
    $controls = "";
}
else{
    $controls = " controls";
}
//preload
if($preload == "metadata") {
    $preload = ' preload="metadata"';
}
else if($preload == "none") {
    $preload = ' preload="none"';
}
else{
    $preload = ' preload="auto"';
}
//autoplay
if($autoplay == "true"){
    $autoplay = " autoplay";
}
else{
    $autoplay = "";
}
//loop
if($loop == "true"){
    $loop = " loop";
}
else{
    $loop = "";
}
//muted
if($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('myvideojs','videojs_html5');
//添加HTML编辑器短代码按钮
function bolo_after_wp_tiny_mce($mce_settings) 
{  
?>  
        <script type="text/javascript">  
                QTags.addButton( 'qmyvideojs', 'videojs', '[myvideojs url=""]','[/myvideojs]' );
        </script>  
<?php
 }
add_action('after_wp_tiny_mce', 'bolo_after_wp_tiny_mce'); 

食用

如果要播放m3u8格式的视频，只需要在文本模式下添加如下短代码，并将视频地址改为你需要添加的信息。

[myvideojs url="视频地址"]

如果要播放mp4/ogg和webm格式，就将代码中的url改为你要播放的格式，如播放mp4：

[myvideojs mp4="视频地址" autopalyer="true"]

其他参数可选可以任意添加：

• poster=”” 填入播放器封面地址；
• autopalyer=”true” 表示载入页面后自动播放;
• ….

官方文档

示例：