2023-02-21 分類: 網(wǎng)站制作
代碼如圖:
效果如圖:
視頻上下兩邊都流出很多空白,我調(diào)試了很久,沒有特別好的解決辦法,偶然間問了下同事,告訴我了一個屬性object-fit:fill;確實有用,但高度會有點超出,所以要給視頻父元素添加上overflow: hidden,裁剪超出的部分。
效果如圖:
視頻完全鋪滿了整個頁面,把瀏覽器放大或縮小也沒有問題,解決這個問題,然后在測試各個瀏覽器中,唯獨谷歌瀏覽器卻不能自動播放,在網(wǎng)上查了一下原因,原來谷歌瀏覽器禁用了視頻的自動播放,除非把視頻靜音才能自動播放,可有些時候視頻不需要靜音怎么辦,
找了許久,終于有了解決辦法,推薦一款插件video.js,能在谷歌瀏覽器和其它瀏覽器下自動播放視頻,不過CSS樣式需要調(diào)整下,才能全屏播放。
代碼如圖:
創(chuàng)新互聯(lián)不單為客戶提供網(wǎng)站整站設(shè)計制作,如果貴司本身有設(shè)計師或者本身是設(shè)計機(jī)構(gòu),可以提供設(shè)計圖,我們只負(fù)責(zé)前端制作開發(fā)和后臺程序開發(fā)。
文章題目:網(wǎng)站制作中Web視頻播放及問題
網(wǎng)址分享:http://redsoil1982.com.cn/news29/238579.html
網(wǎng)站建設(shè)、網(wǎng)絡(luò)推廣公司-創(chuàng)新互聯(lián),是專注品牌與效果的網(wǎng)站制作,網(wǎng)絡(luò)營銷seo公司;服務(wù)項目有網(wǎng)站制作等
聲明:本網(wǎng)站發(fā)布的內(nèi)容(圖片、視頻和文字)以用戶投稿、用戶轉(zhuǎn)載內(nèi)容為主,如果涉及侵權(quán)請盡快告知,我們將會在第一時間刪除。文章觀點不代表本網(wǎng)站立場,如需處理請聯(lián)系客服。電話:028-86922220;郵箱:631063699@qq.com。內(nèi)容未經(jīng)允許不得轉(zhuǎn)載,或轉(zhuǎn)載時需注明來源: 創(chuàng)新互聯(lián)
猜你還喜歡下面的內(nèi)容