搜索
Hi~登录注册
查看: 1698|回复: 0

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

[复制链接]

1892

主题

1899

帖子

6406

积分

管理员

Rank: 9Rank: 9Rank: 9

积分
6406
发表于 2015-5-14 13:48:27 | 显示全部楼层 |阅读模式
本文我们来讲讲在wordpress中快速插入优酷视频mbed方式改为 iframe,这个方式的好处是可以兼容移动设备浏览,一举两得。
</div><p>现在的 WordPress 中文版内置了&ldquo;使用 WordPress 的 Embed 功能快速插入优酷视频&rdquo;的功能:只要在写文章时,独占一行粘贴优酷视频地址就可以自动调用次视频。<br />
<br />
例如:我在下一行独占一行插入 http://v.youku.com/v_show/id_XNTgxNzI3MDcy.html 这个优酷视频地址,就可以自动调用优酷视频了。<br />
<br />
但是这是用 Embed 的,PC端没问题,手机浏览器因为不支持 Flash 所以是无法显示和播放视频的,而现在提供的 <a href="/tags.php/iframe/" target="_blank">iframe</a> 方式插入的视频就支持手机。<br />
<br />
下面说说如何实现:<br />
<br />
『使用 WordPress 的 Embed 功能快速插入优酷视频』改为以 iframe 方式调用的方法<br />
<br />
有点绕口,?濉F涫岛芗虻?br />
1. 确定所用 WordPress 是中文版(好像其他语言版本也行,如果有错误提示就把 wp_embed_unregister_handler( 'youku' ); 删除即可)<br />
2. 就是把下面的代码扔进所用主题的 functions.php 里面(注意:代码要放在 &lt;?php ?&gt; 里面)<br />
<br />
/**<br />
&nbsp;* 『使用 WordPress 的 Embed 功能快速插入优酷视频』改为以 iframe 方式调用<br />
&nbsp;*&nbsp; by zwwooooo | zww.me<br />
&nbsp;*/<br />
// 移除原来 WordPress 中文版内置的&ldquo;使用 WordPress 的 Embed 功能快速插入优酷视频&rdquo;<br />
wp_embed_unregister_handler( 'youku' );<br />
// 改用 iframe 方式<br />
function wp_iframe_handler_youku( $matches, $attr, $url, $rawattr ) {<br />
&nbsp;&nbsp;&nbsp; // If the user supplied a fixed width AND height, use it<br />
&nbsp;&nbsp;&nbsp; if ( !empty($rawattr['width']) &amp;&amp; !empty($rawattr['height']) ) {<br />
&nbsp;&nbsp;&nbsp; &nbsp;&nbsp;&nbsp; $width&nbsp; = (int) $rawattr['width'];<br />
&nbsp;&nbsp;&nbsp; &nbsp;&nbsp;&nbsp; $height = (int) $rawattr['height'];<br />
&nbsp;&nbsp;&nbsp; } else {<br />
&nbsp;&nbsp;&nbsp; &nbsp;&nbsp;&nbsp; list( $width, $height ) = wp_expand_dimensions( 480, 400, $attr['width'], $attr['height'] );<br />
&nbsp;&nbsp;&nbsp; }<br />
&nbsp;&nbsp;&nbsp; $iframe = '&lt;iframe width='. esc_attr($width) .' height='. esc_attr($height) .' src=&quot;http://player.youku.com/embed/'. esc_attr($matches[1]) .'&quot; frameborder=0 allowfullscreen&gt;&lt;/iframe&gt;';<br />
&nbsp;&nbsp;&nbsp; return apply_filters( 'iframe_youku', $iframe, $matches, $attr, $url, $ramattr );<br />
}<br />
wp_embed_register_handler( 'youku_iframe', '#http://v.youku.com/v_show/id_(.*?).html#i', 'wp_iframe_handler_youku' );<br />
<br />
PS:其他视频网站可以照葫芦画瓢改下代码就行了。<br />
<br />
<br />
PC端embed方式移动端iframe方式快速插入优酷视频两个方法<br />
<br />
我共享一下帮一个朋友做主题时写的这功能的代码吧,我用以前收藏的移动端判断函数来实现根据使用环境决定使用 embed 还是 iframe。<br />
<br />
懒得具体说明了,直接上代码吧,里面有注释:另外这次的代码我特意修改做了兼容,支持任何语言的 WordPress<br />
代码实现 PC 端 embed 方式移动端 iframe 方式快速插入优酷视频功能<br />
<br />
1. 在 functions.php 插入以下代码(有些代码[如判断是否mobile]收录自搜索,源自哪里已无从考证&mdash;&mdash;好吧,我忘了,如果你是原创作者请联系我)<br />
<br />
【注:凡是加入主题的 functions.php 里面的代码都要放在 &lt;php ?&gt; 里面】<br />
<br />
//判断是否移动设备 Modify by zwwooooo | zww.me<br />
function zfunc_is_mobile() {<br />
&nbsp;&nbsp;&nbsp; $user_agent = $_SERVER['HTTP_USER_AGENT'];<br />
&nbsp;&nbsp;&nbsp; $mobile_agents = Array(&quot;240x320&quot;,&quot;acer&quot;,&quot;acoon&quot;,&quot;acs-&quot;,&quot;abacho&quot;,&quot;ahong&quot;,&quot;airness&quot;,&quot;alcatel&quot;,&quot;amoi&quot;,&quot;android&quot;,&quot;anywhereyougo.com&quot;,&quot;applewebkit/525&quot;,&quot;applewebkit/532&quot;,&quot;asus&quot;,&quot;audio&quot;,&quot;au-mic&quot;,&quot;avantogo&quot;,&quot;becker&quot;,&quot;benq&quot;,&quot;bilbo&quot;,&quot;bird&quot;,&quot;blackberry&quot;,&quot;blazer&quot;,&quot;bleu&quot;,&quot;cdm-&quot;,&quot;compal&quot;,&quot;coolpad&quot;,&quot;danger&quot;,&quot;dbtel&quot;,&quot;dopod&quot;,&quot;elaine&quot;,&quot;eric&quot;,&quot;etouch&quot;,&quot;fly &quot;,&quot;fly_&quot;,&quot;fly-&quot;,&quot;go.web&quot;,&quot;goodaccess&quot;,&quot;gradiente&quot;,&quot;grundig&quot;,&quot;haier&quot;,&quot;hedy&quot;,&quot;hitachi&quot;,&quot;htc&quot;,&quot;huawei&quot;,&quot;hutchison&quot;,&quot;inno&quot;,&quot;ipad&quot;,&quot;ipaq&quot;,&quot;ipod&quot;,&quot;jbrowser&quot;,&quot;kddi&quot;,&quot;kgt&quot;,&quot;kwc&quot;,&quot;lenovo&quot;,&quot;lg &quot;,&quot;lg2&quot;,&quot;lg3&quot;,&quot;lg4&quot;,&quot;lg5&quot;,&quot;lg7&quot;,&quot;lg8&quot;,&quot;lg9&quot;,&quot;lg-&quot;,&quot;lge-&quot;,&quot;lge9&quot;,&quot;longcos&quot;,&quot;maemo&quot;,&quot;mercator&quot;,&quot;meridian&quot;,&quot;micromax&quot;,&quot;midp&quot;,&quot;mini&quot;,&quot;mitsu&quot;,&quot;mmm&quot;,&quot;mmp&quot;,&quot;mobi&quot;,&quot;mot-&quot;,&quot;moto&quot;,&quot;nec-&quot;,&quot;netfront&quot;,&quot;newgen&quot;,&quot;nexian&quot;,&quot;nf-browser&quot;,&quot;nintendo&quot;,&quot;nitro&quot;,&quot;nokia&quot;,&quot;nook&quot;,&quot;novarra&quot;,&quot;obigo&quot;,&quot;palm&quot;,&quot;panasonic&quot;,&quot;pantech&quot;,&quot;phili<a href="/fw/photo.html" target="_blank">ps</a>&quot;,&quot;phone&quot;,&quot;pg-&quot;,&quot;playstation&quot;,&quot;pocket&quot;,&quot;pt-&quot;,&quot;qc-&quot;,&quot;qtek&quot;,&quot;rover&quot;,&quot;sagem&quot;,&quot;sama&quot;,&quot;samu&quot;,&quot;sanyo&quot;,&quot;samsung&quot;,&quot;sch-&quot;,&quot;scooter&quot;,&quot;sec-&quot;,&quot;sendo&quot;,&quot;sgh-&quot;,&quot;sharp&quot;,&quot;siemens&quot;,&quot;sie-&quot;,&quot;softbank&quot;,&quot;sony&quot;,&quot;spice&quot;,&quot;sprint&quot;,&quot;spv&quot;,&quot;symbian&quot;,&quot;tablet&quot;,&quot;talkabout&quot;,&quot;tcl-&quot;,&quot;teleca&quot;,&quot;telit&quot;,&quot;tianyu&quot;,&quot;tim-&quot;,&quot;toshiba&quot;,&quot;tsm&quot;,&quot;up.browser&quot;,&quot;utec&quot;,&quot;utstar&quot;,&quot;verykool&quot;,&quot;virgin&quot;,&quot;vk-&quot;,&quot;voda&quot;,&quot;voxtel&quot;,&quot;vx&quot;,&quot;wap&quot;,&quot;wellco&quot;,&quot;wig browser&quot;,&quot;wii&quot;,&quot;windows ce&quot;,&quot;wireless&quot;,&quot;xda&quot;,&quot;xde&quot;,&quot;zte&quot;);<br />
&nbsp;&nbsp;&nbsp; $is_mobile = false;<br />
&nbsp;&nbsp;&nbsp; <a href="/tags.php/foreach/" target="_blank">foreach</a> ($mobile_agents as $device) {<br />
&nbsp;&nbsp;&nbsp; &nbsp;&nbsp;&nbsp; if (stristr($user_agent, $device)) {<br />
&nbsp;&nbsp;&nbsp; &nbsp;&nbsp;&nbsp; &nbsp;&nbsp;&nbsp; $is_mobile = true;<br />
&nbsp;&nbsp;&nbsp; &nbsp;&nbsp;&nbsp; &nbsp;&nbsp;&nbsp; break;<br />
&nbsp;&nbsp;&nbsp; &nbsp;&nbsp;&nbsp; }<br />
&nbsp;&nbsp;&nbsp; }<br />
&nbsp;&nbsp;&nbsp; return $is_mobile;<br />
}<br />
<br />
//// 如果 WordPress 不是中文版,增加优酷视频自动插入 Modify by zwwooooo | zww.me<br />
if (get_bloginfo('language') != 'zh-CN') {<br />
&nbsp;&nbsp;&nbsp; function wp_embed_handler_youku( $matches, $attr, $url, $rawattr ) {<br />
&nbsp;&nbsp;&nbsp; &nbsp;&nbsp;&nbsp; // If the user supplied a fixed width AND height, use it<br />
&nbsp;&nbsp;&nbsp; &nbsp;&nbsp;&nbsp; if ( !empty($rawattr['width']) &amp;&amp; !empty($rawattr['height']) ) {<br />
&nbsp;&nbsp;&nbsp; &nbsp;&nbsp;&nbsp; &nbsp;&nbsp;&nbsp; $width&nbsp; = (int) $rawattr['width'];<br />
&nbsp;&nbsp;&nbsp; &nbsp;&nbsp;&nbsp; &nbsp;&nbsp;&nbsp; $height = (int) $rawattr['height'];<br />
&nbsp;&nbsp;&nbsp; &nbsp;&nbsp;&nbsp; } else {<br />
&nbsp;&nbsp;&nbsp; &nbsp;&nbsp;&nbsp; &nbsp;&nbsp;&nbsp; list( $width, $height ) = wp_expand_dimensions( 480, 400, $attr['width'], $attr['height'] );<br />
&nbsp;&nbsp;&nbsp; &nbsp;&nbsp;&nbsp; }<br />
&nbsp;&nbsp;&nbsp; &nbsp; $embed = sprintf(<br />
&nbsp;&nbsp;&nbsp; &nbsp;&nbsp;&nbsp; '&lt;embed src=&quot;http://player.youku.com/player.php/sid/%1$s/v.swf&quot; allowFullScreen=&quot;true&quot; quality=&quot;high&quot; width=&quot;'. esc_attr($width) .'&quot; height=&quot;'. esc_attr($height) .'&quot; align=&quot;middle&quot; allowScriptAccess=&quot;always&quot; type=&quot;application/x-shockwave-flash&quot;&gt;&lt;/embed&gt;',<br />
&nbsp;&nbsp;&nbsp; &nbsp;&nbsp;&nbsp; esc_attr( $matches['video_id'] ) );<br />
<br />
&nbsp;&nbsp;&nbsp; &nbsp; return apply_filters( 'embed_youku', $embed, $matches, $attr, $url, $rawattr );<br />
&nbsp;&nbsp;&nbsp; }<br />
&nbsp;&nbsp;&nbsp; wp_embed_register_handler( 'youku', <br />
&nbsp;&nbsp;&nbsp; &nbsp; '#https?://v.youku.com/v_show/id_(?&lt;video_id&gt;[a-z0-9_=-]+)#i', <br />
&nbsp;&nbsp;&nbsp; &nbsp; 'wp_embed_handler_youku' );<br />
}<br />
<br />
//// 对移动端的视频使用 iframe 方式插入 by zwwooooo | zww.me<br />
if( zfunc_is_mobile() ){<br />
&nbsp;&nbsp;&nbsp; //// 如果 WordPress 是中文版,移除原来的 youku 视频代码自动插入<br />
&nbsp;&nbsp;&nbsp; if (get_bloginfo('language')==='zh-CN')<br />
&nbsp;&nbsp;&nbsp; &nbsp;&nbsp;&nbsp; wp_embed_unregister_handler( 'youku' );<br />
<br />
&nbsp;&nbsp;&nbsp; //// 增加 iframe 方式的视频调用<br />
&nbsp;&nbsp;&nbsp; function wp_iframe_handler_youku( $matches, $attr, $url, $rawattr ) {<br />
&nbsp;&nbsp;&nbsp; &nbsp;&nbsp;&nbsp; // If the user supplied a fixed width AND height, use it<br />
&nbsp;&nbsp;&nbsp; &nbsp;&nbsp;&nbsp; if ( !empty($rawattr['width']) &amp;&amp; !empty($rawattr['height']) ) {<br />
&nbsp;&nbsp;&nbsp; &nbsp;&nbsp;&nbsp; &nbsp;&nbsp;&nbsp; $width&nbsp; = (int) $rawattr['width'];<br />
&nbsp;&nbsp;&nbsp; &nbsp;&nbsp;&nbsp; &nbsp;&nbsp;&nbsp; $height = (int) $rawattr['height'];<br />
&nbsp;&nbsp;&nbsp; &nbsp;&nbsp;&nbsp; } else {<br />
&nbsp;&nbsp;&nbsp; &nbsp;&nbsp;&nbsp; &nbsp;&nbsp;&nbsp; list( $width, $height ) = wp_expand_dimensions( 480, 400, $attr['width'], $attr['height'] );<br />
&nbsp;&nbsp;&nbsp; &nbsp;&nbsp;&nbsp; }<br />
&nbsp;&nbsp;&nbsp; &nbsp;&nbsp;&nbsp; $iframe = '&lt;iframe width='. esc_attr($width) .' height='. esc_attr($height) .' src=&quot;http://player.youku.com/embed/'. esc_attr($matches[1]) .'&quot; frameborder=0 allowfullscreen&gt;&lt;/iframe&gt;';<br />
&nbsp;&nbsp;&nbsp; &nbsp;&nbsp;&nbsp; return apply_filters( 'iframe_youku', $iframe, $matches, $attr, $url, $ramattr );<br />
&nbsp;&nbsp;&nbsp; }<br />
&nbsp;&nbsp;&nbsp; wp_embed_register_handler( 'youku_iframe', '#http://v.youku.com/v_show/id_(.*?).html#i', 'wp_iframe_handler_youku' );<br />
}<br />
<br />
2. 用法:直接把优酷视频地址粘贴到文章内容里面,注意要独占一行<br />
<br />
-------------<br />
<br />
继续玩手机去~最近刷机刷狂了~<br />
<br />
哦,我喜欢上那些带 HALO 的 ROM 了&hellip;&hellip;<br />
<br />
-------------<br />
<br />
在评论中,大发提醒 WordPress 已经内置了移动设备判断函数 wp_is_mobile(),这是 WordPress 3.4 增加的,我没注意,所以代码可以精简成:<br />
<br />
//// 如果 WordPress 不是中文版,增加优酷视频自动插入 Modify by zwwooooo | zww.me<br />
if (get_bloginfo('language') != 'zh-CN') {<br />
&nbsp;&nbsp;&nbsp; function wp_embed_handler_youku( $matches, $attr, $url, $rawattr ) {<br />
&nbsp;&nbsp;&nbsp; &nbsp;&nbsp;&nbsp; // If the user supplied a fixed width AND height, use it<br />
&nbsp;&nbsp;&nbsp; &nbsp;&nbsp;&nbsp; if ( !empty($rawattr['width']) &amp;&amp; !empty($rawattr['height']) ) {<br />
&nbsp;&nbsp;&nbsp; &nbsp;&nbsp;&nbsp; &nbsp;&nbsp;&nbsp; $width&nbsp; = (int) $rawattr['width'];<br />
&nbsp;&nbsp;&nbsp; &nbsp;&nbsp;&nbsp; &nbsp;&nbsp;&nbsp; $height = (int) $rawattr['height'];<br />
&nbsp;&nbsp;&nbsp; &nbsp;&nbsp;&nbsp; } else {<br />
&nbsp;&nbsp;&nbsp; &nbsp;&nbsp;&nbsp; &nbsp;&nbsp;&nbsp; list( $width, $height ) = wp_expand_dimensions( 480, 400, $attr['width'], $attr['height'] );<br />
&nbsp;&nbsp;&nbsp; &nbsp;&nbsp;&nbsp; }<br />
&nbsp;&nbsp;&nbsp; &nbsp; $embed = sprintf(<br />
&nbsp;&nbsp;&nbsp; &nbsp;&nbsp;&nbsp; '&lt;embed src=&quot;http://player.youku.com/player.php/sid/%1$s/v.swf&quot; allowFullScreen=&quot;true&quot; quality=&quot;high&quot; width=&quot;'. esc_attr($width) .'&quot; height=&quot;'. esc_attr($height) .'&quot; align=&quot;middle&quot; allowScriptAccess=&quot;always&quot; type=&quot;application/x-shockwave-flash&quot;&gt;&lt;/embed&gt;',<br />
&nbsp;&nbsp;&nbsp; &nbsp;&nbsp;&nbsp; esc_attr( $matches['video_id'] ) );<br />
<br />
&nbsp;&nbsp;&nbsp; &nbsp; return apply_filters( 'embed_youku', $embed, $matches, $attr, $url, $rawattr );<br />
&nbsp;&nbsp;&nbsp; }<br />
&nbsp;&nbsp;&nbsp; wp_embed_register_handler( 'youku', <br />
&nbsp;&nbsp;&nbsp; &nbsp; '#https?://v.youku.com/v_show/id_(?&lt;video_id&gt;[a-z0-9_=-]+)#i', <br />
&nbsp;&nbsp;&nbsp; &nbsp; 'wp_embed_handler_youku' );<br />
}<br />
<br />
//// 对移动端的视频使用 iframe 方式插入 by zwwooooo | zww.me<br />
if( wp_is_mobile() ){<br />
&nbsp;&nbsp;&nbsp; //// 如果 WordPress 是中文版,移除原来的 youku 视频代码自动插入<br />
&nbsp;&nbsp;&nbsp; if (get_bloginfo('language')==='zh-CN')<br />
&nbsp;&nbsp;&nbsp; &nbsp;&nbsp;&nbsp; wp_embed_unregister_handler( 'youku' );<br />
<br />
&nbsp;&nbsp;&nbsp; //// 增加 iframe 方式的视频调用<br />
&nbsp;&nbsp;&nbsp; function wp_iframe_handler_youku( $matches, $attr, $url, $rawattr ) {<br />
&nbsp;&nbsp;&nbsp; &nbsp;&nbsp;&nbsp; // If the user supplied a fixed width AND height, use it<br />
&nbsp;&nbsp;&nbsp; &nbsp;&nbsp;&nbsp; if ( !empty($rawattr['width']) &amp;&amp; !empty($rawattr['height']) ) {<br />
&nbsp;&nbsp;&nbsp; &nbsp;&nbsp;&nbsp; &nbsp;&nbsp;&nbsp; $width&nbsp; = (int) $rawattr['width'];<br />
&nbsp;&nbsp;&nbsp; &nbsp;&nbsp;&nbsp; &nbsp;&nbsp;&nbsp; $height = (int) $rawattr['height'];<br />
&nbsp;&nbsp;&nbsp; &nbsp;&nbsp;&nbsp; } else {<br />
&nbsp;&nbsp;&nbsp; &nbsp;&nbsp;&nbsp; &nbsp;&nbsp;&nbsp; list( $width, $height ) = wp_expand_dimensions( 480, 400, $attr['width'], $attr['height'] );<br />
&nbsp;&nbsp;&nbsp; &nbsp;&nbsp;&nbsp; }<br />
&nbsp;&nbsp;&nbsp; &nbsp;&nbsp;&nbsp; $iframe = '&lt;iframe width='. esc_attr($width) .' height='. esc_attr($height) .' src=&quot;http://player.youku.com/embed/'. esc_attr($matches[1]) .'&quot; frameborder=0 allowfullscreen&gt;&lt;/iframe&gt;';<br />
&nbsp;&nbsp;&nbsp; &nbsp;&nbsp;&nbsp; return apply_filters( 'iframe_youku', $iframe, $matches, $attr, $url, $ramattr );<br />
&nbsp;&nbsp;&nbsp; }<br />
&nbsp;&nbsp;&nbsp; wp_embed_register_handler( 'youku_iframe', '#http://v.youku.com/v_show/id_(.*?).html#i', 'wp_iframe_handler_youku' );<br />
}<br />
<br />
OK,WordPress 真是无孔不入啊,牛x到很多人都不用了转用其他偏门或者小型的博客系统
公众微信:idc5ahl
公众QQ:吾爱互联
关注公众微信,公众QQ每天领现金卡密
卡密介绍(http://www.5ahl.com/thread-2182-1-1.html
回复

使用道具 举报

游客
回复
您需要登录后才可以回帖 登录 | 点我注册

快速回复 返回顶部 返回列表