前端项目上线后,video标签自带的全屏控件被自动禁用了
在前端项目中使用了video标签,并且使用了自带的controls, 在测试环境功能一切正常,但是发布到正式环境后,video的全屏查看控件被浏览器自动禁用
正式环境:
测试环境:
问题原因
谷歌浏览器中环境
在iframe中嵌入跨域的前端资源,如果未对iframe属性进行特殊配置,浏览器会自动禁用video的 webkitSupportsFullscreen, 导致全屏控件被禁用
解决办法
1、 条件允许的情况下,使用iframe的html和iframe里面的html,使用同一域名地址
2、也可以配置iframe的属性allowfullscreen属性为true
<iframe src='' alllowfullscreen="true" />