我们将创意变成现实
为产品和体验带来生命

Work hard in the direction of creating value

当前位置:首页 > 观点 > 建站知识 > 网站建设中遇到谷歌浏览器禁用了视频的自动播放的问题

网站建设中遇到谷歌浏览器禁用了视频的自动播放的问题

发布者:中工互联  发布时间:2019-03-15

网站建设中经常会遇到为了更好的展示公司产品及实力,而插入视频。一般来说,视频的话一般打开网站会自动播放。以前很多网站不敢放视频,因为服务器带宽少费用高,网站访问用户一多,网站就卡住打不开了,同时访客带宽都是2M及共用带宽,视频加载很慢。现在网络流量带宽一般都百M起步了,所以我们再也不用担心网络带宽问题,网站就可以适当的增加一些视频,这个又出现一个新问题,现在终端那么多,尺寸大小不一,网站制作中的视频代码如何保证各个终端各个尺寸兼容呢?下面深圳网站建设公司中工互联为你详细解答?


PC端的屏幕尺寸大小不一,而项目需求是视频要占满整个屏幕,也就是在不同尺寸的屏幕上,视频要刚好铺满宽高,刚开始我以为很简单,宽度设置100%,高度设置100vh(vh就是当前屏幕可见高度的1%),然而在实际操作中暴露出了许多问题,让我头痛不已,今天来聊聊我在这过程中碰到的问题。一开始设置了宽度100%和高度100vh,在浏览器中出现的效果宽度是100%了,而高度却成了自适应,也就是说设置了高度不起作用。


视频上下两边都流出很多空白,我调试了很久,没有特别好的解决办法,偶然间问了下同事,告诉我了一个属性object-fit:fill;确实有用,但高度会有点超出,所以要给视频父元素添加上overflow:hidden,裁剪超出的部分。效果如图:视频完全铺满了整个页面,把浏览器放大或缩小也没有问题,解决这个问题,然后在测试各个浏览器中,唯独谷歌浏览器却不能自动播放,在网上查了一下原因,原来谷歌浏览器禁用了视频的自动播放,除非把视频静音才能自动播放,可有些时候视频不需要静音怎么办,找了许久,终于有了解决办法,推荐一款插件,能在谷歌浏览器和其它浏览器下自动播放视频,不过CSS样式需要调整下,才能全屏播放。


深圳网站建设公司【中工互联】承接企业官网建设、营销型网站建设;如果有建站需求请联系我们!


标签:
数字化建站营销落地服务商首页服务案例观点关于联系

联系我们

135-3085-1084
185-6577-9115

深圳市中工互联网络开发有限公司
地址:深圳市南山区沙河西路3151号健兴科技大厦A座7楼.

我们的优势

我们为满足不同客户的独特需求,并对独特需求做彻底理解,更注重用户体验,以用户体验为核心,创意、视觉、交互、营销,四大维度助力商业价值提升,为客户量身订造,竭尽我们的专业所能,不遗余力, 我们专业、敬业,富有激情和创意,尊重并深入理解每一位客户的理念,并致力于运用我们的设计能力将其充分实现,9年来,凭借对设计的深刻理解,对互联网营销趋势的敏锐洞察,我们不断修正服务导向,完善创作品格,始终注重专业探索,为所有合作企业机构全力以赴,确保网站的视觉体验与营销转化能力。

我们以专业的设计,创新的理念,精湛的技术服务于众多知名企业,创造出了综合集团企业、时尚零售、互联网电商、智能科技、金融投资、教育培训、餐饮食品、制造生产等多行业、多平台的优秀网络作品。包括:拓邦股份、茂硕电源、洲明科技、鱼跃医疗、大族激光、华为、百丽、华大基因、深圳地铁、捷顺科技、腾讯、迈瑞、华侨城、上海三思、立达信、三雄极光、兆驰股份、安吉尔、欧瑞博、中广核、创维、融创、生迪、中国建设银行、科瑞技术、长园、崧盛股份、奋达、小米、倍思等在内的近两千多家客户。

专业团队为您提供深圳网站建设、深圳网站制作、深圳营销型网站建设、外贸网站建设等服务,深圳建网站就找中工互联 | 网站建设地图

深圳市中工互联网络开发有限公司 备案号:粤ICP备17083864号 Copyright 2014版权所有

客服微信 ×

立即扫描,添加客服微信