HTML5 視頻代碼大全

HTML5 是最新版本的 HTML。它支持視頻和音頻的嵌入，無需使用 Flash 這樣的插件。我們來看一些 HTML5 視頻代碼示例。

<video src="video.mp4" controls>
<source src="video.mp4" type="video/mp4">
<source src="video.webm" type="video/webm">
</video>

這是最基本的 HTML5 視頻代碼。src 屬性指定了視頻文件路徑。controls 屬性添加了視頻控制條。

<video controls preload="auto" width="640" height="360">
<source src="video.mp4" type="video/mp4" />
<source src="video.webm" type="video/webm" />
<track src="subtitles_en.vtt" kind="subtitles" srclang="en" label="English">
<track src="subtitles_sv.vtt" kind="subtitles" srclang="sv" label="Swedish">
</video>

這里我們添加了一些額外的屬性。preload="auto" 表示網(wǎng)頁加載時自動加載視頻。width 和 height 指定了視頻的寬和高。我們還添加了字幕（ subtitles）的路徑。

<video id="myvideo" width="640" height="360">
	<source src="video.mp4" type="video/mp4" />
	<source src="video.webm" type="video/webm" />
</video>
<script>
	var video = document.getElementById('myvideo');
	video.addEventListener('loadedmetadata', function() {
alert(video.duration);
	});
</script>

使用 JavaScript 獲得視頻時長的示例。我們給 video 添加了一個 id，然后使用 JavaScript 獲取 video 元素，添加 eventListener（loadedmetadata），當(dāng)視頻有元數(shù)據(jù)時，顯示視頻的時長。

以上是 HTML5 視頻代碼大全。可以根據(jù)需求來調(diào)整不同的屬性和事件處理程序。