做服务更好的
网站建设公司
当前位置:首页 > 建站资讯 > 网站建设

网站制作中Web视频播放及问题

发表日期:2018-10-11 10:57:06作者来源:方维网络浏览次数:89 标签: 网站制作    

以前很多网站不敢放视频,因为服务器带宽少费用高,网站访问用户一多,网站就卡住打不开了,同时访客带宽都是2M及共用带宽,视频加载很慢。 现在网络流量带宽变大了,我们再也不用担心网络带宽问题,网站就可以适当的增加一些视频,这个又出现一个新问题,现在终端那么多,尺寸大小不一,网站制作中的视频代码如何保证各个终端各个尺寸兼容呢?www.szfangwei.cn为你详细解答

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

一开始设置了宽度100%和高度100vh,在浏览器中出现的效果宽度是100%了,而高度却成了自适应,也就是说设置了高度不起作用。
代码如图:

网站制作CSS代码
效果如图:
网站视频展示

视频上下两边都流出很多空白,我调试了很久,没有特别好的解决办法,偶然间问了下同事,告诉我了一个属性object-fit:fill;确实有用,但高度会有点超出,所以要给视频父元素添加上overflow: hidden,裁剪超出的部分。

网站HTML代码

效果如图:

网站视频展示效果图

视频完全铺满了整个页面,把浏览器放大或缩小也没有问题,解决这个问题,然后在测试各个浏览器中,唯独谷歌浏览器却不能自动播放,在网上查了一下原因,原来谷歌浏览器禁用了视频的自动播放,除非把视频静音才能自动播放,可有些时候视频不需要静音怎么办,
找了许久,终于有了解决办法,推荐一款插件video.js,能在谷歌浏览器和其它浏览器下自动播放视频,不过CSS样式需要调整下,才能全屏播放。
代码如图:
网站制作前端代码

方维网络不单为客户提供网站整站设计制作,如果贵司本身有设计师或者本身是设计机构,可以提供设计图,我们只负责前端制作开发和后台程序开发。

作者:方维网络前端制作严成

如没特殊注明,文章均为方维网络原创,转载请注明来自http://www.szfangwei.cn/news/4651.html

相关网站设计案例

相关推荐新闻

Web前端移动端导航栏制作...

再说移动端导航栏之前,我们先说说PC端的导航栏,因为在大多数情况...

日期:2018-10-11 浏览次数:308

WEB设计师的最基本能力(...

任何分类的视觉设计师都需要有一定的美术基础,甚至也要有一定的动...

日期:2018-10-11 浏览次数:301

前端效果是web网站的...

前端对于web网站来说,通常是指,web网站的前台部分包括web网站的...

日期:2018-10-11 浏览次数:787

怎样建立一个Web站点 让公...

由于现在信息化的飞速发展,很多的网络公司甚至用到网络的公司都会...

日期:2018-10-11 浏览次数:1233

如何从无到有建立We...

信息技术的飞速发展,使得现如今的公司没有哪一家不曾设立过网站,但...

日期:2018-10-11 浏览次数:1066

网站设计中层级关系划分和...

建立层级关系,信息是成系统的。更多时候,信息看起来就像是各个部分...

日期:2018-10-11 浏览次数:91

网站建设之商城网站设计

随着互联网的快速发展,网上购物已经成为人们购物的主要途径。相对...

日期:2018-10-11 浏览次数:96

Gradle在实际网站开发中的...

Gradle是一个基于Apache Ant和Apache Maven概念的网站项目自动化...

日期:2018-10-11 浏览次数:86

建站公司提供的建站售后服...

做一个网站,网站在上线之后,建站公司是否应该提供售后服务呢? 答案...

日期:2018-10-11 浏览次数:94

网站运营对待搜索引擎 是...

搜索引擎对于网站来说,是最大的“冤家”,网站优化的目的是为了能...

日期:2018-10-11 浏览次数:86

如何制作兼容性很高的网页...

制作一个兼容性很高的网页不难,但是追求性价比与兼容性的成比例的...

日期:2018-10-11 浏览次数:80

找公司做网站 别提如下三...

顾客是上帝这句话,暗含这这样几层意思。 一,顾客的提议,都是对的,企...

日期:2018-10-11 浏览次数:109

相关标签
Web站点Web前端
网站建设解决方案
搜索引擎优化解决方案微信小程序定制开发解决方案商城网站解决方案