• 设为首页 加入收藏
  • [会员登陆] [会员注册]
  • 广告联盟评测

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

    编辑:广告联盟 发布时间:2016-12-09 14:16 分类:网站运营 | 


    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.         if( strpos( $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-height: 80px; padding: 10px 10px 10px 90px; overflow: hidden; width: 100%; margin: 0 auto; position: relative; height: auto; border: 1px solid #e2e2e2; background-color: #fff; border-radius: 3px;  }   
    2. .jief-u-face {  width: 68px; text-align: center; float: left; margin: 0 10px 0 0; top: 8px; left: 10px; position: absolute; }   
    3. .jief-u-face img { display: block; height: 64px; width: 64px; border-radius: 64px; margin: 0 auto; border: 2px solid transparent; }   
    4. .jief-r-info { float: left; position: relative; width: 100%;  }   
    5. .jief-r-usname { line-height: 26px; font-size: 16px; color: #00a1d6; font-weight: bold; }   
    6. .jief-r-sign { color: #333; line-height: 20px; font-size: 14px; }   
    7. .jief-videojj-player{ width:100%; margin:0 auto; }   
    8. .jief-videojj-warning { color: #8a6d3b; background-color: #fcf8e3; padding: 10px; margin-bottom: 10px; border: 1px solid #faebcc; border-radius: 3px;}  

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

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

    WordPress云解析HTML5视频播放器插件 由CPA广告联盟www.zhaolianmeng.com编辑整理,更多内容敬请关注WordPress云解析HTML5视频播放器插件频道。

    热门文章
  • WordPress云解析HTML5视频播放器插件
  • 百度更新时间,频率,百度大更新,小更新,抓取时间规则你
  • discuz修改站内图片自适应的方法
  • cpa广告联盟产品推广技巧
  • 不用刷新缓存,WordPress让浏览器自动加载最新的CSS、
  • 浅谈垃圾站的运营模式
  • 很多cpa联盟的推广渠道只能称为“网赚玩家”
  • 做cpa广告联盟产品执行力很重要!
  • cpa转化率和cpa思维那些事儿
  • 优化行业站不要急功近利
  • 容易被忽悠的互联网创业陷阱你知道多少!
  • 人人网如何效仿Facebook走上社区化营销之路
  • 告诉你最有效的提高网站访问量方法
  • 广告联盟评测之浅谈
  • 一个成功网站必需做到的几个要点
  • 如果app没落cpa广告联盟将寸步难行?
  • 怎么用微信来盈利?常见的微信赚钱方法!
  • 京华时报:优酷CEO古永锵 _ 坚持领跑将寒冬留给对手
  • 做网站了解对手方能百战不怠
  • 网站推广成功的六大实战心得
  • 易传媒郑靖伟:广告主逐渐认可视频交友类网站--广告
  • 新手做网站的入门技巧
  • 分类信息网站怎样做好推广与运营
  • 如何分析一个网站的真实流量大小
  • 什么是广告联盟评测?
  • 建站之-心德篇
  • 浅谈网站设计中验证码使用的心得
  • 中国民航报:谷歌浏览器很好
  • 从做站到接任务的转变 我的互联网生涯
  • 分析网站经营失败原因
  • 大学生自主创业做网站商铺 7年时间成就互联网神奇
  • 东方法眼:国内首起劫持域名案侦破纪实
  • 网站要想赚钱请记住做好一下几点
  • 淘宝百度战白热化 电子商务免费午餐或继续
  • 如何让百度收录网站内页
  • 站长们,你们准备好了棺材吗?
  • 网络流行词
  • 阿祥:草根站长只要把握2个阶段你一定会成功
  • 不要随意更改网站标题
  • 中国站长站:“90后”大学生:网来网去“很厉害”
  • 百度知道获得流量的另类方法
  • 广告联盟评测网教你几十种常用的网站推广方法
  • 谷歌流失的17大高级人才:四大离职主要原因
  • (计世网)《时代》杂志评出2008最佳网站Top50
  • 我与广告联盟评测网的成长
  • 广告联盟网顺利通过百度百科词条
  • 从高鹏事件看团购网的现状问题
  • 利用网摘来进行推广
  • 关于地方论坛运营思维与社区比较
  • Tencent:网页游戏行业CEO调查报告