如何在WordPress文章中插入视频并自适应

 2017年07月15日 13:16  3,772  3  打印本文  
达令家

现在很多站点都是做视频站点的,同时也有很多视频站点都是使用的CK播放器,如果你已经使用了CK播放器,那么这篇文章可能对于你来说没有什么效果了。如果你还没有使用,但是日常写文章会少量插入视频的话,那么还是可以考虑添加的。

官方embed功能添加视频

我的部分文章中同样插入了视频,采用的方法就是利用短代码来实现的,这个也是一个不错的想法,但是今天推荐的可能就比较简单了,直接通过WordPress自带的embed功能来实现,但是这个功能可能有点鸡肋,WordPress毕竟是国外的产品,支持的视频站点也是仅限于国外的视频站点,那么WordPress本身支持哪些视频站点呢:

Animoto/Blip/Cloudup/CollegeHumor/DailyMotion/Facebook/Flickr/FunnyOrDie.com/Hulu/Imgur/Instagram/Issuu/Kickstarter/Meetup.com/Mixcloud/Photobucket/PollDaddy/Reddit/ReverbNation/Scribd/SlideShare/SmugMug/SoundCloud/Speaker Deck/Spotify/TED/Tumblr/Twitter/VideoPress/Vimeo/Vine/WordPress plugin directory/WordPress.tv/YouTube

国内站点通用格式添加视频

那么对于国内的优酷或者土豆等等视频站点,我们应该如何嵌入到文章中?

这里我个人推荐直接使用优酷或者视频站点提供的通用格式来嵌入到文章中去:
如何在WordPress文章中插入视频并自适应

为什么推荐使用通用代码,因为这个代码可以同时兼容iPhone和安卓端的手机播放,所以个人方面还是比较推荐这个的。其实很多时候,我们使用视频的几率并不是很高,但是备一个总是好的。下面推荐的这种代码模式可能更多用户会比较喜欢。

代码添加视频

  1. //youku
  2. function wp_iframe_handler_youku($matches$attr$url$rawattr) {
  3. if (wp_is_mobile()) {
  4. $height = 200;
  5. else {
  6. $height = 485;
  7. }
  8. $iframe = '<iframe width=100% height=' . $height . 'px src="http://player.youku.com/embed/' . esc_attr($matches[1]) . '" frameborder=0 allowfullscreen></iframe>';
  9. return apply_filters('iframe_youku', $iframe$matches$attr$url$ramattr);
  10. }
  11. wp_embed_register_handler('youku_iframe', '#http://v.youku.com/v_show/id_(.*?).html#i', 'wp_iframe_handler_youku');
  12. //tudou
  13. function wp_iframe_handler_tudou($matches$attr$url$rawattr) {
  14. if (wp_is_mobile()) {
  15. $height = 200;
  16. else {
  17. $height = 485;
  18. }
  19. $iframe = '<iframe width=100% height=' . $height . 'px src="http://www.tudou.com/programs/view/html5embed.action?code=' . esc_attr($matches[1]) . '" frameborder=0 allowfullscreen></iframe>';
  20. return apply_filters('iframe_tudou', $iframe$matches$attr$url$ramattr);
  21. }
  22. wp_embed_register_handler('tudou_iframe', '#http://www.tudou.com/programs/view/(.*?)/#i', 'wp_iframe_handler_tudou');
  23. wp_embed_unregister_handler('youku');
  24. wp_embed_unregister_handler('tudou');

视频添加方法

直接在可视化下添加链接就OK。

个人建议:

如果你的站点是千年难得显示一次视频的站点,那么我个人建议直接使用视频站点官方提供的通用格式代码。如果你的站点是影视站点,并且提供在线播放等等,那么我个人还是觉得,你还是使用CK播放器吧,具体自行百度。如果你使用视频的频率比较高,一个月有3个左右,代码可能比较适合你吧,这个完全看个人需求了。

演示:

历史上的今天:

weinxin
99八十一微信公众号
扫一扫关注99八十一微信公众号,打开微信简简单单即可查看99八十一所有内容,更快捷更方便。
九哥

吐槽一下

:?: :razz: :sad: :evil: :!: :smile: :oops: :grin: :eek: :shock: :???: :cool: :lol: :mad: :twisted: :roll: :wink: :idea: :arrow: :neutral: :cry: :mrgreen:

目前吐槽:3   其中:访客  1   博主  2

    • avatar Koolight 来自天朝的朋友 谷歌浏览器 Windows 7 湖北省武汉市 联通 【进士】

      因为引用视频少,就是用的官方的那个代码,还挺不错的。

        • avatar 九哥 博主 来自天朝的朋友 谷歌浏览器 Windows Server 2003

          @Koolight 官方的没怎么用过,下次试试。

        • avatar 九哥 博主 来自天朝的朋友 QQ浏览器 Windows 7

          请至友情链接页面查看说明。