HTML5 video 的fullscreen控件被自动禁用?

609 阅读1分钟

前端项目上线后,video标签自带的全屏控件被自动禁用了

在前端项目中使用了video标签,并且使用了自带的controls, 在测试环境功能一切正常,但是发布到正式环境后,video的全屏查看控件被浏览器自动禁用

正式环境:

image.png

测试环境:

image.png

问题原因

谷歌浏览器中环境

在iframe中嵌入跨域的前端资源,如果未对iframe属性进行特殊配置,浏览器会自动禁用video的 webkitSupportsFullscreen, 导致全屏控件被禁用

lALPJx8Zuf6d5ODNATzNByE_1825_316.png

解决办法

1、 条件允许的情况下,使用iframe的html和iframe里面的html,使用同一域名地址

2、也可以配置iframe的属性allowfullscreen属性为true

<iframe src='' alllowfullscreen="true" />