当前位置:站长啦网站目录 » 站长资讯 » 站长新闻 » 技术文档 » 文章详细 订阅RssFeed

【教程】jquery html5视频播放插件在 iframe 嵌入网页导致视频不能全屏的问题解决方法

来源:本站原创 浏览:107次 时间:2018-09-18
简介:【教程】jquery html5视频播放插件在 iframe 嵌入网页导致视频不能全屏的问题解决方法今天无意中测试了下在 iframe 中嵌入视频, 发现全屏按钮在 Chrome 浏览器中居然无效, 试了好几个视频网站的视频都不能全屏, 但在其他浏览器中似乎都很正常, 应该是 Chrome 60 新版本对权限的控制都越来越严格精细的原因

jquery html5视频播放插件在iframe中无法全屏解决办法

今天无意中测试了下在 iframe 中嵌入视频, 发现全屏按钮在 Chrome 浏览器中居然无效, 试了好几个视频网站的视频都不能全屏, 但在其他浏览器中似乎都很正常, 应该是 Chrome 60 新版本对权限的控制都越来越严格精细的原因

这里写图片描述

按钮点了没反应, 始终不能全屏

解决办法也很简单, 就是增加一个属性 allowfullscreen 就行了

例子:

<iframe src="https://v.qq.com/x/cover/vtxb95np45a6ooz.html#mod_player" frameborder="0" width="100%" height="100%"></iframe>
加上属性后
<iframe src="https://v.qq.com/x/cover/vtxb95np45a6ooz.html#mod_player" allowfullscreen frameborder="0" width="100%" height="100%"></iframe>
这样就可以实现全屏啦

jquery html5视频播放插件在iframe中无法全屏解决办法

在IFrame中加入 allowfullscreen="true" allowtransparency="true"

<iframe  src="av.html" marginheight="0" marginwidth="0" frameborder="0" width="100%"height="100%" scrolling="no" allowfullscreen="true" allowtransparency="true" ></iframe>


https://msdn.microsoft.com/library/dn265028(v=vs.85).aspx

不带前缀的 API 带前缀的 API 类型 描述
requestFullscreen msRequestFullscreen 方法 请求全屏显示图像、视频或其他元素。
exitFullscreen msExitFullscreen 方法 将元素从全屏模式返回到其原始大小。
fullscreenElement msFullscreenElement 属性 返回正在全屏模式下显示的顶级元素或当前元素。否则,返回未定义。
fullscreenEnabled msFullscreenEnabled 属性 如果文档允许在全屏模式下显示元素,则返回 True。否则,返回 False。
fullscreenChange MSFullscreenChange 事件 当在全屏模式下显示元素或元素退出全屏模式时会触发。
fullscreenError MSFullscreenError 事件 在请求全屏显示元素,但无法完成此请求时触发。
:fullscreen :-ms-fullscreen 伪类 允许你基于元素是否处于全屏模式设置特定 CSS 属性。
::backdrop ::-ms-backdrop 伪元素 当在全屏模式下显示元素时,可以使用该元素设置后台属性。
allowfullscreen allowfullscreen 属性 启用 iframe 的内容以在全屏模式下显示。如果缺少,则仅 iframe(而非框架内的内容)可以进入全屏模式。


分享一下更健康,本文地址: https://top.cnzzla.com/artinfo/45069.html

推荐站点

  • 看美女-中国娱乐休闲第一站看美女-中国娱乐休闲第一站

    看美女-提供最新明星美女写真,高清性感美女图片欣赏,明星动态,娱乐八卦,美女图库,奇闻异事等综合类娱乐休闲网站!要放松就去看美女(kanmeinv.cc)!

    www.kanmeinv.cc
  • 站长啦全能搜站长啦全能搜

    站长全能搜为您提供各大搜索引擎入口,集合全世界最大的搜索引擎百度搜索,谷歌搜索,360搜索,搜狗搜索,必应搜索等搜索引擎,帮您一键实现对百度、谷歌、搜狗、必应、360等搜索引擎及视频、图片、音乐、知识、微博、微信、购物等热门网站搜索,方便您快速找到你的搜索!

    so.cnzzla.com
  • 百度超级链官网百度超级链官网

    百度超级链官网“超级链”基于区块链发展的解决方案,能解决现在能源消耗问题,还可以单链支持10万并发。百度目前正基于超级链完成自身企业的区块链转化。百度超级链 可免费领养区块链数字狗莱茨狗

    pet-chain.baidu.com
  • 度宇宙官网度宇宙官网

    度宇宙是继百度超级链、“图腾” 后,再推出的一个区块链项目。度宇宙将为用户打造一个由元素、引力、星球所构建的数字宇宙。用户可以通过多种系统行为获取度宇宙“元素”,并创造和扩建属于自己的星球,在用户星球质量逐渐增加的过程中,诸多新功能将逐步开启,度宇宙APP将于世界杯开幕式前后发布。2018年6月8日,百度推出的区块链原生应用“度宇宙”官网正式上线。 6月15日,区块链APP“度宇宙”正式上线,提供iOS版和安卓版下载。 产品玩法编辑 元素:度宇宙空间中漂浮着各种神奇的元素,需要通过引力将它们不断聚集。 星球:来到度宇宙的居民会有创世力量为其凝聚一颗独一无二星球,它是居民本身的外在实体。 引力:它是度宇宙居民脑力的外化形式,居民的引力越大,就能获得越多的元素。 探索:度宇宙中有各种神秘有趣的星球,在探索中可不断提升自身引力。 注:元素不断汇聚可成为星球,获取元素越多星球质量就越大,质量越大引力就越大,引力越大就能获得更多的元素。当星球的质量达到一定要求的时候,会开启神秘功能。

    duyuzhou.baidu.com
  • 国外网站大全国外网站大全

    心动网址导航精选了国内国外著名的网站、好玩的、好看的、有趣的国内国外网站以及实用的、优秀的国内国外网站,包括国外视频、国外购物、国外交友、国外新闻等多种类型,同时提供精品行业分类目录提交,让用户全方位了解国内国外互联网动态!

    hao.xd00.com