新闻中心
消费主张 IT业界 今日观察 消费警示 曝光台 热点专栏 奇闻趣事 一语惊人 专利之窗 动态备忘
领券购
生活必须 吃货优选 学习艺术 旅游出行 手机电脑 电子电器 热血男装 热销女装
图片中心
美女欣赏 风景欣赏 艺术欣赏 实物图片 制作美图 生活图片
下载中心
手机软件 语文数学 常用软件 红绿软件 信息社政 音体美合 科学自然 英语外语
映讯频道
浓缩电影 邻国热剧 一技之长 艺术无界 教育教学 纪录之窗 战争片 动作片 情感片 国内片 喜剧片 恐怖片 科幻片 大陆剧 港澳台剧 动漫片 明星云集 欧美剧集
聚划算
数码产品 服装服饰 家电家具 装潢装饰 商旅游玩 生活必备 二手特色 健康保健
FLASH频道
MTV类 运动游戏 益智游戏 女生游戏 休闲游戏 电脑运用 有声故事 有声艺术
社会专题
美文园地 制作教程 历史天空 游山玩水 美食天下 科技科幻 天文地理 时尚酷玩 健康保健 寻医问药 有书有道 农村特色 幽默笑话 汽车电子 星新一代 教育咨询 天下军事 硬件网络 黑白社会 靓丽女人 代码效果 免费资源 便民服务 办公达人 玄幻奇幻 软件技术
关闭
当前位置:首页 → 社会专题 → 硬件网络
使用 iframe 引用优酷和土豆和腾讯视频,支持 HTML5 手机 播放

使用百度视频上传,嵌入远程链接,然后在编辑器中自动转换为支持视频播放的html代码。

例如:

简单了修改了百度编辑器源码

默认的百度编辑器针对视频的处理有2种:

1.远程链接,会生成 <embed>标签

2.本地上传视频,会生成 <video> 标签,video是html5的标签,现在大多数浏览器都使用了,但是其支持的格式可能不是很多,具体也没研究,这个工作量太大,而且得不到想要的结果。(video标签的另一个主要作用是:在手机端也可以播放)

百度编辑器,主要是为了pc端,在移动端,就像上面提到的:

video标签,mobile应该也支持,但是video标签支持的格式有限。我们可以自己查看video标签支持的格式,然后使用 "格式工厂" 之类的软件进行转换为mp4等支持的格式

embed标签,还有什么object标签,在mobile端都不显示,它们貌似好像需要flash插件的安装,手机端或mac浏览器等不一定支持

最后,找了些资料,但是不确定,并不是技术狂人那样深入研究,PC和MOBILE通用的标签是:

<iframe>嵌入窗体,确实支持。。。这也是本文记录的重点!

下面开始引用其他文章内容,懒得写了:

iframe属性:

allowtransparency  iframe所载加页的背景颜色设置为transparent(透明)时iframe将透明化。

allowfullscreen 启用 iframe 的内容以在全屏模式下显示。如果缺少,则仅 iframe(而非框架内的内容)可以进入全屏模式。

frameborder 是否显示 iframe 周围的边框。

一般视频播放窗口下方会有分享代码:视频地址、flash地址、html代码、通用代码 等。。  我们用通用代码就能得到iFrame的地址。

优酷视频(只能全屏播放):

视频地址:http://v.youku.com/v_show/id_XNzExOTkwMjA0.html

视频ID:XNzExOTkwMjA0

嵌入地址:http://player.youku.com/embed/XODY3NDMzNjY4

复制通用代码

<iframe wiidth="100%%" heiight="100%" frameborder="0" src="http://player.youku.com/embed/XODY3NDMzNjY4" allowfullscreen=""></iframe>

土豆视频(微信里可以页面播放也能全屏):

视频地址(它会用N种网址格式他奶奶的,但都是最后一个是ID):

http://www.tudou.com/albumplay/pKeQTGfodCI/Wg717X9s4ZM.html

http://www.tudou.com/albumplay/Wg717X9s4ZM.html

http://www.tudou.com/programs/view/Wg717X9s4ZM/

http://www.tudou.com/listplay/F4vaUJb5LoY/Wg717X9s4ZM.html

-----------------------

这里不一定正确:测试的时候,对于

www.tudou.com/albumplay/Wg717X9s4ZM.html

albumplay/xx.html一个结尾的,下方的iframe的code=xx可能无效。此时地址是 code=??&lcode=xx,但是code=??不知道是通过什么加密算出来的,lcode=xx是正确的。

视频ID:Wg717X9s4ZM

嵌入地址:http://www.tudou.com/programs/view/html5embed.action?code=Wg717X9s4ZM

复制通用代码

<iframe wiidth="100%" heiight="100%" frameborder="0" src="http://www.tudou.com/programs/view/html5embed.action?code=Wg717X9s4ZM" allowfullscreen=""></iframe>

腾讯视频(微信里可以页面播放但不能全屏):

视频地址:http://v.qq.com/cover/k/khyb6moudi5fha4.html?vid=d0015bg8v6k

视频ID:d0015bg8v6k

嵌入地址:http://v.qq.com/iframe/player.html?vid=d0015bg8v6k&tiny=0&auto=0

其它参数:auto=0 不自动播放,去掉 auto=0则会自动放

复制通用代码

<iframe wiidth="100%" heiight="100%" frameborder=0 src="http://v.qq.com/iframe/player.html?vid=d0015bg8v6k&tiny=0&auto=0" allowfullscreen=""></iframe>

上述的3个,腾讯,优酷,土豆基本是可以使用的,我看了几个主要的视频网站,也就是这3个能通过url来匹配出iframe的src,其他基本都不行。

优酷收购了土豆

搜狐收购了56

搜狐,新浪,网易,56,ku6,youtobe(仅有iframe,video标签)都没法匹配到,只好放弃

----------------------------

最后,放到手机上一展示。。。

仅 "腾讯" 的可以播放!优酷,土豆手机端调用的iframe代码不支持为什么报错!!!!!无解了!!!

----------------------------

兼容手机真是麻烦,还是自己上传视频,嵌入video标签,视频格式必须是video支持的几种,才能PC和Mobile通用!

对于其他视频网站的,还是插入个链接,跳转查看吧!

≡ 提示:输入修改代码都可运行!
4
酒精度
77
顶一下
相关阅读
内容加载中……