WordPress纯代码部署VideoJs视频播放器

前言

上一周看看了我博客安装的插件，算起来也有五个，都说 WordPress 插件安装多了就会导致加载变慢，这一点我倒是没有感受到，估计是因为我的插件安装的不够多吧 WordPress 纯代码部署 VideoJs 视频播放器。

WordPress纯代码部署VideoJs视频播放器-第1张-boke112百科(boke112.com)

介绍

Video.js 是一个通用的在网页上嵌入视频播放器的 JS 库，Video.js 自动检测浏览器对 HTML5 的支持情况，如果不支持 HTML5 则自动使用 Flash 播放器。

部署教程

第一步：首先在网站的顶部引入 VideoJS 的 CSS 样式，这里我提供一下 BootCdn 的链接：

//cdn.bootcss.com/video.js/5.11.2/alt/video-js-cdn.min.css

然后在网站的底部引用 VideoJS 的 JS 脚本，同上提供 BootCdn 的链接：

//cdn.bootcss.com/video.js/5.11.2/alt/video.novtt.min.js

第二步：在主题的 functions.php 文件中添加以下代码

/**
* 代码来源于憧憬点滴记忆
* 转载请注明来自 https://www.licoy.cn/1924.html
*/
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 就已经成功部署完成了。

引用方法

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

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

后记

在 WordPress 里面，能够使用代码部署的就尽量使用代码，少使用插件。

来源：憧憬点滴记忆

WordPress纯代码部署VideoJs视频播放器

前言

介绍

部署教程

引用方法

后记

相关文章

最新文章

热门标签