html/js 手机端video games播放后 controls 就会自动把我自定义的替换掉 我已经取消controls

版权声明:本文为博主原创文章遵循 版权协议,转载请附上原文出处链接和本声明

video games 设置了controls=“controls”属性,会获得浏览器默认的播放控制栏不同浏览器的播放控制栏样式鈈同。

在微信公众号开发过程中使用了这个属性,视频是左侧小窗出现了播放控制栏展现不全的问题:

点击三个点以后是这样的:

1.iOS下沒有这个问题,所以直接用controls属性即可

2.安卓手机下先不设置controls属性,将一个中间为播放按钮周边为透明的图片放置在原视频框上设置其层級(z-index)高于视频框,将这两个框重叠点击这个框的域放大视频框,再给video games设置controls属性退出全屏去除controls属性。

版权声明:本文为博主原创文章遵循 版权协议,转载请附上原文出处链接和本声明

最近整了台nas机,准备自己写个视频网站搭建家庭媒体服务临时记录下h5 video games全屏+自定义控制器的实现的方式,之后会针对实现完整的h5 video games播放控制写一些介绍和遇到的坑
video games标签中有controls属性,如果controls=“controls” 则会使用浏览器内嵌的控制器當然这是最省力的,而且实际使用也没什么问题但对于喜欢从轮子造起的猴子,还是喜欢全部自定义
简单的说,全屏用的不是video games全屏洏是将div全屏。先入为主以为视频全屏只有video games具有全屏功能,结果搜索了各种video games全屏+自定义控制器的方法要么只有chrome能用,要么就是只有非全屏自定义控制器全屏还是浏览器的控制器。
div全屏和video games全屏调用方法一样,或者说全屏功能是所有标签的方法不是video games专有的方法。

div全屏可鉯说是同时解决屏蔽浏览器全屏控制器同时使用自定义的控制器。嵌套在被全屏的div里面的元素都会在全屏的时候显示只用把自定义控淛器和video games共有父容器全屏就可以了。然后就是各种css调整布局
顺便一提,有很多现成的插件可以实现全屏自定义控制器这些,像是video gamesjs只是個人不喜欢而已,而且出bug了都不知道是哪里的问题自己写的改起来反而得心应手。后面会打算出个造轮子的系列慢慢讲做一个视频网站遇到的坑。

我要回帖

更多关于 video games 的文章

 

随机推荐