WordPress 短码-部署H5播放器Video.js,支持m3u8、MP4、WebM和Ogg格式
使用 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"]