WordPress免插件部署H5视频音频播放器 video.js

[videojs_video url="http://189.xinxiu.com.cn/mov/001.mp4"]

由于工作原因，需要在网站添加视频播放器。但是找了好多都不太理想。在浏览其它视频网站的时候，看到有一个网址使用的是video.js，大概研究了一下，感觉就是我需要的。于是各种度娘，官方文档学习,这里做一个记录 。

video.js介绍

Video.js是专为HTML5打造的网络视频播放器。它支持HTML5视频和现代流格式，以及YouTube，Vimeo甚至Flash。使用简单，并且代码很少。对于电脑端和手机端都非常友好。

例如M3U8,MP4和WebM，但还支持自适应流媒体格式，例如HLS和DASH。甚至还有用于直播的特殊UI！

当您需要添加其他功能时，文档完善的插件架构将为您提供支持。该社区已经建立了数百个您可以安装的皮肤和插件，例如Chromecast，IMA甚至VR。

video.js使用方式

1、全局引入文件

打开wordpress主题目录，找到页首文件header.php，在/head标签前添加如下代码

<link href="https://cdn.bootcss.com/video.js/7.6.6/video-js.min.css" rel="stylesheet">

页脚文件footer.php，在/body标签前添加如下代码。

<script src="https://cdn.bootcss.com/video.js/7.6.6/video.min.js"></script>

打开主题functions.php文件，在?>前添加如下代码

//videojs
/*
WordPress部署H5播放器Video.js教程演示
https://www.xinxiu.com.cn/
*/
function videojs_html5($atts) {
extract(shortcode_atts(array(
    'url' => '',
    'webm' => '',
    'ogv' => '',
    'width' => '',
    'controls' => '',
    'preload' => 'auto',
    'autoplay' => 'false',
    'loop' => '',
    'muted' => '',
    'poster' => '',
    'class' => '',
), $atts));
if(empty($url)){
    return __('you need to specify the src of the video file', 'videojs-html5-player');
}
//src
$src = '<source src="'.$url.'" type="video/mp4" />';
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;
}
//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 = "";
}
//poster
if(!empty($poster)) {
    $poster = ' poster="'.$poster.'"';
}
$player = "videojs" . uniqid();
//custom style
$style = '';
if(!empty($width)){
    $style = <<<EOT
    <style>
    #$player {
        max-width:{$width}px;
    }
    </style>
EOT;

}
$output = <<<EOT
<video id="$player" class="video-js vjs-default-skin"{$controls}{$preload}{$autoplay}{$loop}{$muted}{$poster} data-setup='{"fluid": true}'>
    $src
</video>
$style
EOT;
return $output;
}
add_shortcode('videojs_video','videojs_html5');

在编辑文章的时候，使用以下短代码即可使用 VideoJS

1.[#videojs_video url="这里输入视频的 URL 地址"]
2.//使用的时候去除上行代码中的#号

更多设置请关注官方网站: https://videojs.com/getting-started/