CSS可以插入MP4格式的視頻,讓我們可以在網頁上添加視頻來增強視覺效果。下面是一個簡單的示例:
.video { width: 500px; height: 300px; background: #000 url('video-poster.jpg') no-repeat center center; background-size: cover; } .video video { width: 100%; height: 100%; object-fit: fill; }
在上面的代碼中,我們使用了一個自定義的類名“video”,并為其設置了寬度和高度。視頻的預覽圖使用了一個名為“video-poster.jpg”的圖片,該圖片會在視頻未播放時顯示。我們使用了背景圖像的方式將其應用到“video”類上。
我們還為視頻播放器本身設置了 CSS 樣式,使用了“object-fit”屬性來設置視頻的適應方式,使其填充整個元素。
然后,我們可以將視頻插入到網頁中,如下所示:
<div class="video"> <video src="video.mp4" autoplay loop muted></video> </div>
我們將視頻元素放在“video”類的容器中,使用“src”屬性指定了視頻文件的位置。此外,我們還為視頻添加了“autoplay”自動播放、 “loop”循環播放和“muted”禁止聲音的屬性。
如此一來,就可以在網頁上成功插入視頻了。但需要注意的是,不同的瀏覽器對于視頻格式的支持可能不同,我們需要向網頁中添加多種視頻格式來確保所有用戶都能順利播放。