欢迎光临! 【模板119】平台每天更新源码-所有VIP源码均有在线演示

logo

建站一条龙服务

使用 iframe 引用优酷和土豆和腾讯视频,支持 HTML5 手机 播放

织梦源码推荐
使用 iframe 引用优酷和土豆和腾讯视频,支持 HTML5 手机 播放二维码

本文手机访问二维码

使用百度视频flashfxp.html' target='_blank'>上传,嵌入远程链接,然后在编辑器中自动转换为支持视频播放的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 width="100%%" height="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 width="100%" height="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 width="100%" height="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通用!

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

 

使用 iframe 引用优酷和土豆和腾讯视频,支持 HTML5 手机 播放二维码

本文手机访问二维码

作者:mb119.com        关注度:         时间:2018-01-18 17:37
首先声明,只要是我们的vip会员所有源码均可以免费下载,不做任何限制
☉本站的源码不会像其它下载站一样植入大量的广告。
☉本站只提供精品织梦源码,源码在于可用,不在多!!希望在这里找到你合适的。
☉本站提供的整站织梦程序,均带数据及演示地址。可以在任一源码详情页查看演示地址
☉本站所有资源(包括源码、模板、素材、特效等)仅供学习与参考,请勿用于商业用途。
☉如有其他问题,请加网站客服QQ(971977809)进行交流点击这里给我发消息
相关程序开发内容
在线客服

金融贵金属 HTML5模板响应式模板手机模板营销型模板双语模板商城网站aspcms模板