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

9,888次阅读
36 条评论

共计 1930 个字符,预计需要花费 5 分钟才能阅读完成。

前言

上一周看看了我博客安装的插件,算起来也有五个,都说 WordPress 插件安装多了就会导致加载变慢,这一点我倒是没有感受到,估计是因为我的插件安装的不够多吧。

介绍

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://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 视频播放器

正文完
使用官方微信小程序体验更多功能
post-qrcode
 13
憧憬Licoy
版权声明:本站原创文章,由 憧憬Licoy 于2016-08-11发表,共计1930字。
转载说明:除特殊说明外本站文章皆由CC-4.0协议发布,转载请注明出处。
评论(36 条评论)
窃格瓦拉 评论达人 LV.1
2018-10-09 22:21:02 回复

请问你的外链跳转加载动画是怎么做的?想学习一下。
方便分享一下教程吗?

 Windows  Chrome  中国河北省保定市联通
    憧憬Licoy 博主
    2018-10-17 09:06:21 回复

    @窃格瓦拉 其实就是一个CSS动画,然后通过PHP加一个JS的Settimeout跳转到url参数的地址去

     Windows  Chrome
Y 评论达人 LV.1
2017-04-18 22:43:50 回复

:eek: 貌似DUX不行啊 :mad: :mad:

 Windows  UC Browser  中国江西省赣州市电信
    憧憬Licoy 博主
    2017-04-19 18:02:06 回复

    @Y 理论上都是可以的

     Windows  Chrome
      Y 评论达人 LV.1
      2017-04-19 23:07:14 回复

      @憧憬Licoy :grin: :grin: 兄弟 你博客主题能不能发一份给我啊

       Windows  UC Browser  中国江西省赣州市电信
      Y 评论达人 LV.1
      2017-04-23 21:14:04 回复

      @憧憬Licoy 额。。。。能理解因为我才发现是付费主题 。。。。能不能把评论表情发一份给我

       Windows  UC Browser  中国江西省赣州市电信
      Y 评论达人 LV.1
      2017-04-24 17:18:07 回复

      @憧憬Licoy :sad: 问题是我怎么知道你QQ。。。

       Windows  UC Browser  中国江西省赣州市电信