以前很多網(wǎng)站不敢放視頻，因?yàn)榉?wù)器帶寬少費(fèi)用高，網(wǎng)站訪問(wèn)用戶一多，網(wǎng)站就卡住打不開(kāi)了，同時(shí)訪客帶寬都是2M及共用帶寬，視頻加載很慢。 現(xiàn)在網(wǎng)絡(luò)流量帶寬變大了，我們?cè)僖膊挥脫?dān)心網(wǎng)絡(luò)帶寬問(wèn)題，網(wǎng)站就可以適當(dāng)?shù)脑黾右恍┮曨l，這個(gè)又出現(xiàn)一個(gè)新問(wèn)題，現(xiàn)在終端那么多，尺寸大小不一，網(wǎng)站制作中的視頻代碼如何保證各個(gè)終端各個(gè)尺寸兼容呢？www.wfcgdy.com為你詳細(xì)解答

 PC端的屏幕尺寸大小不一，而項(xiàng)目需求是視頻要占滿整個(gè)屏幕，也就是在不同尺寸的屏幕上，視頻要?jiǎng)偤娩仢M寬高，剛開(kāi)始我以為很簡(jiǎn)單，寬度設(shè)置100%，高度設(shè)置100vh（vh就是當(dāng)前屏幕可見(jiàn)高度的1%），然而在實(shí)際操作中暴露出了許多問(wèn)題，讓我頭痛不已，今天來(lái)聊聊我在這過(guò)程中碰到的問(wèn)題。

一開(kāi)始設(shè)置了寬度100%和高度100vh，在瀏覽器中出現(xiàn)的效果寬度是100%了，而高度卻成了自適應(yīng)，也就是說(shuō)設(shè)置了高度不起作用。
代碼如圖：

效果如圖：


視頻上下兩邊都流出很多空白，我調(diào)試了很久，沒(méi)有特別好的解決辦法，偶然間問(wèn)了下同事，告訴我了一個(gè)屬性object-fit:fill;確實(shí)有用，但高度會(huì)有點(diǎn)超出，所以要給視頻父元素添加上overflow: hidden，裁剪超出的部分。



效果如圖：



視頻完全鋪滿了整個(gè)頁(yè)面，把瀏覽器放大或縮小也沒(méi)有問(wèn)題，解決這個(gè)問(wèn)題，然后在測(cè)試各個(gè)瀏覽器中，唯獨(dú)谷歌瀏覽器卻不能自動(dòng)播放，在網(wǎng)上查了一下原因，原來(lái)谷歌瀏覽器禁用了視頻的自動(dòng)播放，除非把視頻靜音才能自動(dòng)播放，可有些時(shí)候視頻不需要靜音怎么辦，
找了許久，終于有了解決辦法，推薦一款插件video.js，能在谷歌瀏覽器和其它瀏覽器下自動(dòng)播放視頻，不過(guò)CSS樣式需要調(diào)整下，才能全屏播放。
代碼如圖：


方維網(wǎng)絡(luò)不單為客戶提供網(wǎng)站整站設(shè)計(jì)制作，如果貴司本身有設(shè)計(jì)師或者本身是設(shè)計(jì)機(jī)構(gòu)，可以提供設(shè)計(jì)圖，我們只負(fù)責(zé)前端制作開(kāi)發(fā)和后臺(tái)程序開(kāi)發(fā)。

作者：方維網(wǎng)絡(luò)前端制作嚴(yán)成