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

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

前言

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

解决方案

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

函数代码

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

//addyoukuusingiframefunctionwp_iframe_handler_youku($matches,$attr,$url,$rawattr){//IftheusersuppliedafixedwidthANDheight,useitif(!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='<iframewidth='.esc_attr($width).'height='.esc_attr($height).'src="//player.youku.com/embed/'.esc_attr($matches[1]).'"frameborder=0allowfullscreen></iframe>';returnapply_filters('iframe_youku',$iframe,$matches,$attr,$url,$ramattr);}wp_embed_register_handler('youku_iframe','#//v.youku.com/v_show/id_(.*?).html#i','wp_iframe_handler_youku');//addtudouusingiframefunctionwp_iframe_handler_tudou($matches,$attr,$url,$rawattr){//IftheusersuppliedafixedwidthANDheight,useitif(!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='<iframewidth='.esc_attr($width).'height='.esc_attr($height).'src="//www.tudou.com/programs/view/html5embed.action?code='.esc_attr($matches[1]).'"frameborder=0allowfullscreen></iframe>';returnapply_filters('iframe_tudou',$iframe,$matches,$attr,$url,$ramattr);}wp_embed_register_handler('tudou_iframe','#//www.tudou.com/programs/view/(.*?)/#i','wp_iframe_handler_tudou');wp_embed_unregister_handler('youku');wp_embed_unregister_handler('tudou');

视频添加方法

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

代码解释

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

缺点

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

支付宝转账赞助

支付宝扫一扫赞助

微信转账赞助

微信扫一扫赞助

留言与评论(共有 0 条评论)
   
验证码: