一、說明

HTML5中引入了video標簽用於方便的在瀏覽器中播放視頻，不在需要對flashPlayer進行依賴，更加輕量級。但在瀏覽器兼容、視頻協議支持方面還有一些需要註意的問題。

二、瀏覽器兼容

html5 Video標簽目前IE9+ 及 其他主流瀏覽器都能夠支持。

對於IE8及以下的IE瀏覽器，可考慮引入html5擴展支持js來嘗試解決，未親測。

三、視頻協議支持

支 持：Ogg、MPEG4、WebM
不支持：rtmp、rtsp（如果進行轉碼，切成HLS可以播放，但是即使在局域網內也有3秒左右的時延）

註：更詳細的視頻格式支持希望有知情的朋友告知，多謝！

四、DEMO

更多的屬性、方法和事件參考本文參考資料中的API列表；

<!-- 定義一個video標簽：
    autoplay：自動播放；
    controls：顯示視頻控件;
    src:指定視頻源;
    width,height:制定視頻的顯示尺寸；
 -->
<video id="my_video" autoplay controls      src="https://media.w3.org/2010/05/sintel/trailer.mp4" width="500" height="500">
</video>

<script type="text/javascript">
    //獲取視頻對象
    var myVideo=document.getElementById("my_video");

    //播放視頻
    function play(){
        myVideo.play();
    }
    //暫停視頻
    function pause(){
        myVideo.pause();
    }
</script>
 

五、參考資料

1. HTML5 Video詳細API：https://msdn.microsoft.com/zh-cn/library/hh772500(v=vs.85).aspx
2. HTML5 Video詳細功能DEMO：http://www.w3.org/2010/05/video/mediaevents.html

Web視頻播放 之 【HTML5 Video標簽】