在網(wǎng)頁(yè)中嵌入視頻是現(xiàn)代網(wǎng)頁(yè)設(shè)計(jì)中必不可少的元素之一。使用HTML代碼嵌入視頻可以讓視頻與其他網(wǎng)頁(yè)元素融入一體,通過(guò)HTML代碼控制視頻的播放與暫停,還可以加入一些自定義控制面板等。
<video controls> <source src="video.mp4" type="video/mp4"> <source src="video.webm" type="video/webm"> <source src="video.ogg" type="video/ogg"> Your browser does not support the video tag. </video>
上述代碼是嵌入視頻的基本HTML結(jié)構(gòu),其中<source>標(biāo)簽用于指定視頻資源的來(lái)源和類型。如果指定了多個(gè)視頻源,瀏覽器會(huì)自動(dòng)選擇最適合當(dāng)前環(huán)境的資源來(lái)播放。如果沒(méi)有可用的資源,顯示的是一個(gè)顯示簡(jiǎn)短消息的替代文本。
另外,<video>標(biāo)簽中的“controls”屬性會(huì)顯示視頻播放器的控制面板,讓用戶可以自由控制視頻的播放、暫停、音量、全屏等。
<video controls width="640" height="360"> <source src="video.mp4" type="video/mp4"> <source src="video.webm" type="video/webm"> <source src="video.ogg" type="video/ogg"> Your browser does not support the video tag. </video>
為了讓視頻適應(yīng)網(wǎng)頁(yè)的寬度和高度,可以給<video>標(biāo)簽設(shè)置寬度和高度屬性。
總之,以上是基本的HTML代碼,通過(guò)它,我們可以在網(wǎng)頁(yè)中嵌入視頻,并可加入一些自定義控制面板等;另外加上視頻格式的支持,不同的瀏覽器擁有不同的視頻格式支持,因此在嵌入視頻時(shí)需要指定多個(gè)視頻資源的來(lái)源和類型。