童靴們上網的話都知道，現在很多網站都提供視訊展示。我們在上一篇關於HTML5文章中提到了HTML5支援視訊和音訊，現在小編帶大家學習一下吧！

建立簡單的HTML5檔案

HTML5檔名同樣字尾'.html'，我們在sublime中可以使用輸入英文歎號（!）,然後按tab鍵就能建立一個簡單的HTML5檔案：

一個簡單的html5文件：

video 視訊

<video>標籤定義視訊。如下：

control 屬性供新增播放、暫停和音量控制元件。

瀏覽器中顯示：

<video> 與 </video> 之間插入的內容是供不支援 video 元素的瀏覽器顯示的：

我們在IE7中開啟看一下效果：

<video> 標籤的其他屬性

1.autoplay屬性

Autoplay屬性用於設定視訊是否自動播放，是一個布林屬性。當出現時，表示自動播放，去掉是表示不自動播放。

<video src="video/Disney.mp4" controls="controls" autoplay="autoplay">你的瀏覽器版本不支援視訊</video>

2.loop屬性

loop屬性用於指定視訊是否迴圈播放，同樣是一個布林屬性。

<video src="video/Disney.mp4" controls="controls" autoplay="autoplay" loop="loop">你的瀏覽器版本不支援視訊</video>

3.preload屬性

此屬性用於定義視訊是否預載入。屬性有三個可選擇的值：none、metadata、auto。如果不使用此屬性，預設為auto。

如果使用 "autoplay"，則忽略該屬性。

<video src="video/Disney.mp4" controls="controls" preload="none">你的瀏覽器版本不支援視訊</video>

None：不進行預載入。使用此屬性值，可能是頁面製作者認為使用者不期望此視訊，或者減少HTTP請求。

Metadata：部分預載入。使用此屬性值，代表頁面製作者認為使用者不期望此視訊，但為使用者提供一些元資料（包括尺寸，第一幀，曲目列表，持續時間等等）。

Auto：全部預載入。

你必須非常努力，才能看起來毫不費力！

最後，如果有想一起學習web前端，HTML5及JavaScript的可以來一下我的前端群733581373，好友都會在裡面交流，分享一些學習的方法和需要注意的小細節，每天也會準時的講一些前端的炫酷特效，及前端直播課程學習

如果想看到更加系統的文章和學習方法經驗可以關注的微訊號：‘web前端技術圈’或者‘webxh6’關注後回覆‘2018’可以領取一套完整的學習視訊