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

投稿   憧憬Licoy  2016-08-17 07:33:33  483 人阅读  19 条评论

投放广告联系   诚邀合作伙伴   赞助我们   公告栏   赞助光荣榜

前言

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

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');

将以上的步骤完成,你的VideoJS就已经成功部署完成了。

引用方法

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

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

后记

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

文章标签: ,  
原文地址:https://www.licoy.cn/1924.html
温馨提示:文章内容仅代表作者个人观点,不代表boke112导航赞同其观点和对其真实性负责!
版权声明:本文为投稿文章,感谢 憧憬Licoy 的投稿,版权归原作者所有,欢迎分享本文,转载请保留出处!
WordPress/zblogPHP免费响应式博客主题Blogs

 发表评论


  1. 橘子书
    橘子书 【丞相】 @回复

    之前看了这篇文章,没去在意,昨晚试了一下教程。
    有两个问题:
    1.代码错了(emptyempty应该改为empty,有五处需要改);
    2.貌似只认MP4、webm、ogg格式的视频(所以调用代码不单是url,还有webm、ogv

    • boke112导航
      boke112导航【村长】2016-10-18 16:02  回复

      @橘子书[抓狂] 现在用的这个代码高亮代码版,总是会自动重复函数,抓狂中。PS:谢谢告知,已更正错误。

      • 橘子书
        橘子书 【丞相】2016-10-18 16:28  回复

        @boke112导航换掉呗。哈哈!
        另外这次好像不是你代码高亮的原因,而是教程作者本身就写错了。

        • boke112导航
          boke112导航【村长】2016-10-19 11:56  回复

          @橘子书不想安装高亮插件,目前使用的这个代码高亮转换工具还是挺不错的,就是偶尔出现某些函数名重复。

      • 橘子书
        橘子书 【丞相】2016-10-19 12:05  回复

        @boke112导航有集合到主题的,不一定要用插件。
        另外我一直觉得代码高亮转换工具,好是好,就是麻烦,每次要打开页面。

  2. 雅兮网
    雅兮网 【尚书】 @回复

    这个不错,想弄在网站上,但是最近在function里加太多功能了,而且页面也调用太多js和css,感觉有点吃不消了,请求太多,页面太慢了 [晕]

  3. Canace
    Canace 【小白】 @回复

    可以

  4. 龙凯的博客
    龙凯的博客 【书童】 @回复

    有用

  5. 刘传鹏博客
    刘传鹏博客 【举人】 @回复

    感谢分享

  6. 爱时尚
    爱时尚 【尚书】 @回复

    视频播放器插件没用过,这个会不会影响到网站加载

  7. 博客soso
    博客soso 【举人】 @回复

    这个播放器的确很好,我之前开发的门户网站上就是用这个,视频地址不需要我们那么麻烦的找,只需要优酷,腾讯、爱奇艺等大型视频网站的视频地址就可以,从地址栏把地址复制过来就可以解析视频地址

  8. 爱杂侃
    爱杂侃 【举人】 @回复

    个人博客还是嵌入其他网站的视频好一些

  9. benen005
    benen005 【进士】 @回复

    确实不错

  10. 小萝博客
    小萝博客 【状元】 @回复

    zb的有插件,个人感觉用处不大

  11. Koolight
    Koolight 【尚书】 @回复

    这里的视频地址支持的格式是什么样的?优酷的播放页面可支持不?