当前位置:首页 > CMS教程 > WordPress > 列表

wordpress中用 iframe 方式插入优酷视频 兼容移动设备

发布:smiling 来源: PHP粉丝网  添加日期:2015-03-20 16:05:19 浏览: 评论:0 

本文我们来讲讲在wordpress中快速插入优酷视频mbed方式改为 iframe,这个方式的好处是可以兼容移动设备浏览,一举两得。

现在的 WordPress 中文版内置了“使用 WordPress 的 Embed 功能快速插入优酷视频”的功能:只要在写文章时,独占一行粘贴优酷视频地址就可以自动调用次视频。

例如:我在下一行独占一行插入 http://v.youku.com/v_show/id_XNTgxNzI3MDcy.html 这个优酷视频地址,就可以自动调用优酷视频了。

但是这是用 Embed 的,PC端没问题,手机浏览器因为不支持 Flash 所以是无法显示和播放视频的,而现在提供的 iframe 方式插入的视频就支持手机.

下面说说如何实现:

使用 WordPress 的 Embed 功能快速插入优酷视频,改为以 iframe 方式调用的方法,有点绕口.

1. 确定所用 WordPress 是中文版(好像其他语言版本也行,如果有错误提示就把 wp_embed_unregister_handler( 'youku' ); 删除即可)

2. 就是把下面的代码扔进所用主题的 functions.php 里面,注意:代码要放在 <?php ?> 里面.

  1. /** 
  2.  * 『使用 WordPress 的 Embed 功能快速插入优酷视频』改为以 iframe 方式调用 
  3.  *  by zwwooooo | zww.me 
  4.  */ 
  5. // 移除原来 WordPress 中文版内置的“使用 WordPress 的 Embed 功能快速插入优酷视频” 
  6. wp_embed_unregister_handler( 'youku' ); 
  7. // 改用 iframe 方式 
  8. function wp_iframe_handler_youku( $matches$attr$url$rawattr ) { 
  9.     // If the user supplied a fixed width AND height, use it 
  10.     if ( !emptyempty($rawattr['width']) && !emptyempty($rawattr['height']) ) { 
  11.         $width  = (int) $rawattr['width']; 
  12.         $height = (int) $rawattr['height']; 
  13.     } else { 
  14.         list( $width$height ) = wp_expand_dimensions( 480, 400, $attr['width'], $attr['height'] ); //phpfensi.com 
  15.     } 
  16.     $iframe = '<iframe width='. esc_attr($width) .' height='. esc_attr($height) .' src="http://player.youku.com/embed/'. esc_attr($matches[1]) .'" frameborder=0 allowfullscreen></iframe>'
  17.     return apply_filters( 'iframe_youku'$iframe$matches$attr$url$ramattr ); 
  18. wp_embed_register_handler( 'youku_iframe''#http://v.youku.com/v_show/id_(.*?).html#i''wp_iframe_handler_youku' ); 

PS:其他视频网站可以照葫芦画瓢改下代码就行了。

PC端embed方式移动端iframe方式快速插入优酷视频两个方法

我共享一下帮一个朋友做主题时写的这功能的代码吧,我用以前收藏的移动端判断函数来实现根据使用环境决定使用 embed 还是 iframe。

懒得具体说明了,直接上代码吧,里面有注释:另外这次的代码我特意修改做了兼容,支持任何语言的 WordPress

代码实现 PC 端 embed 方式移动端 iframe 方式快速插入优酷视频功能

1.在 functions.php 插入以下代码(有些代码[如判断是否mobile]收录自搜索,源自哪里已无从考证——好吧,我忘了,如果你是原创作者请联系我)

注:凡是加入主题的 functions.php 里面的代码都要放在 <php ?> 里面.

  1. //判断是否移动设备 Modify by zwwooooo | zww.me 
  2. function zfunc_is_mobile() { 
  3.     $user_agent = $_SERVER['HTTP_USER_AGENT']; 
  4.     $mobile_agents = Array("240x320","acer","acoon","acs-","abacho","ahong","airness","alcatel","amoi","android","anywhereyougo.com","applewebkit/525","applewebkit/532","asus","audio","au-mic","avantogo","becker","benq","bilbo","bird","blackberry","blazer","bleu","cdm-","compal","coolpad","danger","dbtel","dopod","elaine","eric","etouch","fly ","fly_","fly-","go.web","goodaccess","gradiente","grundig","haier","hedy","hitachi","htc","huawei","hutchison","inno","ipad","ipaq","ipod","jbrowser","kddi","kgt","kwc","lenovo","lg ","lg2","lg3","lg4","lg5","lg7","lg8","lg9","lg-","lge-","lge9","longcos","maemo","mercator","meridian","micromax","midp","mini","mitsu","mmm","mmp","mobi","mot-","moto","nec-","netfront","newgen","nexian","nf-browser","nintendo","nitro","nokia","nook","novarra","obigo","palm","panasonic","pantech","philips","phone","pg-","playstation","pocket","pt-","qc-","qtek","rover","sagem","sama","samu","sanyo","samsung","sch-","scooter","sec-","sendo","sgh-","sharp","siemens","sie-","softbank","sony","spice","sprint","spv","symbian","tablet","talkabout","tcl-","teleca","telit","tianyu","tim-","toshiba","tsm","up.browser","utec","utstar","verykool","virgin","vk-","voda","voxtel","vx","wap","wellco","wig browser","wii","windows ce","wireless","xda","xde","zte"); 
  5.     $is_mobile = false; 
  6.     foreach ($mobile_agents as $device) { 
  7.         if (stristr($user_agent$device)) { 
  8.             $is_mobile = true; 
  9.             break
  10.         } 
  11.     } 
  12.     return $is_mobile
  13.  
  14. //// 如果 WordPress 不是中文版,增加优酷视频自动插入 Modify by zwwooooo | zww.me 
  15. if (get_bloginfo('language') != 'zh-CN') { 
  16.     function wp_embed_handler_youku( $matches$attr$url$rawattr ) { 
  17.         // If the user supplied a fixed width AND height, use it 
  18.         if ( !emptyempty($rawattr['width']) && !emptyempty($rawattr['height']) ) { 
  19.             $width  = (int) $rawattr['width']; 
  20.             $height = (int) $rawattr['height']; 
  21.         } else { 
  22.             list( $width$height ) = wp_expand_dimensions( 480, 400, $attr['width'], $attr['height'] ); 
  23.         } 
  24.       $embed = sprintf( 
  25.         '<embed src="http://player.youku.com/player.php/sid/%1$s/v.swf" allowFullScreen="true" quality="high" width="'. esc_attr($width) .'" height="'. esc_attr($height) .'" align="middle" allowScriptAccess="always" type="application/x-shockwave-flash"></embed>'
  26.         esc_attr( $matches['video_id'] ) ); 
  27.  
  28.       return apply_filters( 'embed_youku'$embed$matches$attr$url$rawattr ); 
  29.     } 
  30.     wp_embed_register_handler( 'youku',  
  31.       '#https?://v.youku.com/v_show/id_(?<video_id>[a-z0-9_=-]+)#i',  
  32.       'wp_embed_handler_youku' ); 
  33.  
  34. //// 对移动端的视频使用 iframe 方式插入 by zwwooooo | zww.me 
  35. if( zfunc_is_mobile() ){ 
  36.     //// 如果 WordPress 是中文版,移除原来的 youku 视频代码自动插入 
  37.     if (get_bloginfo('language')==='zh-CN'
  38.         wp_embed_unregister_handler( 'youku' ); 
  39.  
  40.     //// 增加 iframe 方式的视频调用 
  41.     function wp_iframe_handler_youku( $matches$attr$url$rawattr ) { 
  42.         // If the user supplied a fixed width AND height, use it 
  43.         if ( !emptyempty($rawattr['width']) && !emptyempty($rawattr['height']) ) { 
  44.             $width  = (int) $rawattr['width']; 
  45.             $height = (int) $rawattr['height']; 
  46.         } else { 
  47.             list( $width$height ) = wp_expand_dimensions( 480, 400, $attr['width'], $attr['height'] ); 
  48.         } 
  49.         $iframe = '<iframe width='. esc_attr($width) .' height='. esc_attr($height) .' src="http://player.youku.com/embed/'. esc_attr($matches[1]) .'" frameborder=0 allowfullscreen></iframe>'
  50.         return apply_filters( 'iframe_youku'$iframe$matches$attr$url$ramattr ); 
  51.     } 
  52.     wp_embed_register_handler( 'youku_iframe''#http://v.youku.com/v_show/id_(.*?).html#i''wp_iframe_handler_youku' ); 

2.用法:直接把优酷视频地址粘贴到文章内容里面,注意要独占一行

继续玩手机去~最近刷机刷狂了~我喜欢上那些带 HALO 的 ROM 了……

在评论中,大发提醒 WordPress 已经内置了移动设备判断函数 wp_is_mobile(),这是 WordPress 3.4 增加的,我没注意,所以代码可以精简成:

  1. //// 如果 WordPress 不是中文版,增加优酷视频自动插入 Modify by zwwooooo | zww.me 
  2. if (get_bloginfo('language') != 'zh-CN') { 
  3.     function wp_embed_handler_youku( $matches$attr$url$rawattr ) { 
  4.         // If the user supplied a fixed width AND height, use it 
  5.         if ( !emptyempty($rawattr['width']) && !emptyempty($rawattr['height']) ) { 
  6.             $width  = (int) $rawattr['width']; 
  7.             $height = (int) $rawattr['height']; 
  8.         } else { 
  9.             list( $width$height ) = wp_expand_dimensions( 480, 400, $attr['width'], $attr['height'] ); 
  10.         } 
  11.       $embed = sprintf( 
  12.         '<embed src="http://player.youku.com/player.php/sid/%1$s/v.swf" allowFullScreen="true" quality="high" width="'. esc_attr($width) .'" height="'. esc_attr($height) .'" align="middle" allowScriptAccess="always" type="application/x-shockwave-flash"></embed>'
  13.         esc_attr( $matches['video_id'] ) ); 
  14.  
  15.       return apply_filters( 'embed_youku'$embed$matches$attr$url$rawattr ); 
  16.     } 
  17.     wp_embed_register_handler( 'youku',  
  18.       '#https?://v.youku.com/v_show/id_(?<video_id>[a-z0-9_=-]+)#i',  
  19.       'wp_embed_handler_youku' ); 
  20.  
  21. //// 对移动端的视频使用 iframe 方式插入 by zwwooooo | zww.me 
  22. if( wp_is_mobile() ){ 
  23.     //// 如果 WordPress 是中文版,移除原来的 youku 视频代码自动插入 
  24.     if (get_bloginfo('language')==='zh-CN'
  25.         wp_embed_unregister_handler( 'youku' ); 
  26.  
  27.     //// 增加 iframe 方式的视频调用 
  28.     function wp_iframe_handler_youku( $matches$attr$url$rawattr ) { 
  29.         // If the user supplied a fixed width AND height, use it 
  30.         if ( !emptyempty($rawattr['width']) && !emptyempty($rawattr['height']) ) { 
  31.             $width  = (int) $rawattr['width']; 
  32.             $height = (int) $rawattr['height']; 
  33.         } else { 
  34.             list( $width$height ) = wp_expand_dimensions( 480, 400, $attr['width'], $attr['height'] ); 
  35.         } 
  36.         $iframe = '<iframe width='. esc_attr($width) .' height='. esc_attr($height) .' src="http://player.youku.com/embed/'. esc_attr($matches[1]) .'" frameborder=0 allowfullscreen></iframe>'
  37.         return apply_filters( 'iframe_youku'$iframe$matches$attr$url$ramattr ); 
  38.     } 
  39.     wp_embed_register_handler( 'youku_iframe''#http://v.youku.com/v_show/id_(.*?).html#i''wp_iframe_handler_youku' ); 

OK,WordPress 真是无孔不入啊,牛x到很多人都不用了转用其他偏门或者小型的博客系统.

Tags: wordpress兼容设备 wp优酷视频

分享到: