快速插入优酷视频改为 iframe 方式兼容移动设备

» 2013-07-12 WordPress 59条评论

现在的 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 ?> 里面)

/**
 * 『使用 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:其他视频网站可以照葫芦画瓢改下代码就行了。

最近好忙啊,也爽!

撤~洗澡睡觉去~

zww
or
oooo

“快速插入优酷视频改为 iframe 方式兼容移动设备”有59条评论

  1. 老杨 says:

    啊哈

  2. 一堵墙 says:

    然后手机看的时候就会变成 HTML5 版本?

    1. zwwooooo says:

      @一堵墙
      pc、手机都一样

    2. jfxiao07 says:

      @一堵墙
      手机上是 html5 视频来的,我用 ios 设备打开都可以看到视频了。

  3. :mrgreen: 这个可以有。
    不过很少很少…插视频。

  4. 不错。能问个问题不,在不删除wp_embed_unregister_handler( 'youku' );前提下,能否实现iframe方式呢?就是两钟方法并存。谢谢

    1. zwwooooo says:

      @摇滚百科网
      你这不是蛋疼么……

  5. 忆昔 says:

    说到视频,搜狐视频安卓客户端开始有广告了,真是广告无处不在啊

    1. zwwooooo says:

      @忆昔
      现在到处是广告,还是Y2B厚道,看5秒你决定看不看下去

  6. 大发 says:

    啊啊啊啊,我不乐意插视频,太难看了。。

    1. zwwooooo says:

      @大发
      我也很少吧

  7. W3Cshare says:

    :mrgreen: 整个插音乐的也不错

    1. zwwooooo says:

      @W3Cshare
      插音乐方法很多了吧

  8. Laycher says:

    只支持优酷
    如果做成插件,支持其他视屏网站,那应该很棒。

    1. zwwooooo says:

      @Laycher
      有这类插件,我只是写个方法而已

  9. Showfom says:

    哥把土豆的也弄好了,去写个文章得瑟下

    1. zwwooooo says:

      @Showfom
      :shock: 你竟然还写着博客,我以为你跷二郎腿早就不写了 :grin:

  10. 现在的优酷做的就是牛X

    1. zwwooooo says:

      @电影天堂
      可惜广告多而且时间长

  11. ilikecss says:

    这个挺好的,方便了不少呢

    1. zwwooooo says:

      @ilikecss
      对于经常分享视频的博客来说是非常方便的

  12. 小草元 says:

    有利有敝吧,影响seo吧,可能。还有优酷现在不能插个.swf的falsh么?

    1. zwwooooo says:

      @小草元
      这里是针对移动设备,分享个视频考虑啥seo……另外这个跟直接插入代码是一样效果的 :arrow:

  13. tiandi says:

    还没插过视频过。

  14. 集趣 says:

    这个换成通用代码是很有必要的

    1. zwwooooo says:

      @集趣
      相当方便

    2. 集趣 says:

      @zwwooooo
      的确,但是有一个缺点,输入的视频URL,在数据库中只是一条URL,在当前主题下可以被转换成视频,但在RSS中,只会显示URL

    3. zwwooooo says:

      @集趣
      你可以用我昨天的文章哪里的代码再加个 is_feed 判断来解决。

  15. DickWu says:

    的确是。我现在非常痛恨Flash。。。非常痛恨。。。

  16. 郑永 says:

    呵呵,大家都忙,不忘分享好东西,谢谢哈 :)

    1. zwwooooo says:

      @郑永
      嘻嘻,其实我刚才又折腾了个后台回复评论可以插入表情 :grin:

  17. axiu says:

    啊哈……

    1. zwwooooo says:

      @axiu
      妖猴……

  18. 我刚刚试了一下。挺好的。不过视频的宽高貌似有点问题。

    1. zwwooooo says:

      @放肆雷特
      宽高你要css来写,用自适应。

  19. 海蓝 says:

    我的都是用的优酷那个分享里的代码

    1. zwwooooo says:

      @海蓝
      如果不想偷懒的话,就你这种好了

回复给 一堵墙 ¬
取消回复

昵称 *

网址

B em del U Link Code Quote