现在的位置:首页>wordpress>正文

WordPress云解析HTML5视频播放器插件

2016年11月06日 ⁄ 共 10790字 暂无评论

WordPress的视频播放器插件部落之前介绍过很多,对于那些网站中需要引用视频文件的朋友来说,对这一类的插件,还是比较有需求的,部落今天介绍的由作者jieerf分享在github和oschina的开源插件,我们能过这个插件,只要使用的短链接就可以轻松引用优酷,哔哩哔哩弹幕视频网(B站),土豆,腾讯视频等各大平台的视频,另外,这个插件的最大的好处,因为是HTML5播放器,PC和移动终端均支持。

作者对这个插件的介绍说得更详细,WordPress云解析HTML5播放器Shortcode插件;支持所有主流CDN的资源类型:mp4、flv及m3u8;支持大型主流平台优酷、土豆、腾讯视频、芒果TV 。

videojj1

WordPress云解析HTML5视频播放器插件使用

具体的用

插件整体也比较简单 只有一个php文件和一个CSS组成。具体用法如下:

在编辑模式下输入(或者使用快捷按钮:Video++播放器):

  1. [videojj]http://v.youku.com/v_show/id_XMTQ2ODUwNzA4NA==.html[/videojj]

UP主信息:

  1. [upinfo name="UP主名称" face="头像地址"]描述信息[/upinfo]

关于bilibili的HTML5播放器获取

插件菜单下【VideoJJ设置】里有B站HTML5播放器地址获取。

好了,重点来了,前面说过,这个插件只有两个文件,部落找出了这两个文件,其中的wp-jief-videojj.php源码如下:

  1. <?php
  2. /*
  3. Plugin Name: Video++ Player
  4. Plugin URI: http://www.jieerf.com
  5. Description: Video++是全球首创的视频内生态系统( Video OS),只要你能看到视频的地方,都能使用Video++的技术。使用方法:编辑文章添加[videojj]视频地址[/videojj],如[videojj]http://v.youku.com/v_show/id_XNzIxODU2NTQw.html[/videojj],如果解析失败请联系插件作者更新。
  6. Version: 1.0.0
  7. Author: 杰尔夫技术
  8. Author URI: http://www.jieerf.com/
  9. License: GPL
  10. */
  11. define('JIEFVIDEOJJ_VERSION', '1.0.0');
  12. define('JIEFVIDEOJJ_URL', plugins_url(''__FILE__));
  13. define('JIEFVIDEOJJ_PATH', dirname( __FILE__ ));
  14. $jiefVideo = new JiefVideo();
  15. class JiefVideo{
  16.     // 构造方法
  17.     public function __construct(){
  18.         if(is_admin()){
  19.             // 后台管理员设置项
  20.             add_action('admin_menu', array($this, 'admin_menu'));
  21.         }
  22.         /* videojj 短代码 */
  23.         // 添加一个videojj的段代码
  24.         add_shortcode('videojj', array($this, 'admin_iva') );
  25.         // 添加后台快捷按钮
  26.         add_action('admin_print_footer_scripts', array($this, 'add_videojj_quicktags') );
  27.         /* upinfo 短代码 */
  28.         add_shortcode('upinfo', array($this, 'admin_upinfo') );
  29.         add_action('admin_print_footer_scripts', array($this, 'add_upinfo_quicktags') );
  30.     }
  31.     // 增加后台插件设置
  32.     public function admin_menu(){
  33.         add_plugins_page('VideoJJ 设置', 'VideoJJ 设置', 'manage_options', 'jief_videojj_settings', array($this, 'admin_settings'));
  34.     }
  35.     // 设置界面
  36.     public function admin_settings(){
  37.         if($_POST['jief_videojj_submit'] == '保存'){
  38.             $param = array('appkey');
  39.             $json = array();
  40.             foreach($_POST as $key => $val){
  41.                 if(in_array($key$param)){
  42.                     $json[$key] = $val;
  43.                 }
  44.             }
  45.             $json = json_encode($json);
  46.             update_option('jief_videojj_option', $json);
  47.         }
  48.         $option = $this->_get_option_json();
  49.         echo '<h2>VideoJJ Player 设置</h2>';
  50.         echo '<form action="" method="post">
  51.             <table class="form-table">
  52.             <tr valign="top">
  53.                 <th scope="row">APPKey</th>
  54.                 <td>
  55.                     <label><input type="text" class="regular-text code" name="appkey" value="'.$option['appkey'].'"></label>
  56.                     <br />
  57.                     <p class="description">申请地址:http://www.videojj.com</p>
  58.                 </td>
  59.             </tr>
  60.             </table>
  61.             <p class="submit"><input type="submit" name="jief_videojj_submit" id="submit" class="button-primary" value="保存"></p>
  62.             </form>
  63.             <script type="text/javascript">
  64.             function jiefVideojjGetBilibili() {
  65.                 var url = document.getElementById("_jief_bilibili_url").value;
  66.                 if( url == "" ) {
  67.                     alert( "视频地址不能为空" ); return;
  68.                 }
  69.                 document.getElementById("_jief_bilibili_html5url").innerHTML = "获取中...";
  70.                 var jsonp = document.createElement("script");
  71.                 jsonp.type = "text/javascript";
  72.                 jsonp.src = "http://www.jieerf.com/bilibili/api.php?url="+url+"&error=jiefVideojjError&success=jiefVideojjSuccess";
  73.                 document.getElementsByTagName("head")[0].appendChild(jsonp);
  74.             }
  75.             function jiefVideojjError(msg) {
  76.                 alert(msg);
  77.             }
  78.             function jiefVideojjSuccess(html5url) {
  79.                 document.getElementById("_jief_bilibili_html5url").innerHTML = html5url;
  80.             }
  81.             </script>
  82.             <h2>哔哩哔哩视频HTML5播放器获取</h2>
  83.             <table class="form-table">
  84.                 <tr valign="top">
  85.                 <td>
  86.                     <input type="text" class="regular-text code" style="width:50%;" id="_jief_bilibili_url" placeholder="哔哩哔哩视频地址,如:http://www.bilibili.com/video/av6763249/" >
  87.                     <a href="javascript:jiefVideojjGetBilibili();" class="button" type="button">查询</a>
  88.                 </td>
  89.                 </tr>
  90.                 <tr valign="top">
  91.                 <td>
  92.                     <p id="_jief_bilibili_html5url"></p>
  93.                 </td>
  94.                 </tr>
  95.             </table>
  96.         ';
  97.         echo '<h2>意见反馈</h2>
  98.             <p>你的意见是VideoJJ Player成长的原动力,<a href="http://www.jieerf.com/" target="_blank">欢迎给我们留言</a>,或许你想要的功能下一个版本就会实现哦!</p>
  99.         ';
  100.     }
  101.     // 获得插件数据库存储
  102.     private function _get_option_json() {
  103.         $option = get_option('jief_videojj_option');
  104.         if(!emptyempty($option)){
  105.             $option = json_decode($option, true);
  106.         }
  107.         return $option;
  108.     }
  109.     // 获得iframe控件
  110.     private function _get_iframe( $url = ''$height = ''$atts ) {
  111.         $style .= "width: 100%; padding-bottom:10px;";
  112.         if(!emptyempty($height)){
  113.             $style .= "height: {$height}px;";
  114.         }
  115.         if(!emptyempty($style)){
  116.             $style = ' style="' . $style . '"';
  117.         }
  118.         $html .= '<div id="_jief_videojj_iframe" class="jief-videojj-iframe"' . $style . '>
  119.         <iframe src="' . $url . '" width="100%" height="100%" frameborder="0" allowfullscreen="true"></iframe>
  120.         </div>';
  121.         return $html;
  122.     }
  123.     // 获得Video++播放器
  124.     private function _get_videojj( $url = ''$atts ) {
  125.         //extract(shortcode_atts(array("title"=>''),$atts));
  126.         $option = $this->_get_option_json();
  127.         $appkey = $option['appkey'];
  128.         $height = $this->_is_mobile() ? 300 : 540 ;
  129.         /* 新版,官方推荐使用,待测试稳定性 */
  130.         $video_html = sprintf('<link rel="stylesheet" href="%1$s" type="text/css" media="screen">', JIEFVIDEOJJ_URL . '/static/style.css?ver=' . JIEFVIDEOJJ_VERSION);
  131.         $video_html .= '<div class="jief-videojj-warning">如无法播放,请重新刷新页面哦!</div>';
  132.         // $video_html .= '<div id="_jief_videojj_player" class="jief-videojj-player" style="height:'.$height.'px;"></div>
  133.         // <script type="text/javascript" src="http://cytron.cdn.videojj.com/latest/cytron.core.js"></script>
  134.         // <script type="text/javascript">
  135.         // var ivaInstance = new Iva( "_jief_videojj_player", {
  136.         //     appkey: "'.$appkey.'",
  137.         //     video: "'.$url.'",
  138.         //     editorEnable: false,
  139.         //     vorEnable: false,
  140.         //     vorStartGuideEnable: false
  141.         // });
  142.         // </script>';
  143.         /* 旧版 */
  144.         $video_html .= '<div id="_jief_videojj_player" class="jief-videojj-player" style="height:'.$height.'px;"></div>
  145.         <script type="text/javascript" src="http://7xjfim.com2.z0.glb.qiniucdn.com/Iva.js"></script>
  146.         <script type="text/javascript">
  147.         var ivaInstance = new Iva( "_jief_videojj_player", {
  148.             appkey: "'.$appkey.'",
  149.             video: "'.$url.'",
  150.             title: "",
  151.             cover: ""
  152.         });
  153.         </script>';
  154.         return $video_html;
  155.     }
  156.     // 短代码的处理方法
  157.     public function admin_iva( $atts$content='' ) {
  158.         ifstrpos$content, 'www.bilibili.com' ) !== false ) {
  159.             return $this->_get_iframe( $content, '540' );
  160.         } else {
  161.             return $this->_get_videojj( $content );
  162.         }
  163.     }
  164.     // upinfo短代码的处理方法
  165.     public function admin_upinfo( $atts$content='' ) {
  166.         extract(shortcode_atts(array"name"=>''"face"=>'' ),$atts));
  167.         $upinfo_html = sprintf('<link rel="stylesheet" href="%1$s" type="text/css" media="screen">', JIEFVIDEOJJ_URL . '/static/style.css?ver=' . JIEFVIDEOJJ_VERSION);
  168.         $upinfo_html .= '<div class="jief-upinfo">
  169.         <div class="jief-u-face">
  170.         <img src="'.$face.'" alt="'.$name.'">
  171.         </div>
  172.         <div class="jief-r-info">
  173.             <div class="jief-r-usname">'.$name.'</div>
  174.             <div class="jief-r-sign">'.$content.'</div>
  175.         </div>
  176.         </div>';
  177.         return $upinfo_html;
  178.     }
  179.     // 是否是手机端
  180.     private function _is_mobile() {
  181.         // 如果有HTTP_X_WAP_PROFILE则一定是移动设备
  182.         if (isset ($_SERVER['HTTP_X_WAP_PROFILE'])) {
  183.             return true;
  184.         }
  185.         // 如果via信息含有wap则一定是移动设备,部分服务商会屏蔽该信息
  186.         if (isset ($_SERVER['HTTP_VIA'])) {
  187.             // 找不到为flase,否则为true
  188.             return stristr($_SERVER['HTTP_VIA'], "wap") ? true : false;
  189.         }
  190.         // 脑残法,判断手机发送的客户端标志,兼容性有待提高
  191.         if (isset ($_SERVER['HTTP_USER_AGENT'])) {
  192.             $clientkeywords = array ('iphone',
  193.                 'ipad',
  194.                 'android',
  195.                 'ipod',
  196.                 );
  197.             // 从HTTP_USER_AGENT中查找手机浏览器的关键字
  198.             if (preg_match("/(" . implode('|', $clientkeywords) . ")/i"strtolower($_SERVER['HTTP_USER_AGENT']))) {
  199.                 return true;
  200.             }
  201.         }
  202.         // 协议法,因为有可能不准确,放到最后判断
  203.         if (isset ($_SERVER['HTTP_ACCEPT'])) {
  204.             // 如果只支持wml并且不支持html那一定是移动设备
  205.             // 如果支持wml和html但是wml在html之前则是移动设备
  206.             if ((strpos($_SERVER['HTTP_ACCEPT'], 'vnd.wap.wml') !== false) && (strpos($_SERVER['HTTP_ACCEPT'], 'text/html') === false || (strpos($_SERVER['HTTP_ACCEPT'], 'vnd.wap.wml') < strpos($_SERVER['HTTP_ACCEPT'], 'text/html')))) {
  207.                 return true;
  208.             }
  209.         }
  210.         return false;
  211.     }
  212.     // 增加后台快捷按钮
  213.     public function add_videojj_quicktags() {
  214.         echo '<script type="text/javascript">';
  215.         echo 'QTags.addButton( "videojj""Video++播放器""[videojj]这里填写你的视频地址[/videojj]\n","" )';
  216.         echo '</script>';
  217.     }
  218.     // 增加主播信息快捷按钮
  219.     public function add_upinfo_quicktags() {
  220.         echo '<script type="text/javascript">
  221.         QTags.addButton( "upinfo""UP主播信息""[upinfo name=\"名称\" face=\"头像地址\"]这里填写主播描述信息[/upinfo]\n","" )
  222.         </script>';
  223.     }
  224. }

另外一个CSS文件上的明文内容如下:

  1. .jief-upinfo { min-height80pxpadding10px 10px 10px 90pxoverflowhiddenwidth: 100%; margin: 0 autopositionrelativeheightautoborder1px solid #e2e2e2background-color#fffborder-radius: 3px;  }   
  2. .jief-u-face {  width68pxtext-aligncenterfloatleftmargin: 0 10px 0 0; top8pxleft10pxpositionabsolute; }   
  3. .jief-u-face img { displayblockheight64pxwidth64pxborder-radius: 64pxmargin: 0 autoborder2px solid transparent; }   
  4. .jief-r-info { floatleftpositionrelativewidth: 100%;  }   
  5. .jief-r-usname { line-height26pxfont-size16pxcolor#00a1d6font-weightbold; }   
  6. .jief-r-sign { color#333line-height20pxfont-size14px; }   
  7. .jief-videojj-player{ width:100%; margin:0 auto; }   
  8. .jief-videojj-warning { color#8a6d3bbackground-color#fcf8e3padding10pxmargin-bottom10pxborder1px solid #faebccborder-radius: 3px;}  

因为作者后面可能还会出新的版本,所以建议大家去github下载,地址是:由此直达

当然,也可以去部落的百度网盘上下载,地址是:由此直达

给我留言