`
squall140
  • 浏览: 146113 次
  • 性别: Icon_minigender_1
  • 来自: 天津
社区版块
存档分类
最新评论

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

 
阅读更多

 

 


iframe属性:
allowtransparency  iframe所载加页的背景颜色设置为transparent(透明)时iframe将透明化。
allowfullscreen 启用 iframe 的内容以在全屏模式下显示。如果缺少,则仅 iframe(而非框架内的内容)可以进入全屏模式。
frameborder 是否显示 iframe 周围的边框。

 

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

优酷视频(只能全


iframe属性:
allowtransparency  iframe所载加页的背景颜色设置为transparent(透明)时iframe将透明化。
allowfullscreen 启用 iframe 的内容以在全屏模式下显示。如果缺少,则仅 iframe(而非框架内的内容)可以进入全屏模式。
frameborder 是否显示 iframe 周围的边框。

本测试代码由 FK68.net 提供,作者:废客泉

一般视频播放窗口下方会有分享代码:视频地址、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
视频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>



分享到:
评论

相关推荐

    点击图片iFrame显示视频播放.rar

    总结来说,这个示例涉及了HTML的`iframe`和`&lt;video&gt;`标签,以及HTML5的视频播放功能。同时,还涉及到JavaScript的事件监听和DOM操作,用于实现图片与视频之间的交互。这种技术常用于视频分享网站或个人博客,提供...

    html5整合iframe和Bootstrap

    在实际应用中,一个常见的场景可能是使用iframe来展示第三方内容,如地图服务、视频播放器或者社交媒体插件,同时利用Bootstrap的栅格系统和组件来构建页面结构。jQuery可以用来控制iframe的显示和隐藏,或者与...

    jq替换iframe里面视频关闭自动播放的功能

    通过jq把ifram里面的视频转换成不自动播放的视频。 希望有需要的同志们采纳一下。

    Flex中利用IFrame解决嵌入HTML时Flex组件被遮挡和IFrame被隐藏的问题

    同时,确保IFrame的大小能够适应嵌入的HTML内容,可以使用`width`和`height`属性或者设置`frameborder`为0以适应内容自动调整大小。 在IFrameTest这个示例项目中,开发者可能已经实现了针对Flex菜单遮挡问题的解决...

    HTML阻止iframe跳转页面并使用iframe在页面内嵌微信网页版的实现方法

    就想弄一个winform结合html5的一个小东西,突有心血来潮,想在里面嵌套一个微信网页版,下面小编给大家介绍下HTML阻止iframe跳转页面并使用iframe在页面内嵌微信网页版的实现方法,一起看看吧

    flex iframe 支持在flash中嵌套入html jsp asp php等

    flex iframe 支持在flash中嵌套入html jsp asp php等flex iframe 支持在flash中嵌套入html jsp asp php等flex iframe 支持在flash中嵌套入html jsp asp php等flex iframe 支持在flash中嵌套入html jsp asp php等flex...

    iframe缩小引用网页比例代码

    HTML使用iframe标签引用外部网页时,可以设置外部网页的显示比例适配当前iframe的大小,兼容各种浏览器哦

    iframe自适应宽高

    这个库允许的高度与同跨域iframe来适应他们所...在iframe页面链接修复和支持iFrame与父页面之间的链接。 提供自定义的大小和滚动方法。 使家长地位和视口大小的iframe。 与ViewerJS支持PDF和ODF文档。 后备支持到IE8。

    如何使用iframe

    **如何使用iframe** 在网页设计和开发中,`iframe`(Inline Frame)是一种非常有用的HTML元素,它允许我们在一个HTML文档中嵌入另一个HTML文档。`iframe`为开发者提供了将不同网页内容集成到同一页面的能力,例如...

    嵌入到HTML的iframe自动适应大小

    在探讨“嵌入到HTML的iframe自动适应大小”的主题时,我们主要关注的是如何使一个内嵌在HTML页面中的iframe元素能够根据其内容或者父容器的尺寸动态调整自身的高度,从而实现良好的响应式设计和用户体验。...

    html div+Iframe

    4. **命名和引用**:`iframe`可以使用`name`属性,使其在页面间的JavaScript通信和表单提交中可被识别和引用。 5. **滚动条**:通过`scrolling`属性(已废弃,但部分浏览器仍支持)或CSS来控制`iframe`内的滚动条...

    html2canvas生成pdf(html高度自适应带iframe)

    总之,`html2canvas`和`jspdf`结合使用可以实现网页到PDF的转换,但需要解决`iframe`、滚动条、背景颜色和高度自适应等问题。开发者需要理解这两个库的工作原理,并根据实际需求进行适当的配置和优化。在处理复杂...

    asp.net 中使用iframe动态加载页面

    ASP.NET 中使用 iframe 动态加载页面 ASP.NET 中使用 iframe 动态加载页面是指在 ASP.NET 应用程序中使用 iframe ...因此,在使用 iframe动态加载页面时,需要注意安全性和性能问题,合理设计和实现 iframe 的使用。

    html5 跨iframe的拖拽实现移动端页面设计器

    HTML5的跨iframe拖拽功能在移动端页面设计中是一个重要的技术点,它允许用户在不同的iframe之间自由地拖放元素,提升用户体验,特别是在构建可编辑的页面设计器时。本篇文章将详细探讨如何实现这一功能,并结合给定...

    iframe 的使用

    ### Iframe 的使用详解 #### 一、Iframe 基础概念 Iframe(Inline Frame)是一种在 HTML 文档中嵌入其他 HTML 文档的方法。它可以被看作是在一个网页内部创建另一个独立的浏览器窗口,这个窗口可以加载并显示完全...

    ios 不支持 iframe 的完美解决方法(兼容iOS&安卓)

    在iOS和Android平台之间,网页开发常常面临一些兼容性问题,特别是在使用`iframe`元素时。`iframe`,即内联框架,常用于在单一HTML文档中嵌入其他网页内容,实现页面组件的复用。然而,iOS系统对`iframe`的处理方式...

    iframe自适应高度和宽度

    然而,在使用`iframe`时,如何使其高度和宽度能够根据内容自动调整,是开发者们经常遇到的问题之一。 #### 一、基本概念 在默认情况下,`iframe`的高度和宽度是固定的,需要开发者手动设置。当嵌入的内容发生变化...

    IFrame AND window对象

    2. **视频播放**:许多视频平台使用`IFrame`嵌入视频播放器,如YouTube、Vimeo等。 3. **隐私保护**:通过`IFrame`加载敏感数据,如登录表单,可以防止恶意脚本访问。 4. **加载异步内容**:动态加载和更新页面部分...

    使用iframe实现点击导航无刷新切换页面

    `&lt;iframe&gt;`标签是HTML5中的一个元素,用于在当前文档中嵌入另一个文档。基本结构如下: ```html &lt;iframe src="http://example.com" width="500" height="300"&gt;&lt;/iframe&gt; ``` 其中,`src`属性定义了要加载的外部网页...

    使用Iframe实现TAB页面切换

    总结来说,使用Iframe实现TAB页面切换是一种常见的网页设计手法,它结合HTML、CSS和JavaScript,可以有效地组织和展示内容。在实际应用中,结合Spring框架的Web服务,可以构建出功能丰富的交互式用户界面。

Global site tag (gtag.js) - Google Analytics