本文作者:花雾影

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

花雾影1年前 ( 2020-03-10 )26216抢沙发
WordPress纯代码部署VideoJs视频播放器摘要: Video.js 是一个通用的在网页上嵌入视频播放器的 *** 库,Video.js 自动检测浏览器对 HTML5 的支持情况,如果不支持 HTML5 则自动使用 Flash...

1:  首先在网站的顶部引入Video *** 的CSS样式,这里我提供一下BootCdn的链接代码:

WordPress纯代码部署VideoJs视频播放器 video.js播放器 代码 第1张

<link rel="stylesheet" type="text/CSS" href="https://cdn.bootcss.com/video.js/5.11.2/alt/video-js-cdn.min.css">

然后在网站的底部引用Video *** 的 *** 脚本,同上提供BootCdn的链接代码: 

<scrIPt type="text/javaScript" src="//cdn.bootcss.com/video.js/5.11.2/alt/video.novtt.min.js"></scrIPt>

2:

主题的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;  }//controlsif($controls == "false") {      $controls = "";  }else{      $controls = " controls";  }//preloadif($preload == "metadata") {      $preload = ' preload="metadata"';  }else if($preload == "none") {      $preload = ' preload="none"';  }else{      $preload = ' preload="auto"';  }//autoplayif($autoplay == "true"){      $autoplay = " autoplay";  }else{      $autoplay = "";  }//loopif($loop == "true"){      $loop = " loop";  }else{      $loop = "";  }//mutedif($muted == "true"){      $muted = " muted";  }else{      $muted = "";  }//posterif(!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>$styleEOT;return $output;  }  add_shortcode('videojs_video','videojs_html5');

  将以上的步骤完成,你的Video *** 播放器就已经成功部署完成了,在编辑文章的时候,使用以下短代码即可使用Video *** :

[videojs_video url="这里输入视频的URL地址"]


文章投稿或转载声明

来源:憧憬点滴记忆版权归原作者所有,转载请保留出处。本站文章发布于 1年前 ( 2020-03-10 )
温馨提示:文章内容系作者个人观点,不代表水泊网对其观点赞同或支持。

赞(

觉得文章有用就打赏一下文章作者

支付宝扫一扫打赏

微信扫一扫打赏

阅读
分享

发表评论

快捷回复:

评论列表 (暂无评论,26216人围观)参与讨论

还没有评论,来说两句吧...