前言
上一周看看了我博客安装的插件,算起来也有五个,都说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里面,能够使用代码部署的就尽量使用代码,少使用插件。

请问你的外链跳转加载动画是怎么做的?想学习一下。
方便分享一下教程吗?
@窃格瓦拉 其实就是一个CSS动画,然后通过PHP加一个JS的Settimeout跳转到url参数的地址去
@Y 理论上都是可以的
@憧憬Licoy
兄弟 你博客主题能不能发一份给我啊
@Y 非常抱歉,不能
@憧憬Licoy 额。。。。能理解因为我才发现是付费主题 。。。。能不能把评论表情发一份给我
@Y 加我QQ
@憧憬Licoy
问题是我怎么知道你QQ。。。
@Y 首页侧边栏有,193466605
« 1 2
SpringCloud使用Zuul出现“Forwarding error”错误解决方法
Chatroulette-全世界随机视频聊天网站
IntelliJ IDEA下将JavaWeb打包成war包并发布到tomcat步骤说明
LiRecord留言板系统V2.0正式版发布
SpringBoot打包成war包并放置在tomcat运行
SpringBoot+Shiro整合进行登录验证与权限控制
多风格自适应WordPress主题Puock正式开源!
非大众版WordPress纯代码实现阅读量统计
面包多WordPress插件 – 把你的文章变成付费版
git reset —hard后暂存区代码跑哪儿去了?
选择表情
分享至