WordPress插入的优酷视频在手机上无法正常显示解决方法

最近,一客户的网站上需要插入优酷视频。插入视频后,发现只有在PC端正常显示,在手机上显示“无法加载插件”,无法正常观看,直接影响了用户体验。

手机端显示效果

遇到这种问题如何解决呢?

 

WordPress中文版可以直接插入优酷视频地址,非常方便,不过手机上不显示,先来一个互联网上的讲解办法:
在主题函数文件function.php里面添加以下代码即可,保证在最后一个?>之前就好了

//Youkufunction wp_iframe_handler_youku($matches, $attr, $url, $rawattr) { if (wp_is_mobile()) { $height = 200; } else { $height = 485; } $iframe = '<iframe width=100% height=' . esc_attr($height) . 'px 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');// Tudoufunction wp_iframe_handler_tudou($matches, $attr, $url, $rawattr) { if (wp_is_mobile()) { $height = 200; } else { $height = 485; } $iframe = '<iframe width=100% height=' . esc_attr($height) . 'px 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');//Remove zh_CN Default handlerwp_embed_unregister_handler('youku');wp_embed_unregister_handler('tudou');

 

这样插入的优酷视频地址就手机可正常播放了。

 

这种方法是用了< iframe >标签,也就是优酷视频分享给出的通用代码,言外之意就是把优酷视频的那个页面潜入到了你的网站上,据说这个标签用多了不利于seo优化。

 

除了用通用代码外,还有没有其他方法?

 

其实,优酷官方已经给出了嵌入式播放器的代码。

 
<div id="youkuplayer" style="width:480px;height:400px"></div>
<script type="text/javascript" src="//player.youku.com/jsapi"></script>
<script type="text/javascript">
var player = new YKU.Player('youkuplayer',{
styleid: '0',
client_id: 'YOUR YOUKUOPENAPI CLIENT_ID',
vid: '替换成优酷视频ID',
newPlayer: true
});
</script>

把这段代码放到指定的位置,加上优酷视频ID,就能正常显示了。

优酷视频ID

图中红框里的就是优酷视频ID,把这个ID复制过去就能正常播放了。效果如下

 


本文地址:https://www.seo531.com/237.html,欢迎转载与分享。