網頁中播放mp4文件

最近給企業做了一個網站，爲了宣傳企業形象，錄了很多宣傳片。這就涉及到網站視頻的播放，在html5時代，實現視頻播放很簡單，而且也有很多jquery插件可以更簡潔的播放視頻。
本文記錄一下這次開發中使用的基於html5的videojs播放器，使用很簡單，代碼如下：
引用及定義
引用視頻的js與css文件
videojs.options.flash.swf用來定義播放器的初始背景屏幕,默認爲黑屏

<link href="video-js.css" rel="stylesheet" type="text/css">
  <script src="video.js"></script>
  <script>
    videojs.options.flash.swf = "video-js.swf";
  </script>

html5代碼,官方demo中給定的代碼，因爲符合需求，只改了視頻源和初始圖片，其他的沒改。
定義視頻源屬性source
定義初始圖片 poster
width 定義播放器寬度
height 定義播放器高度
高度和寬度可以按百分比定義，用以支持手機播放
track爲視頻節的導航，可以去掉，對這次開發沒用
常用的屬性還有autoplay ，視頻自動播放

<video id="example_video_1" class="video-js vjs-default-skin" controls preload="none" width="640" height="264"
     poster="video/pic/product-1.png"
     data-setup="{}">
    <source src="video/product-1.mp4" type='video/mp4' />
    <track kind="captions" src="demo.captions.vtt" srclang="en" label="English"></track>
    <track kind="subtitles" src="demo.captions.vtt" srclang="en" label="English"></track>
    <p class="vjs-no-js">請使用支持html5的瀏覽器</p> <!--不支持html5顯示-->
  </video>