"朱哥，現在視頻站好火啊！那些視頻是怎么放到網頁上進行播放的呢？一定很麻煩吧！"

老朱：“不麻煩，HTML5標準下，一個video標簽就搞定了。”

小白：“一個標簽就可以實現視頻播放么？”

老朱：“是啊！只要是支持HTML5的瀏覽器就可以，現在新瀏覽器都支持HTML5的，特別是手機上的瀏覽器妥妥的支持HTML5標準。”

小白：“那是怎么實現的呢？能給我詳細說一下么？我已經迫不及待的要學這個功能了。”

“你先找個mp4格式的視頻吧！有了視頻就可以學習通過javascript對視頻進行控制了！”

“我這里最不缺的就是視頻了，平時玩爐石的時候自動錄了很多視頻，全都是mp4格式的。”

老朱：“那就好辦了！你創建一個html頁面，然后創建一個同級目錄用來放視頻！放好以后咱看看怎么用javascript操控視頻。”

過了大約10分鐘的時間，小白高興的說道：“準備工作已經做好了，我建了一個video的同級文件夾，里面放了一個名叫video的視頻，我們可以開始了么？”

老朱稍微頓了一下，思緒一下子回到了幾年前，說道：“當時的flash多火啊，什么都能干，流媒體方面更是強到無敵了，可惜以后慢慢的就要被取代了。不過這不就是科技發展的自然規律么！順勢而行才有出路，flash太依賴插件了。”

小白說：“為啥這些瀏覽器廠商不直接把flash集成到瀏覽器核心功能里面呢？”

“唉～這就不知道啦！咱不討論這些了，直接切入正題吧！HTML5嵌入視頻需要使用video標簽，它支持三種格式：Ogg、MPEG 4、WebM，不同瀏覽器對視頻格式的支持不一樣，你有時間可以看一下瀏覽器對視頻格式的支持，這里我們就用mpeg4做為視頻源。你看一下標簽的最基本格式。”

小白看了一下嵌入的效果說道：“哇果然有視頻了，可是視頻在頁面里面怎么這么大？”

老朱說道：“因為你的視頻默認大小長寬特別大啊！video說白了也是一個容器，他是放視頻的容器，明白這一點后你就知道通過css可以更改它的寬度高度等css樣式了。現在我們通過css改一下它的寬和高。”

“在video里面添加一個id屬性，然后css設置一下高和寬就可以了。另外controls屬性是用來給視頻添加播放控件的。你可以看到視頻的下方有播放按鈕、進度條、聲音、全屏、下載這幾個控件。添加controls屬性以后，播放控件自動跟視頻進行結合，如沒特殊需求我們嵌入視頻的功能就完成了。”

小白激動的說道：“這也太簡單了吧！看來是我想多了。”

“小白！如果僅僅為了在頁面播放一個視頻確實不復雜，但是有一點你必須清楚，客戶的需求是天馬行空的，有些客戶可不僅僅想要這么簡單的功能。就算沒有客戶提需求你也得考慮這幾個問題：用戶使用不同瀏覽器我的視頻是不是都支持、視頻由于網絡問題無法加載怎么辦？視頻是在打開網頁后播放還是用戶觸發一個播放事件后播放等等問題，我們還需要對用戶體驗進行考慮，所以看似簡單的視頻插入其實并不簡單。你先自己把html5的video標簽相關的屬性和事件了解一下，一會我們再通過javascript對視頻進行一些簡單操作。”

“哦！對了，小白，思考這樣一個問題，通過css能不能讓視頻自適應屏幕寬度。”

想學H5的朋友可以關注老爐，您的關注是我持續更新《小白HTML5成長之路》的動力！