移动端html如何加载优酷视频,网站怎么引用优酷腾讯视频并支持手机播放

网站上引用一些视频，如何让这些视频既支持电脑播放，又支持手机播放，我们可以通过 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

嵌入地址：//player.youku.com/embed/XODY3NDMzNjY4

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

视频地址(会用N种网址格式，但都是最后一个是视频ID，但有些需要通过土豆视频转换器转换)：

视频ID：Wg717X9s4ZM

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

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

视频地址：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则会自动放

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