WordPress 技巧:使用 shortcode 方式插入优酷视频,并支持全平台播放
WordPress 技巧:使用 shortcode 方式插入优酷视频,并支持全平台播放
前面我介绍过使用 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]
作者: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 联系表单插件
- 使用 WordPress 的 Embed 功能快速插入优酷视频
- 让每个作者单独设置自己默认分类的插件:WordPress Default Category
- 四个提高 WordPress 内容管理用户体验的插件
- Mobile Detect 相关 WordPress 插件介绍
-
顶一个!
-
嗯~ 支持一下~
不过玩了这么多年wp~ 一直都需要那种可以粘贴视频~并且在本站能点击全屏播放的~ 以前有一个人在做~ 不过不完善~ 不知道Denis能不能考虑一下呢?
-
好吧,现在用新浪微博登陆。
哈哈。
来支持水煮鱼。 -
不错~升级了WP对国内视频站的用户体验。严格的讲,国内的视频站优酷一家独大也不是没有原因的。
-
下载地址有误?还是google被屏蔽了?
-
可能是被 屏蔽了,挂个代理看看!
-
-
很给力的插件,对移动设备(html5)的支持是未来方向,感谢博主!
-
很给力的插件,谢谢博主
-
这么虎~围观!
-
支持一下
-
这个插件太棒了~
-
期待支持土豆的,
如果只要贴代码 不用加video就更好了 -
水煮鱼大哥你好,我用了你这个插件后,用手机访问视频,老是显示视频正在载入中,但就是载入不出来。电脑访问正常。请问是何原因呢。PS:用了静态化插件的
-
请问,我用iphone观看http://imv.im/时候,视频背景是有个图像的,
而我直接使用[video]http://v.youku.com/v_show/id_XMzE0MDkzMzI4.html/video时没有背景的图案的。-
自己额外在设置的!
-
怎么设置能说一下么 ,真的太喜欢这效果了。
-
通过 WordPress 字段,然后你去看看 html5 的 Video 标签怎么设置。
-
如果能介绍下如何搞定背景图案就非常完美了。膜拜!
-
自己学习 HTML5 Video 标签。
-
-
-
-
-
想问下、如何让视频显示在首页的摘要里面呢。?是不是要用插件。
-
为什么在iPad上无法正常运作呢?在iPhone上就可以&http://blog.wpjam.com/m8230;
-
请问 怎么 让 视频显示在首页 上 &http://blog.wpjam.com/m8230;..
-
[video]http://v.youku.com/v_show/id_XMzE0MDkzMzI4.html/video
有一些主题 能首页显示 ,有一些主题就是不能首页显示,请问怎么解决-
那就要问哪些不能显示主题的作者了,这个插件使用 WordPress 标准的 Shortcode API 写得,插件本身不会有问题的。
-
-
为什么我在电脑上正常,在手机上,视频框就是黑屏呢?
-
请问是否可以抓取新浪视频到自己的文章中,我是要在自己的网页中插入新浪的“第一财经”视频,有劳博主给看看有可能吗?
-
大神,如何修改它,让它在全局中可以调用?短代码好像只能插入到文章页面的CONTENT才生效,如何修改加入到function,使它能够全局调用,那样就更加完美了!非常期待你的回复。
-
http://blog.wpjam.com/m/use-shortcodes-in-theme-files/
-
-
看到你的回复欣喜若狂,非常感谢你。在该篇文章中使用的是<?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;); ?>这样不是有多次查询嘛?请大神帮忙,非常感谢!
-
<?php echo do_shortcode(&http://blog.wpjam.com/m8220;[video]youku.com/xxx[/video]&http://blog.wpjam.com/m8220;); ?>
-
属在下愚钝,因为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代码呢,问百度没有类似情况。再次言谢!
-
<?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;);?>
-
-
-
-
完全不懂代码,摸索一天的东西,大侠三下五除二的搞定。天字一号,绝对高手,拜谢!
-
为什么我在PC上可以正常播放,但是在IOS上只看到一片黑色,不能正常打开播放。希望解决下。谢谢 491354513@qq.com
-
下载来试试看
-
今天看了贵站的插件,很不错。但是,不支持其他手机系统平台,例如安卓。 今天无意之中,用手机浏览掘图志,发现其网站可以播放其他网站的视频。觉得很不错,不知道是安的什么插件,有时间麻烦博主研究下,让WPJAM VIDEO功能更加强大!
-
插件里有一段是判断UA是iphone与ipad的,你复制出来改为android就行了
-
-
为什么不能从wordpress官方下载这个插件呢?我觉得很实用。
-
请问 1,插件如何能设置不自动播放,iphoe 打开网页后能不自动播放吗?2,可以开发ftp上传到本地服务器的,支持pc和苹果的视频插件吗? 谢谢。mayephoto@126.com 盼回复。
-
第一个问题很快修复,第二个你去找找有没有类似的jQuery 插件什么的。
-
-
好流弊的插件 下载了~!
-
好流弊的插件 下载了~!
-
想问一下会推出widget版本嘛?
-
想问一下会推出widget版本嘛?
-
不会,你可以通过以下方法实现:
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
-
-
好久没更新了,LZ能把土豆和56两个视频站补上吗?
-
土豆可以,56 还没有 HTML5 地址。
-
发现好多HTML5播放地址和视频缩略图有关,你看看这个,应该有帮助
http://www.hdj.me/demos/vediourlparser/-
好的,回头,我看看程序有没有帮助。
-
-
-
-
为什么在iphone上还是一片黑呢?
-
我安装了WPJAM Video,文章里添加 [video]http://v.youku.com/v_show/id_XMzE0MDkzMzI4.html/video
结果不显示视频,显示代码,如何解决?麻烦你了!-
问题解决了
添加
<?php echo do_shortcode(&http://blog.wpjam.com/m8220;[video]youku.com/xxx[/video]&http://blog.wpjam.com/m8220;); ?>
就能正常了,不过首页显示全是乱码,进入文章才正常,博主指教!-
我也一样
-
-
-
其他视频网站弄起来就是费事,有的都没有html5支持,我前阵子一直在弄视频相关的,抽了时间扩展了这个插件,添加了其他视频网站的支持。
-
那就分享下!
-
写的不好,另外怕有打广告的嫌疑了。
http://www.idayer.com/my-first-plugin-wp-video.html
github地址:http://blog.wpjam.com/m/https://github.com/ineo6/wp_video
-
-
-
我一直很纳闷一个问题。youku外链第二个地址,同时支持PC和ipad,为啥很多网站都不插入第二个链接呢。
-
奇怪了,我插入的视频都没有判断出来是Ipad,但是当我在一篇文章中插入两个视频的时候,第一个还是没有判断出来,依然请求flashplayer,下面第二个视频却判断出来了!求解???
-
有解决么?我ipad也是一片空白
-
-
求博主作者信息
-
用博主的例子能正常播放。但是改成别的比如《熊出没》不能播放了。http://www.hbn888.com/8/
-
感谢水煮鱼的无私分享!
插件使用成功,但是用ipad访问时显示是一片空白,不知是何故?是否有什么可能的办法测试或解决一下问题的原因?谢谢了!
网址:www.bizmessager.com-
有解决这个问题么?求分享
-
-
youtube的可以用吗?
-
你的博客速度真的超快,基本是秒开。
-
恩,这事肯定的!
-
-
为啥安卓设备不能显示HTML5代码的呢 安卓没有安装Flashplayer的话就不能播放了
-
呵呵,不喜欢安卓,没有去写安卓的判断了。
-
-
这个插件我非常喜欢用,已经自己为桌面浏览器单独作设置了。不过我还想再来请教一下,我桌面设置成了不自动播放,同时固定了视频宽度,高度随视频本身长宽比进行调节。那么我想在iPhone和iPad上同样设置成自动调节高度,请问有什么办法么?特别是iPad,它在非全屏播放的时候一直会有黑边。
-
请问怎么才能不自动播放呢?
-
博主,能否写个云点播插件呀?
-
怎么样才能不自动播放
-
不错
-
同一个优酷的视频,如果没有加密,就可以正常播放。但是加上密码,就无法播放了。这跟插件有关系吗?
-
调用的视频清晰度不行,能不能完善清晰度,默认调用最 清晰的
-
之前发的好像没出来,请问下如何才能调用优酷的高清或超清视频,现在调用的就是普通视频,谢谢
-
ipad还是一片空白啊?iphone已经没问题了。有人有经验么?
-
亲?为什么这个插件安装了iphone上播放是没问题了,ipad却还是显示不出来,一片空白呢?虚心求教
-
为什么现在都报错“连接失败,代码2003”
热门文章
- WordPress 主题教程 http://blog.wpjam.com/m5c:日志元数据
- WordPress 主题教程 http://blog.wpjam.com/m6:侧边栏
- WordPress 文章目录插件:WPJAM TOC
- WordPress 主题教程 http://blog.wpjam.com/m5d:Else,日志 ID,链接标题
- WordPress 主题教程 http://blog.wpjam.com/m5e:日志导航链接
- WordPress 主题教程 http://blog.wpjam.com/m9:Style.css 和 CSS 介绍
- WordPress 主题教程 http://blog.wpjam.com/m16:留言模板
- WordPress 主题教程 http://blog.wpjam.com/m6b:页面链接列表
- WordPress 主题教程 http://blog.wpjam.com/m11:宽度和布局
- WordPress 主题教程 http://blog.wpjam.com/m15:子模板文件
快速链接
- RSS 订阅 / 邮件订阅 / 新浪微博
- 联系 Denis / 广告投放
- WordPress 建站专家
- WPJAM 应用商城
推荐阅读
- 使用 SSH 安装,升级和迁移 WordPress 博客
- Gmail 高级搜索技巧
- 使用 WordPress Transients API 缓存复杂的 SQL 查询和运算结果
- WordPress 博客如何进行链接建设
- WordPress 性能优化:为什么我的博客比你的快
主机推荐
- 使用最简洁的美国域名注册商
Name.com - 针对 WordPress 的香港主机
主机91 - 最佳美国虚拟主机推荐
Bluehost - 最专业美国 VPS 主机
(mt) Media Temple