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

2023-02-21 分类：网站制作

以前很多网站不敢放视频，因为服务器带宽少费用高，网站访问用户一多，网站就卡住打不开了，同时访客带宽都是2M及共用带宽，视频加载很慢。现在网络流量带宽变大了，我们再也不用担心网络带宽问题，网站就可以适当的增加一些视频，这个又出现一个新问题，现在终端那么多，尺寸大小不一，网站制作中的视频代码如何保证各个终端各个尺寸兼容呢？www.cdcxhl.com为你详细解答
PC端的屏幕尺寸大小不一，而项目需求是视频要占满整个屏幕，也就是在不同尺寸的屏幕上，视频要刚好铺满宽高，刚开始我以为很简单，宽度设置100%，高度设置100vh（vh就是当前屏幕可见高度的1%），然而在实际操作中暴露出了许多问题，让我头痛不已，今天来聊聊我在这过程中碰到的问题。
一开始设置了宽度100%和高度100vh，在浏览器中出现的效果宽度是100%了，而高度却成了自适应，也就是说设置了高度不起作用。

网站制作CSS代码
代码如图：
网站视频展示
效果如图：
网站HTML代码
视频上下两边都流出很多空白，我调试了很久，没有特别好的解决办法，偶然间问了下同事，告诉我了一个属性object-fit:fill;确实有用，但高度会有点超出，所以要给视频父元素添加上overflow: hidden，裁剪超出的部分。
网站视频展示效果图
效果如图：
视频完全铺满了整个页面，把浏览器放大或缩小也没有问题，解决这个问题，然后在测试各个浏览器中，唯独谷歌浏览器却不能自动播放，在网上查了一下原因，原来谷歌浏览器禁用了视频的自动播放，除非把视频静音才能自动播放，可有些时候视频不需要静音怎么办，
找了许久，终于有了解决办法，推荐一款插件video.js，能在谷歌浏览器和其它浏览器下自动播放视频，不过CSS样式需要调整下，才能全屏播放。
网站制作前端代码
代码如图：
创新互联不单为客户提供网站整站设计制作，如果贵司本身有设计师或者本身是设计机构，可以提供设计图，我们只负责前端制作开发和后台程序开发。

文章题目：网站制作中Web视频播放及问题
网址分享：https://www.cdcxhl.com/news29/238579.html

网站建设、网络推广公司-创新互联，是专注品牌与效果的网站制作，网络营销seo公司；服务项目有网站制作等

声明：本网站发布的内容（图片、视频和文字）以用户投稿、用户转载内容为主，如果涉及侵权请尽快告知，我们将会在第一时间删除。文章观点不代表本网站立场，如需处理请联系客服。电话：028-86922220；邮箱：631063699@qq.com。内容未经允许不得转载，或转载时需注明来源：创新互联

猜你还喜欢下面的内容