HTML5是HTML的第五個(gè)版本,其中包含了許多新的標(biāo)簽和功能,其中之一就是視頻標(biāo)簽。HTML5的誕生讓視頻網(wǎng)頁(yè)的制作變得更加方便了,開(kāi)發(fā)者只需要簡(jiǎn)單的代碼就可以在頁(yè)面上嵌入視頻。
<video width="640" height="480" controls> <source src="movie.mp4" type="video/mp4"> <source src="movie.ogg" type="video/ogg"> <source src="movie.webm" type="video/webm"> Your browser does not support the video tag. </video>
在上面的代碼中,<video>標(biāo)簽定義了視頻,并且通過(guò)width和height屬性定義了寬度和高度。<source>標(biāo)簽指定了視頻源文件的路徑和文件類(lèi)型。如果瀏覽器支持多個(gè)視頻格式,它將選擇最合適的那一個(gè)播放。</video>標(biāo)簽用于結(jié)束視頻的定義。如果瀏覽器不支持視頻標(biāo)簽,它會(huì)顯示后面的文本“Your browser does not support the video tag.”。
除了以上的屬性外,還有許多其他的屬性可以用于<video>標(biāo)簽,例如:autoplay、loop、muted等等。例如,autoplay屬性允許在網(wǎng)頁(yè)加載完畢后自動(dòng)播放視頻,loop屬性允許視頻循環(huán)播放,muted屬性允許在播放視頻時(shí)不播放聲音。
<video autoplay loop muted> <source src="movie.mp4" type="video/mp4"> Your browser does not support the video tag. </video>
總之,HTML5的視頻標(biāo)簽為網(wǎng)頁(yè)的制作帶來(lái)了許多的便利,使得在網(wǎng)頁(yè)上嵌入視頻變得非常簡(jiǎn)單。當(dāng)然,我們還需要兼容不同的瀏覽器,使得網(wǎng)頁(yè)在不同的瀏覽器上都可以正確的運(yùn)行。