最近在論壇中看到了很多實用html5開發視訊播放,音樂播放的功能，大部分都在尋找答案。是以我就在這裡做一個demo，供大家互相學習。html5開發越來越流行了，而對于視訊這一塊也是必不可少的一部分。如何讓你的網站占據優勢，就要看你的功能和使用者體驗了。html5對video還是做了很多優惠的東西，我們使用起來很得心應手。
在過去 flash 是網頁上最好的解決視訊的方法，截至到目前還算是主流，像那些優酷之類的視訊網站、蝦米那樣的線上音樂網站，仍然使用 flash 來提供播放服務。但是這種狀況将會随着 html5 的發展而改變。就視訊而言，html5 新增了 video 來實作線上播放視訊的功能。
使用 html5 的 video 可以很友善的使用 javascript 對視訊内容進行控制等等，功能十分強大，同時代碼比較少加快加載速度。此外跨平台性比較好，特别是一些平闆、手機等。例如蘋果公司的産品不支援 flash 僅支援 html5 中的 video 功能。
html5 的相容性問題雖然目前是個硬傷，但這隻是時間的問題。好吧廢話少說，看代碼：
看運作效果(手機上的全屏效果圖)：
非全屏效果圖：
如有不懂，請加qq群：135430763共同學習！