怎麼在網頁中播放視頻之一:HTML5視頻嵌入

在信息量越來越大的今天，越來越多的網站重視數據信息的多樣化與個性化，隨著多媒體技術逐漸發展提高，在線展示視頻、音頻、PPT、圖表等技術也越來越多地應用到了各行各業中，無論是企業還是個人，都在改變著自己的網站風格，下面就來談談怎麼在網頁中播放視頻。在線播放視頻方法很多，本經驗是其中之一，即HTML5視頻嵌入。

在網頁中使用HTML5視頻嵌入技術最大的優點就是不需要任何第三方插件（比如 Adobe公司的Flash）就能播放。不需要第三方插件帶來的好處就是資源佔用更少，想想如果一個網站上嵌入好多flash那該有多慢啊，還好有HTML5視頻嵌入技術可以完好地解決這個問題。那麼它的配置複雜嗎？很簡單！

首先下載video.js，百度一下就能找到。

這個是下載後的目錄。

先把要用到的js\css\swf都加載到html頁面上。如： <link href="video-js/video-js.css" rel="stylesheet" type="text/css"> <script src="video-js/video.js"></script> <script>   videojs.options.flash.swf = "video-js/video-js.swf"; </script>

加入下面的代碼：<video id="my_video_1" controls    preload="auto"width="640"height="480"poster="video-js/my_video_poster.png"    data-setup="{}">        <source src="Wildlife.mp4" type='video/mp4'>        </video>只要記住：修改width="640" height="480"來改變視頻顯示大小，修改src="Wildlife.mp4"來改變要顯示的視頻。

然後打開html文件查看效果吧，它有暫停、音量控制、全屏等功能，還有好多其他功能，比如字幕等，這個以後再寫。

全屏後的效果：

下面看看各個瀏覽器的效果：

Firefox：

Chrome：

360：

IE：

可以看到，IE播放是有問題的。解決IE不能播放的問題很簡單。加入：<script>    if (navigator.userAgent.indexOf('MSIE') >= 0){        document.getElementById("videoDiv").innerHTML='<embed src="Wildlife.mp4" autostart="true" loop="true" width="640" height="480" >';    } </script>意思是：如果是IE瀏覽器就將視頻替換為傳統的以FLASH形式播放。

再看看效果，呵呵，好了。

下面附全部代碼截圖，純代碼發上來不顯示，沒辦法了。