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

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

来源:本站原创 浏览:918次 时间: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

推荐站点

  • 口腔溃疡口腔溃疡

    口腔溃疡发病原因如何根治快速治疗方法,什么药散贴怎么治最管用才好,吃什么水果,最简单的治疗偏方,口腔溃疡白色的是什么,宝宝孕妇儿童婴儿怎么引起的,吃维生素几含片、长期经常复发性严重怎么办最快愈合、医院挂什么科室、会传染吗缺乏什么维生素c怎么好的快、快速治疗方法、怎么快速好、一般多久自愈一分钟见效、三分钟止疼法、5个小妙招巧治口腔溃疡、小儿牙龈牙疼舌头嘴巴嘴唇溃疡症状、口腔粘膜脱落、艾滋病、口腔癌早期症状图片,西瓜霜、蜂蜜、中药治疗口腔溃疡。

    www.kqm8.com
  • 软件天堂软件天堂

    软件天堂,各种绿色软件、破解软件、去广告软件的搬运工,你的吾爱破解下载基地。以各种杀毒软件,浏览器,应用软件,单机游戏,手机软件为主,为广大软件爱好者打造软件下载和学习的乐园!

    soft.cnzzla.com
  • 男人帮-好男人休闲娱乐第一站男人帮-好男人休闲娱乐第一站

    男人帮(966383.com)-中国好男人休闲娱乐第一站!为您提供男性时尚,娱乐八卦,美女写真,两性健康,奇闻异事等男性爱看的内容,还有“青娱乐”特色栏目,打造专业的男人网站,成为你网上的男人天堂!

    966383.com
  • 51资讯网51资讯网

    51资讯网提供全面及时的资讯、房产、汽车、旅游、家装、金融、体育、医疗、物流、教育、餐饮等行业实时资讯,24小时不间断播报,让您获得最新行业信息,最新产业新闻报道。

    www.gwdh5.com
  • 今天天气今天天气

    今天天气网可以查询全国3259个城区一周天气预报、未来十五天天气预报,及时准确发布中央气象台天气信息,末来十五天天气预报、天气预报查询一周15天的查询气象报告,并且为用户提供生活指数、健康指数、交通指数、旅游指数,及各类天气预报资讯。

    www.jintiantianqi.com