HTML5自適應視頻已經成為網頁設計中的常見功能。通過在代碼中添加一些簡單的標簽和屬性,可以實現視頻在各種設備上的自適應播放。以下是一個簡單的HTML5自適應視頻代碼示例:
<video controls autobuffer width="100%" height="auto"> <source src="example.mp4" type="video/mp4"> <source src="example.webm" type="video/webm"> <source src="example.ogv" type="video/ogg"> <p>Your browser does not support HTML5 video.</p> </video>
在上面的代碼中,我們使用了<video>元素來定義視頻。控制屬性用于在用戶界面中顯示視頻控件,而自動緩沖屬性(autobuffer)允許視頻在后臺緩存,以便更流暢地播放。寬度設置為100%,以確保視頻大小適應其容器,而高度設置為auto則允許視頻根據其寬度自適應其高度。
<source>元素用于定義視頻的多個源文件。這是因為不同的瀏覽器支持不同的視頻格式,我們需要通過提供多個源文件來確保視頻可以在盡可能多的瀏覽器和設備上播放。每個
最后,在video元素內部添加一個
元素,用于在不支持HTML5視頻的瀏覽器上顯示一段文本。如果某個瀏覽器不支持HTML5視頻,則會顯示
元素中的文本。