采用iframe的方式引用优酷和土豆的视频,使得移动端不需要flash也可以观看 前言 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的方式,直接打开视频播放器播放视频。 视频预览 版权声明:本站所有文章和资源使用CC BY-NC-SA 4.0协议授权发布 , 转载应当以相同方式注明文章来自“SeaOMC.COM->为WordPress 快捷添加优酷,土豆视频,解决移动端观看视频问题!在下边可以分享本文哦! 喜欢 (0)赏[]分享 (0) 禁用Win 7/Windwos 7的UAC功能方法(附注册表reg文件) 在 WordPress 的页眉(header)和页脚(footer)添加代码 关于作者:奇跡の海 一个WordPress菜鸟! 作者主页 Limit Login Attempts Reloaded-限制登录企图,保护账户安全 wordpress后台页面出现wp-admin等出现502 Bad Gateway错误的解决方法 用批处理bat文件修改系统hosts文件(本地DNS)的方法 WordPress“正在执行例行维护,请一分钟后回来”的解决方法 WordPress获取今天/最近24小时发布的文章数量去除wordpress插件或主题更新提示找回密码WordPress登录密码的三种方法彻底关闭 WordPress 自动更新和其他功能的方法WordPress文章部分内容关注微信公众号后可见实现WordPress文章部分内容关注微信公众号后可见WordPress通过插件/代码隐藏文章内容 需登录或输入密码可见为WordPress文章内容页增加阅读全文展开功能(纯代码) 发表我的评论 取消评论 提交评论 评论通知 表情 贴图 加粗 删除线 居中 斜体 签到 Hi,您需要填写昵称和邮箱! 昵称昵称 (必填) 邮箱邮箱 (必填) 网址网址