wordpress 纯代码部署视频播放器——VideoJs视频播放器。支持m3u8/MP4/WebM和Ogg格式。Video.js 是一个通用的在网页上嵌入视频播放器的 JS 库，Video.js 自动检测浏览器对 HTML5 的支持情况，如果不支持 HTML5 则自动使用 Flash 播放器。
全局引用
//cdn.bootcss.com/video.js/5.11.2/alt/video-js-cdn.min.css
//cdn.bootcss.com/video.js/5.11.2/alt/video.novtt.min.js
打开主题functions.php文件，添加如下代码
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 = '';
if (!empty($webm)) {
$webm = '';
$src = $src.$webm;
}
if (!empty($ogv)) {
$ogv = '';
$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 = <<
#$player {
max-width:{$width}px;
}
EOT;
}
$output = <<
$src
$style
EOT;
return $output;
}
add_shortcode('videojs_video','videojs_html5');
使用说明
有以下几种插入视频方式
php
[videojs poster="视频封面" url="视频地址"]
php
[videojs poster="视频封面" mp4="视频地址"]
php
[videojs_video url="这里输入视频的 URL 地址"]
