指引网

当前位置: 主页 > 网页制作 > WEB开发 >

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

来源:网络 作者:佚名 点击: 时间:2017-08-01 21:38
[摘要] 网站上引用一些视频,如何让这些视频既支持电脑播放,又支持手机播放,我们可以通过 iframe 调用的方式来解决这个问题。 首先让我们……

网站上引用一些视频,如何让这些视频既支持电脑播放,又支持手机播放,我们可以通过 iframe 调用的方式来解决这个问题。

首先让我们来了解一下<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>
------分隔线----------------------------