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

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

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

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

下面说说如何实现:

『使用 WordPress 的 Embed 功能快速插入优酷视频』改为以 iframe 方式调用的方法

有点绕口,?濉F涫岛芗虻?br />
1. 确定所用 WordPress 是中文版(好像其他语言版本也行,如果有错误提示就把 wp_embed_unregister_handler( 'youku' ); 删除即可)
2. 就是把下面的代码扔进所用主题的 functions.php 里面(注意:代码要放在 <?php ?> 里面)

/**
 * 『使用 WordPress 的 Embed 功能快速插入优酷视频』改为以 iframe 方式调用
 *  by zwwooooo | zww.me
 */
// 移除原来 WordPress 中文版内置的“使用 WordPress 的 Embed 功能快速插入优酷视频”
wp_embed_unregister_handler( 'youku' );
// 改用 iframe 方式
function wp_iframe_handler_youku( $matches, $attr, $url, $rawattr ) {
    // If the user supplied a fixed width AND height, use it
    if ( !empty($rawattr['width']) && !empty($rawattr['height']) ) {
        $width  = (int) $rawattr['width'];
        $height = (int) $rawattr['height'];
    } else {
        list( $width, $height ) = wp_expand_dimensions( 480, 400, $attr['width'], $attr['height'] );
    }
    $iframe = '<iframe width='. esc_attr($width) .' height='. esc_attr($height) .' src="http://player.youku.com/embed/'. esc_attr($matches[1]) .'" frameborder=0 allowfullscreen></iframe>';
    return apply_filters( 'iframe_youku', $iframe, $matches, $attr, $url, $ramattr );
}
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 ?> 里面】

//判断是否移动设备 Modify by zwwooooo | zww.me
function zfunc_is_mobile() {
    $user_agent = $_SERVER['HTTP_USER_AGENT'];
    $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");
    $is_mobile = false;
    foreach ($mobile_agents as $device) {
        if (stristr($user_agent, $device)) {
            $is_mobile = true;
            break;
        }
    }
    return $is_mobile;
}

//// 如果 WordPress 不是中文版,增加优酷视频自动插入 Modify by zwwooooo | zww.me
if (get_bloginfo('language') != 'zh-CN') {
    function wp_embed_handler_youku( $matches, $attr, $url, $rawattr ) {
        // If the user supplied a fixed width AND height, use it
        if ( !empty($rawattr['width']) && !empty($rawattr['height']) ) {
            $width  = (int) $rawattr['width'];
            $height = (int) $rawattr['height'];
        } else {
            list( $width, $height ) = wp_expand_dimensions( 480, 400, $attr['width'], $attr['height'] );
        }
      $embed = sprintf(
        '<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>',
        esc_attr( $matches['video_id'] ) );

      return apply_filters( 'embed_youku', $embed, $matches, $attr, $url, $rawattr );
    }
    wp_embed_register_handler( 'youku',
      '#https?://v.youku.com/v_show/id_(?<video_id>[a-z0-9_=-]+)#i',
      'wp_embed_handler_youku' );
}

//// 对移动端的视频使用 iframe 方式插入 by zwwooooo | zww.me
if( zfunc_is_mobile() ){
    //// 如果 WordPress 是中文版,移除原来的 youku 视频代码自动插入
    if (get_bloginfo('language')==='zh-CN')
        wp_embed_unregister_handler( 'youku' );

    //// 增加 iframe 方式的视频调用
    function wp_iframe_handler_youku( $matches, $attr, $url, $rawattr ) {
        // If the user supplied a fixed width AND height, use it
        if ( !empty($rawattr['width']) && !empty($rawattr['height']) ) {
            $width  = (int) $rawattr['width'];
            $height = (int) $rawattr['height'];
        } else {
            list( $width, $height ) = wp_expand_dimensions( 480, 400, $attr['width'], $attr['height'] );
        }
        $iframe = '<iframe width='. esc_attr($width) .' height='. esc_attr($height) .' src="http://player.youku.com/embed/'. esc_attr($matches[1]) .'" frameborder=0 allowfullscreen></iframe>';
        return apply_filters( 'iframe_youku', $iframe, $matches, $attr, $url, $ramattr );
    }
    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 增加的,我没注意,所以代码可以精简成:

//// 如果 WordPress 不是中文版,增加优酷视频自动插入 Modify by zwwooooo | zww.me
if (get_bloginfo('language') != 'zh-CN') {
    function wp_embed_handler_youku( $matches, $attr, $url, $rawattr ) {
        // If the user supplied a fixed width AND height, use it
        if ( !empty($rawattr['width']) && !empty($rawattr['height']) ) {
            $width  = (int) $rawattr['width'];
            $height = (int) $rawattr['height'];
        } else {
            list( $width, $height ) = wp_expand_dimensions( 480, 400, $attr['width'], $attr['height'] );
        }
      $embed = sprintf(
        '<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>',
        esc_attr( $matches['video_id'] ) );

      return apply_filters( 'embed_youku', $embed, $matches, $attr, $url, $rawattr );
    }
    wp_embed_register_handler( 'youku',
      '#https?://v.youku.com/v_show/id_(?<video_id>[a-z0-9_=-]+)#i',
      'wp_embed_handler_youku' );
}

//// 对移动端的视频使用 iframe 方式插入 by zwwooooo | zww.me
if( wp_is_mobile() ){
    //// 如果 WordPress 是中文版,移除原来的 youku 视频代码自动插入
    if (get_bloginfo('language')==='zh-CN')
        wp_embed_unregister_handler( 'youku' );

    //// 增加 iframe 方式的视频调用
    function wp_iframe_handler_youku( $matches, $attr, $url, $rawattr ) {
        // If the user supplied a fixed width AND height, use it
        if ( !empty($rawattr['width']) && !empty($rawattr['height']) ) {
            $width  = (int) $rawattr['width'];
            $height = (int) $rawattr['height'];
        } else {
            list( $width, $height ) = wp_expand_dimensions( 480, 400, $attr['width'], $attr['height'] );
        }
        $iframe = '<iframe width='. esc_attr($width) .' height='. esc_attr($height) .' src="http://player.youku.com/embed/'. esc_attr($matches[1]) .'" frameborder=0 allowfullscreen></iframe>';
        return apply_filters( 'iframe_youku', $iframe, $matches, $attr, $url, $ramattr );
    }
    wp_embed_register_handler( 'youku_iframe', '#http://v.youku.com/v_show/id_(.*?).html#i', 'wp_iframe_handler_youku' );
}

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

时间: 2024-09-20 17:11:49

wordpress中用 iframe 方式插入优酷视频 兼容移动设备的相关文章

在iframe 中引用优酷视频可以正常播放,但是就是不能全屏!就高手指教!跪谢啊!

问题描述 在iframe 中引用优酷视频可以正常播放,但是就是不能全屏!就高手指教!跪谢啊! 在iframe 中视频可以正常播放,但是就是不能全屏!就高手指教!跪谢啊!但是扣扣空间里的优酷视频可以全屏啊!必须要用iframe 做的! 解决方案 这是代码 解决方案二: 解决方案三: 那就窗口化看吧 ,没关系的. 解决方案四: 解决方案五: 同求!! 楼主解决了吗?

用kingeditor编辑器 插入优酷视频,在电脑端可以正常播放,到了手机端就不行,求解;

问题描述 用kingeditor编辑器 插入优酷视频,在电脑端可以正常播放,到了手机端就不行,求解: 用kingeditor编辑器 插入优酷视频,在电脑端可以正常播放,到了手机端就不行,求解: 解决方案 手机端改成调用网页的话,也是可以播放的 解决方案二: 手机端用浏览器试试看

使用Vitamio打造自己的Android万能播放器(5)——在线播放(播放优酷视频)

前言 为了保证每周一篇的进度,又由于Vitamio新版本没有发布, 决定推迟本地播放的一些功能(截图.视频时间.尺寸等),跳过直接写在线播放部分的章节.从Vitamio的介绍可以看得出,其支持http.m3u8等多种网络协议,本章将编写播放优酷视频的例子.   声明 欢迎转载,但请保留文章原始出处:)  博客园:http://www.cnblogs.com 农民伯伯: http://over140.cnblogs.com    系列 1.使用Vitamio打造自己的Android万能播放器(1)

优酷视频不能全屏问题解决办法

优酷视频不能全屏问题解决办法 一.取消全屏, 右键点击播放器, 选择菜单中的"设置-"("setting-"), 在"显示"(Display)中的"启用硬件加速"选项取消, 重新点击全屏观看即可看到画面. 二.flash player 版本过低,网络正常连接状态下,打开 C:\WINDOW\Ssystem32\MacromedFlash 双击 FlashUtil9e.exe 安装该程序,安装完毕,手动重启电脑!还不行的话就直接

Android 使用Vitamio打造自己的万能播放器(5)——在线播放(播放优酷视频)_Android

 前言 为了保证每周一篇的进度,又由于Vitamio新版本没有发布, 决定推迟本地播放的一些功能(截图.视频时间.尺寸等),跳过直接写在线播放部分的章节.从Vitamio的介绍可以看得出,其支持http.m3u8等多种网络协议,本章将编写播放优酷视频的例子. 系列 1.Android使用Vitamio打造自己的万能播放器(1)--准备 2.Android使用Vitamio打造自己的Android万能播放器(2)-- 手势控制亮度.音量.缩放 3.Android使用Vitamio打造自己的Andr

优酷土豆以100%换股方式合并 优酷占股71.5%

优酷土豆以100%换股方式合并 优酷占股71.5% 宋体,serif; font-size:14px"> 腾讯科技讯(月古)3月12日消息,今天下午,优酷(纽交所上市:YOKU)土豆(纳斯达克上市:TUDO)宣布将以100%换股的方式正式合并. 合并后,优酷股东及http://www.aliyun.com/zixun/aggregation/5810.html">美国存托凭证持有者将拥有新公司约71.5%的股份,土豆股东及美国存托凭证持有者将拥有新公司约28.5%的股份.合

优酷视频率先使用云记录技术

中国第一视频网站优酷率先使用了云记录技术,这个技术最大的亮点是可以跨多平台.多终端,即时同步上传观看记录,真正实现三网合一.多屏合一.不论用户使用何种终端观看视频,都可以读取在其他终端上的观看记录,包括视频记录和进度记录. 其实我们已经听了太多的云技术说法,但人"云"亦"云",大多都是不实用的概念和噱头.而优酷不同,通过云技术真正解决了用户遇到问题,提升了用户的视频体验,给我们带来了最好用的"SL大法"(超怀旧经典的游戏存取玩法). 多种方式看优

Win7系统谷歌浏览器打不开优酷视频怎么解决?

Win7系统谷歌浏览器打不开优酷视频怎么解决?   故障原因:其实很大情况是和chrome谷歌浏览器的插件有关,请检查是否有给chrome安装了屏蔽优酷广告的插件. 解决方法:如果有安装,请暂时去掉插件试试广告是视频网站的收益根本,所以有时安装去广告插件反而会导致和网站不兼容引起观看问题.

谷歌Chrome浏览器观看优酷视频崩溃怎么办

  谷歌Chrome浏览器观看优酷视频崩溃怎么办 其实很大情况是和chrome谷歌浏览器的插件有关,请检查是否有给chrome安装了屏蔽优酷广告的插件.如果有安装,请暂时去掉插件试试.如果担心广告,可以试试ADsafe净网大师.