CSS可以幫助我們很容易地將視頻加入到我們的網頁中。我們可以使用HTML5的video標簽來嵌入視頻,并使用CSS樣式化它。
<video controls> <source src="path/to/video.mp4" type="video/mp4"> <p>您的瀏覽器不支持HTML5視頻</p> </video>
我們首先需要創建一個video標簽,并添加一個source標簽來定義視頻文件。當瀏覽器無法播放視頻時,我們可以添加一個含有文本信息的<p>標簽,該標簽將顯示在帶有控件的video標簽下面。
video { width: 100%; height: auto; }
我們接著使用CSS來樣式化video標簽。我們可能會想讓該標簽在網頁上顯示為100%的寬度,高度自適應。
video::-webkit-media-controls { display: none !important; }
最后,我們可能想要隱藏掉瀏覽器的默認視頻播放器控件,以啟用該標簽自定義的控件。
這就是使用CSS將視頻加入到網頁的方法。