WordPress 技巧:使用 shortcode 方式插入优酷视频,并支持全平台播放

我是创始人李岩:很抱歉!给自己产品做个广告,点击进来看看。  
我爱水煮鱼
我爱水煮鱼
»
WordPress
» WordPress 技巧:使用 shortcode 方式插入优酷视频,并支持全平台播放

WordPress 技巧:使用 shortcode 方式插入优酷视频,并支持全平台播放

Denis 留言: 79 浏览:25502

前面我介绍过使用 WordPress 的 Embed 功能快速插入优酷视频,不过通过这样方式插入的代码是 Flash 代码。而 iOS 系统是不会不支持 Flash,所以很多 WordPress 用户写博客的时候,在插入优酷视频的 Flash 代码之后,都要添加一段话,比如:iOS 用户请点该链接查看,这样用户体验非常差,读者看视频也非常不方便。

而优酷本身已经提供了支持全平台的嵌入代码,我就写了一个 shortcode 让你非常方便的在文章中插入优酷视频,并支持全平台播放:


add_shortcode( &http://blog.wpjam.com/m039;youku&http://blog.wpjam.com/m039;, &http://blog.wpjam.com/m039;wpjam_youku_shortcode&http://blog.wpjam.com/m039; );
function wpjam_youku_shortcode( $atts, $content=&http://blog.wpjam.com/m039;&http://blog.wpjam.com/m039; ) {
    extract( shortcode_atts( array(
        &http://blog.wpjam.com/m039;width&http://blog.wpjam.com/m039;     => &http://blog.wpjam.com/m039;510&http://blog.wpjam.com/m039;,
        &http://blog.wpjam.com/m039;height&http://blog.wpjam.com/m039;    => &http://blog.wpjam.com/m039;498&http://blog.wpjam.com/m039;,
    ), $atts ) );

    if(preg_match(&http://blog.wpjam.com/m039;http://blog.wpjam.com/mhttp://v.youku.com/v_show/id_(.*?).htmlhttp://blog.wpjam.com/mi&http://blog.wpjam.com/m039;,$content,$matches)){
        return &http://blog.wpjam.com/m039;<iframe class="youku_video" height=&http://blog.wpjam.com/m039;.$height.&http://blog.wpjam.com/m039; width=&http://blog.wpjam.com/m039;.$width.&http://blog.wpjam.com/m039; src="http://player.youku.com/embed/&http://blog.wpjam.com/m039;.$matches[1].&http://blog.wpjam.com/m039;" frameborder=0 allowfullscreen></iframe>&http://blog.wpjam.com/m039;;
    }
}

然后在撰写文章的时候,使用如下方式插入优酷视频:

[youku]http://v.youku.com/v_show/id_XMzE0MDkzMzI4.html[/youku]

默认情况下,视频是 510 宽,498 高,如果你要把宽度和高度设置为 600X500 的话,使用以下代码:

[youku width="600" height="500"]http://v.youku.com/v_show/id_XMzE0MDkzMzI4.html[/youku]
标签:WordPress Shortcode WordPress 插件 优酷视频

作者:Denis | 我要投稿

原文链接:WordPress 技巧:使用 shortcode 方式插入优酷视频,并支持全平台播放

© 我爱水煮鱼,转载请留下原文链接。

本站长期承接 WordPress 项目,详情请 Email:&http://blog.wpjam.com/m100;e&http://blog.wpjam.com/m110;&http://blog.wpjam.com/m105;s&http://blog.wpjam.com/m64;&http://blog.wpjam.com/m119;p&http://blog.wpjam.com/m106;&http://blog.wpjam.com/m97;m.&http://blog.wpjam.com/m99;&http://blog.wpjam.com/m111;m。

如有 WordPress 问题,请到 WPJAM 问答提问!

你可能也喜欢

  • Contact Form 7:最强大的 WordPress 联系表单插件 Contact Form 7:最强大的 WordPress 联系表单插件
  • 使用 WordPress 的 Embed 功能快速插入优酷视频 使用 WordPress 的 Embed 功能快速插入优酷视频
  • 让每个作者单独设置自己默认分类的插件:WordPress Default Category 让每个作者单独设置自己默认分类的插件:WordPress Default Category
  • 四个提高 WordPress 内容管理用户体验的插件 四个提高 WordPress 内容管理用户体验的插件
  • Mobile Detect 相关 WordPress 插件介绍 Mobile Detect 相关 WordPress 插件介绍
  1. bolo on said:

    顶一个!

  2. 萨莫莱斯 on said:

    嗯~ 支持一下~

    不过玩了这么多年wp~ 一直都需要那种可以粘贴视频~并且在本站能点击全屏播放的~  以前有一个人在做~  不过不完善~ 不知道Denis能不能考虑一下呢?

  3. 音乐狂人 on said:

    好吧,现在用新浪微博登陆。
    哈哈。
    来支持水煮鱼。

  4. Rhythm on said:

    不错~升级了WP对国内视频站的用户体验。严格的讲,国内的视频站优酷一家独大也不是没有原因的。

  5. WingHot on said:

    下载地址有误?还是google被屏蔽了?

    • Denis on said:

      可能是被 屏蔽了,挂个代理看看!

  6. lionshuang on said:

    很给力的插件,对移动设备(html5)的支持是未来方向,感谢博主!

  7. 紫云轩中式 on said:

    很给力的插件,谢谢博主

  8. lijunnan on said:

    这么虎~围观! :neutral:

  9. 小五01故事 on said:

    支持一下

  10. Mindy_波 on said:

    这个插件太棒了~

  11. 郝晞彤 on said:

    期待支持土豆的, :mrgreen:
    如果只要贴代码 不用加video就更好了

  12. 小贱 on said:

    水煮鱼大哥你好,我用了你这个插件后,用手机访问视频,老是显示视频正在载入中,但就是载入不出来。电脑访问正常。请问是何原因呢。PS:用了静态化插件的

  13. 叽叽 on said:

    请问,我用iphone观看http://imv.im/时候,视频背景是有个图像的,
    而我直接使用[video]http://v.youku.com/v_show/id_XMzE0MDkzMzI4.html/video时没有背景的图案的。

    • denishua on said:

      自己额外在设置的!

      • 叽叽 on said:

        怎么设置能说一下么 ,真的太喜欢这效果了。

        • denishua on said:

          通过 WordPress 字段,然后你去看看 html5 的 Video 标签怎么设置。

          • 幸福废纸篓 on said:

            如果能介绍下如何搞定背景图案就非常完美了。膜拜!

          • denishua on said:

            自己学习 HTML5 Video 标签。

  14. zcc on said:

    想问下、如何让视频显示在首页的摘要里面呢。?是不是要用插件。

  15. -evilcat- on said:

    为什么在iPad上无法正常运作呢?在iPhone上就可以&http://blog.wpjam.com/m8230;di-44571397295b74953fc41a11c600db4f.png

  16. 叽叽 on said:

    请问 怎么 让 视频显示在首页 上 &http://blog.wpjam.com/m8230;..

  17. 叽叽 on said:

    [video]http://v.youku.com/v_show/id_XMzE0MDkzMzI4.html/video
    有一些主题 能首页显示 ,有一些主题就是不能首页显示,请问怎么解决

    • denishua on said:

      那就要问哪些不能显示主题的作者了,这个插件使用 WordPress 标准的 Shortcode API 写得,插件本身不会有问题的。

  18. 推鸟 on said:

    为什么我在电脑上正常,在手机上,视频框就是黑屏呢?

  19. 瘦虫若鲸 on said:

    请问是否可以抓取新浪视频到自己的文章中,我是要在自己的网页中插入新浪的“第一财经”视频,有劳博主给看看有可能吗?

  20. 幸福废纸篓 on said:

    大神,如何修改它,让它在全局中可以调用?短代码好像只能插入到文章页面的CONTENT才生效,如何修改加入到function,使它能够全局调用,那样就更加完美了!非常期待你的回复。

    • denishua on said:

      http://blog.wpjam.com/m/use-shortcodes-in-theme-files/

  21. 幸福废纸篓 on said:

    看到你的回复欣喜若狂,非常感谢你。在该篇文章中使用的是<?php echo do_shortcode(&http://blog.wpjam.com/m8220;[my_shortcode]&http://blog.wpjam.com/m8220;); ?>使用贵站的插件格式为[video]youku.com/xxx[/video]请问如何插入呢?<?php echo do_shortcode(&http://blog.wpjam.com/m8220;[video]&http://blog.wpjam.com/m8220;); ?>youku.com/xxx<?php echo do_shortcode(&http://blog.wpjam.com/m8220;[/video]&http://blog.wpjam.com/m8220;); ?>这样不是有多次查询嘛?请大神帮忙,非常感谢!

    • denishua on said:

      <?php echo do_shortcode(&http://blog.wpjam.com/m8220;[video]youku.com/xxx[/video]&http://blog.wpjam.com/m8220;); ?>

      • 幸福废纸篓 on said:

        属在下愚钝,因为youku.com/xxx是调用函数的,例如<?php $key=&http://blog.wpjam.com/m8221;youku_url&http://blog.wpjam.com/m8221;; echo get_post_meta($post->ID, $key, true); ?>请问 <?php echo do_shortcode(&http://blog.wpjam.com/m8220;[video]【<?php $key=&http://blog.wpjam.com/m8221;youku_url&http://blog.wpjam.com/m8221;; echo get_post_meta($post->ID, $key, true); ?>】[/video]&http://blog.wpjam.com/m8220;); ?>,【】中该如何写PHP代码呢,问百度没有类似情况。再次言谢!

        • denishua on said:

          <?php $key=&http://blog.wpjam.com/m8221;youku_url&http://blog.wpjam.com/m8221;;$youku_url = get_post_meta($post->ID, $key, true); echo do_shortcode(&http://blog.wpjam.com/m8220;[video]&http://blog.wpjam.com/m8220;.$youku_url.&http://blog.wpjam.com/m8221;[/video]&http://blog.wpjam.com/m8220;);?>

  22. 幸福废纸篓 on said:

    完全不懂代码,摸索一天的东西,大侠三下五除二的搞定。天字一号,绝对高手,拜谢!

  23. 窒息旳溫柔 on said:

    为什么我在PC上可以正常播放,但是在IOS上只看到一片黑色,不能正常打开播放。希望解决下。谢谢 491354513@qq.com

  24. 柏梓涵2012 on said:

    下载来试试看

  25. 浮想 on said:

    今天看了贵站的插件,很不错。但是,不支持其他手机系统平台,例如安卓。 今天无意之中,用手机浏览掘图志,发现其网站可以播放其他网站的视频。觉得很不错,不知道是安的什么插件,有时间麻烦博主研究下,让WPJAM VIDEO功能更加强大!

    • 笑味集 on said:

      插件里有一段是判断UA是iphone与ipad的,你复制出来改为android就行了

  26. 高鸣-交典创艺 on said:

    为什么不能从wordpress官方下载这个插件呢?我觉得很实用。

  27. qzuser on said:

    请问 1,插件如何能设置不自动播放,iphoe 打开网页后能不自动播放吗?2,可以开发ftp上传到本地服务器的,支持pc和苹果的视频插件吗? 谢谢。mayephoto@126.com 盼回复。

    • denishua on said:

      第一个问题很快修复,第二个你去找找有没有类似的jQuery 插件什么的。

  28. 蛋炒饭 on said:

    好流弊的插件 下载了~!

  29. 蛋炒饭 on said:

    好流弊的插件 下载了~!

  30. MarkoChu on said:

    想问一下会推出widget版本嘛?

  31. MarkoChu on said:

    想问一下会推出widget版本嘛?

    • denishua on said:

      不会,你可以通过以下方法实现:

      http://blog.wpjam.com/m/use-shortcode-in-sidebar-widgets/

      然后 在 text widget 中输入 [video width="600" height="500"]http://v.youku.com/v_show/id_XMzE0MDkzMzI4.html/video

  32. 痕迹 on said:

    好久没更新了,LZ能把土豆和56两个视频站补上吗?

    • denishua on said:

      土豆可以,56 还没有 HTML5 地址。

      • 痕迹 on said:

        发现好多HTML5播放地址和视频缩略图有关,你看看这个,应该有帮助
        http://www.hdj.me/demos/vediourlparser/

        • denishua on said:

          好的,回头,我看看程序有没有帮助。

  33. 猫屎网 on said:

    为什么在iphone上还是一片黑呢?

  34. Mr_Kasim on said:

    我安装了WPJAM Video,文章里添加 [video]http://v.youku.com/v_show/id_XMzE0MDkzMzI4.html/video
    结果不显示视频,显示代码,如何解决?麻烦你了!

    • Mr_Kasim on said:

      问题解决了
      添加
      <?php echo do_shortcode(&http://blog.wpjam.com/m8220;[video]youku.com/xxx[/video]&http://blog.wpjam.com/m8220;); ?>
      就能正常了,不过首页显示全是乱码,进入文章才正常,博主指教!

      • 疾风 on said:

        我也一样

  35. neo on said:

    其他视频网站弄起来就是费事,有的都没有html5支持,我前阵子一直在弄视频相关的,抽了时间扩展了这个插件,添加了其他视频网站的支持。

    • denishua on said:

      那就分享下!

      • neo on said:

        写的不好,另外怕有打广告的嫌疑了。
        http://www.idayer.com/my-first-plugin-wp-video.html
        github地址:http://blog.wpjam.com/m/https://github.com/ineo6/wp_video

  36. 如果宅 on said:

    我一直很纳闷一个问题。youku外链第二个地址,同时支持PC和ipad,为啥很多网站都不插入第二个链接呢。

  37. 小D on said:

    奇怪了,我插入的视频都没有判断出来是Ipad,但是当我在一篇文章中插入两个视频的时候,第一个还是没有判断出来,依然请求flashplayer,下面第二个视频却判断出来了!求解???

    • 172123575 on said:

      有解决么?我ipad也是一片空白

  38. maicoo on said:

    求博主作者信息

  39. 仁易轩 on said:

    用博主的例子能正常播放。但是改成别的比如《熊出没》不能播放了。http://www.hbn888.com/8/

  40. 陆伟BizMessager on said:

    感谢水煮鱼的无私分享!
    插件使用成功,但是用ipad访问时显示是一片空白,不知是何故?是否有什么可能的办法测试或解决一下问题的原因?谢谢了!
    网址:www.bizmessager.com

    • 172123575 on said:

      有解决这个问题么?求分享

  41. Battebee on said:

    youtube的可以用吗?

  42. 博客猫 on said:

    你的博客速度真的超快,基本是秒开。

    • denishua on said:

      恩,这事肯定的!

  43. 疾风 on said:

    为啥安卓设备不能显示HTML5代码的呢 安卓没有安装Flashplayer的话就不能播放了

    • denishua on said:

      呵呵,不喜欢安卓,没有去写安卓的判断了。

  44. 纳塔树树 on said:

    这个插件我非常喜欢用,已经自己为桌面浏览器单独作设置了。不过我还想再来请教一下,我桌面设置成了不自动播放,同时固定了视频宽度,高度随视频本身长宽比进行调节。那么我想在iPhone和iPad上同样设置成自动调节高度,请问有什么办法么?特别是iPad,它在非全屏播放的时候一直会有黑边。

  45. 白露i晞 on said:

    请问怎么才能不自动播放呢?

  46. 这牛儿! on said:

    博主,能否写个云点播插件呀?

  47. 小马甲 on said:

    怎么样才能不自动播放

  48. 我们都知道的电台 on said:

    不错

  49. 超级管理员 on said:

    同一个优酷的视频,如果没有加密,就可以正常播放。但是加上密码,就无法播放了。这跟插件有关系吗?

  50. 视频diy创意网 on said:

    调用的视频清晰度不行,能不能完善清晰度,默认调用最 清晰的

  51. 视频diy创意网 on said:

    之前发的好像没出来,请问下如何才能调用优酷的高清或超清视频,现在调用的就是普通视频,谢谢

  52. 172123575 on said:

    ipad还是一片空白啊?iphone已经没问题了。有人有经验么?

  53. 172123575 on said:

    亲?为什么这个插件安装了iphone上播放是没问题了,ipad却还是显示不出来,一片空白呢?虚心求教

  54. ricky on said:

    为什么现在都报错“连接失败,代码2003”

热门文章

主机91 七牛云存储 易多云

快速链接

  • RSS 订阅 / 邮件订阅 / 新浪微博
  • 联系 Denis / 广告投放
  • WordPress 建站专家
  • WPJAM 应用商城

推荐阅读

  • 使用 SSH 安装,升级和迁移 WordPress 博客 使用 SSH 安装,升级和迁移 WordPress 博客
  • Gmail 高级搜索技巧 Gmail 高级搜索技巧
  • 使用 WordPress Transients API 缓存复杂的 SQL 查询和运算结果 使用 WordPress Transients API 缓存复杂的 SQL 查询和运算结果
  • WordPress 博客如何进行链接建设 WordPress 博客如何进行链接建设
  • WordPress 性能优化:为什么我的博客比你的快 WordPress 性能优化:为什么我的博客比你的快

主机推荐

  • 使用最简洁的美国域名注册商Name.com使用最简洁的美国域名注册商
    Name.com
  • 针对 WordPress 的香港主机主机91针对 WordPress 的香港主机
    主机91
  • 最佳美国虚拟主机推荐Bluehost最佳美国虚拟主机推荐
    Bluehost
  • 最专业美国 VPS 主机(mt) Media Temple最专业美国 VPS 主机
    (mt) Media Temple

随意打赏

提交建议
微信扫一扫,分享给好友吧。