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

7,255次阅读

36条评论

上一周看看了我博客安装的插件，算起来也有五个，都说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

2016-08-11

复制链接

12

转载提示：除特殊说明外本站文章皆由CC-4.0协议发布，转载请注明出处。

WordPress为导航栏添加个性图标

非插件给WordPress编辑器添加表情按钮

纯CSS闪光按钮部署到WordPress短代码教程

WordPress加载65279DOM头解决办法

WordPress禁止自动加载br换行符

窃格瓦拉评论达人 LV.1

2018-10-09 22:21:02 回复

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

憧憬Licoy 博主

2018-10-17 09:06:21 回复

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

Y 评论达人 LV.1

2017-04-18 22:43:50 回复

貌似DUX不行啊

憧憬Licoy 博主

2017-04-19 18:02:06 回复

@Y 理论上都是可以的

Y 评论达人 LV.1

2017-04-19 23:07:14 回复

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

憧憬Licoy 博主

2017-04-23 20:53:36 回复

@Y 非常抱歉，不能

Y 评论达人 LV.1

2017-04-23 21:14:04 回复

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

憧憬Licoy 博主

2017-04-24 13:18:51 回复

@Y 加我QQ

Y 评论达人 LV.1

2017-04-24 17:18:07 回复

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

憧憬Licoy 博主

2017-04-26 09:40:14 回复

@Y 首页侧边栏有，193466605

«

1

2

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

前言

介绍

部署教程

第一步

第二步

引用方法

后记

SpringCloud使用Zuul出现“Forwarding error”错误解决方法

Chatroulette-全世界随机视频聊天网站

IntelliJ IDEA下将JavaWeb打包成war包并发布到tomcat步骤说明

LiRecord留言板系统V2.0正式版发布

SpringBoot打包成war包并放置在tomcat运行

SpringBoot+Shiro整合进行登录验证与权限控制

Go日常食用之N种字符串拼接方式及性能测试

Go日常食用之读取yml配置文件

岛屿数量计算中的DFS和BFS的应用

Go日常食用之将Excel转换为CSV