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

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"

不带前缀的 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（而非框架内的内容）可以进入全屏模式。