• 欢迎访问乐趣公园网站,WordPress信息,WordPress教程,推荐使用最新版火狐浏览器和Chrome浏览器访问本网站,欢迎加入乐趣公园 QQ群
  • Git主题现已支持PHP7版本,速度应该会提高不少,不过云落的网站本来就很快了,所以感觉不是太明显
  • 最新版Git主题已支持说说碎语功能,可像添加文章一样直接添加说说,新建说说页面即可,最后重新保存固定连接,演示地址
  • 如果您觉得本站非常有看点,那么赶紧使用Ctrl+D 收藏乐趣公园吧
  • 云落的淘宝店铺已经开张了哦,传送门:https://kimipet.taobao.com

WordPress快捷添加优酷,土豆视频,解决移动端观看问题

WordPress 云落 3年前 (2014-10-23) 987次浏览 已收录 13个评论
文章目录[隐藏]

采用 iframe 的方式引用优酷和土豆的视频,使得移动端不需要 flash 也可以观看

WordPress 快捷添加优酷,土豆视频,解决移动端观看问题

前言

WordPress 中文版内置了「使用 WordPress 的 Embed 功能快速插入优酷视频」的功能,但是代码是用 embed 实现的,也就是说,只引用了一个 .swf 文件,这样不方便移动客户端以及高端主流浏览器的使用。

解决方案

如今 HTML5 技术流行,国外的视频分享网站鼻祖 YouTube 早已使用 iframe 方式来站外引用视频,并支持 HTML5 + Flash ,基本兼容所有的客户端和浏览器。在国内最大的两只视频网站优酷和土豆也已经有类似的方法。

函数代码

在主题函数文件function.php里面添加以下代码即可,保证在最后一个?>之前就好了

// add youku using 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' );
// add tudou using iframe
function wp_iframe_handler_tudou( $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://www.tudou.com/programs/view/html5embed.action?code='. esc_attr($matches[1]) .'" frameborder=0 allowfullscreen></iframe>';
    return apply_filters( 'iframe_tudou', $iframe, $matches, $attr, $url, $ramattr );
}
wp_embed_register_handler( 'tudou_iframe', '#http://www.tudou.com/programs/view/(.*?)/#i', 'wp_iframe_handler_tudou' );
wp_embed_unregister_handler('youku');
wp_embed_unregister_handler('tudou');

视频添加方法

现在改变了原来的视频添加方法,那么现在怎么添加呢?
现在的方法更简单,直接输出视频链接即可,比如
http://v.youku.com/v_show/id_XODA2MTY0MjA4.html

代码解释

代码的作用是禁用了优酷和土豆的 embed 加载方式,改为了 iframe 加载,所以移动端用户浏览网页的时候是不需要 flash 也可以观看视频的

缺点

说缺点也不太算,但还是要说下的,视频在移动端的时候是无法进行自适应处理的,但是播放的时候使用 HTML5 的方式,直接打开视频播放器播放视频。

视频预览


文章改编自通天塔


乐趣公园 , 版权所有丨如未注明 , 均为原创丨本网站采用BY-NC-SA协议进行授权
转载请注明原文链接:WordPress 快捷添加优酷,土豆视频,解决移动端观看问题
喜欢 (9)
云落
关于作者:
无折腾,不生活,我是一个WordPress菜鸟,一个玩淘宝的卖家,欢迎你认识我,我是云落!
发表我的评论
取消评论
表情 加粗 删除线 居中 斜体 签到

Hi,您需要填写昵称和邮箱!

  • 昵称 (必填)
  • 邮箱 (必填)
  • 网址
(13)个小伙伴在吐槽
  1. 其实我一直在想办法破解优酷等视频网站的广告,用他们的视频,每天播放都有广告,我在其它网站看到了,引用优酷的,用的自己的播放器,就没有广告,不知道是修改了什么地方
    李建林博客2014-12-11 22:01 回复 Windows 7 | Chrome 31.0.1650.63
  2. 没有广告就好了
    20277698592014-11-29 20:03 回复 Windows XP | Chrome 38.0.2125.111
    • 云落
      用CK吧
      云落2014-11-30 07:03 回复 Android 4.4.4 | WordPress客户端 android