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

前言

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

介绍

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

部署教程

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

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

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

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

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

  1. /**
  2. * 代码来源于憧憬点滴记忆
  3. * 转载请注明来自 https://www.licoy.cn/1924.html
  4. */
  5. function videojs_html5($atts) {
  6. extract(shortcode_atts(array(
  7.     ‘url’ => ,
  8.     ‘webm’ => ,
  9.     ‘ogv’ => ,
  10.     ‘width’ => ,
  11.     ‘controls’ => ,
  12.     ‘preload’ => ‘auto’,
  13.     ‘autoplay’ => ‘false‘,
  14.     ‘loop’ => ,
  15.     ‘muted’ => ,
  16.     ‘poster’ => ,
  17.     ‘class‘ => ,
  18. ), $atts));
  19. if(empty($url)){
  20.     return __(‘you need to specify the src of the video file’, ‘videojs-html5-player’);
  21. }
  22. //src
  23. $src = ‘<source src=“‘.$url.'” type=“video/mp4” />’;
  24. if (!empty($webm)) {
  25.     $webm = ‘<source src=“‘.$webm.'” type=“video/webm” />’;
  26.     $src = $src.$webm;
  27. }
  28. if (!empty($ogv)) {
  29.     $ogv = ‘<source src=“‘.$ogv.'” type=“video/ogg” />’;
  30.     $src = $src.$ogv;
  31. }
  32. //controls
  33. if($controls == “false”) {
  34.     $controls = “”;
  35. }
  36. else{
  37.     $controls = ” controls”;
  38. }
  39. //preload
  40. if($preload == “metadata”) {
  41.     $preload = ‘ preload=“metadata”‘;
  42. }
  43. else if($preload == “none”) {
  44.     $preload = ‘ preload=“none”‘;
  45. }
  46. else{
  47.     $preload = ‘ preload=“auto”‘;
  48. }
  49. //autoplay
  50. if($autoplay == “true”){
  51.     $autoplay = ” autoplay”;
  52. }
  53. else{
  54.     $autoplay = “”;
  55. }
  56. //loop
  57. if($loop == “true”){
  58.     $loop = ” loop”;
  59. }
  60. else{
  61.     $loop = “”;
  62. }
  63. //muted
  64. if($muted == “true”){
  65.     $muted = ” muted”;
  66. }
  67. else{
  68.     $muted = “”;
  69. }
  70. //poster
  71. if(!empty($poster)) {
  72.     $poster = ‘ poster=“‘.$poster.'”‘;
  73. }
  74. $player = “videojs” . uniqid();
  75. //custom style
  76. $style = ;
  77. if(!empty($width)){
  78.     $style = <<<EOT
  79.     <style>
  80.     #$player {
  81.         max-width:{$width}px;
  82.     }
  83.     </style>
  84. EOT;
  85. }
  86. $output = <<<EOT
  87. <video id=“$player” class=“video-js vjs-default-skin”{$controls}{$preload}{$autoplay}{$loop}{$muted}{$poster} data-setup='{“fluid”true}’>
  88.     $src
  89. </video>
  90. $style
  91. EOT;
  92. return $output;
  93. }
  94. add_shortcode(‘videojs_video’,’videojs_html5′);
  95. 将以上的步骤完成,你的 VideoJS 就已经成功部署完成了。

引用方法

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

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

后记

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

人已赞赏
wordpress教程

宝塔面板默认404页面怎么改为WordPress主题404页面?

2018-4-23 14:27:49

wordpress教程

分享一波外链跳转html源代码及begin主题适配教程

2018-4-23 16:28:33

0 条回复 A文章作者 M管理员
    暂无讨论,说说你的看法吧
个人中心
购物车
优惠劵
今日签到
有新私信 私信列表
搜索