<link href="http://vjs.zencdn.net/c/video-js.css" rel="stylesheet"/>
<script src="http://vjs.zencdn.net/c/video.js"></script>

< !–[if lt IE 9]>   <script type="text/javascript" src="http://html5shiv.googlecode.com/svn/trunk/html5.js"></script>
< ![endif]–>

<video id="my_video_1" class="video-js vjs-default-skin" controls preload="auto" width="275" height="200" poster="http://www.feiliu.com/zt/img/20120417/preview.jpg" data-setup="{}">  <source src="http://www.feiliu.com/zt/video/mv00.mp4" type='video/mp4'/><source src="http://www.feiliu.com/zt/video/test2.webm" type='video/webm'/>
</video>

<link rel="stylesheet" href="css/video-js.css" type="text/css"/>
<script type="text/javascript" src="js/video.js"></script>
<script type="text/javascript">
// Must come after the video.js library// Add VideoJS to all video tags on the page when the DOM is ready
VideoJS.setupAllWhenReady();//可选。不写此函数默认为显示播放控制条，鼠标移开隐藏/* ============= OR ============ */  // Setup and store a reference to the player(s).
// Must happen after the DOM is loaded
// You can use any library's DOM Ready method instead of VideoJS.DOMReady/*
VideoJS.DOMReady(function(){  // Using the video's ID or element  var myPlayer = VideoJS.setup("example_video_1");  // OR using an array of video elements/IDs  // Note: It returns an array of players  var myManyPlayers = VideoJS.setup(["example_video_1", "example_video_2", video3Element]);  // OR all videos on the page  var myManyPlayers = VideoJS.setup("All");  // After you have references to your players you can...(example)  myPlayer.play(); // Starts playing the video for this player.
});
*/  /* ========= SETTING OPTIONS ========= */  // Set options when setting up the videos. The defaults are shown here./*
VideoJS.setupAllWhenReady({  controlsBelow: false, // Display control bar below video instead of in front of  controlsHiding: true, // Hide controls when mouse is not over the video  defaultVolume: 0.85, // Will be overridden by user's last volume if available  flashVersion: 9, // Required flash version for fallback  linksHiding: true // Hide download links when video is supported
});
*/  // Or as the second option of VideoJS.setup/*
VideoJS.DOMReady(function(){  var myPlayer = VideoJS.setup("example_video_1", {  // Same options  });
});
*/
</script>
《/pre><strong>步骤二</strong>：在body显示视频位置添加如下代码：

<div class="vd">  <!-- Begin VideoJS -->      <div class="video-js-box">  <video id="example_video_1" class="video-js" width="280" height="210" controls preload="none" poster="http://www.feiliu.com/zt/img/20120417/img01.jpg">  <source src="http://www.feiliu.com/zt/video/mv01.mp4" type='video/mp4;' /><source src="http://www.feiliu.com/zt/video/test2.webm" type='video/webm'/><object id="flash_fallback_1" class="vjs-flash-fallback" width="280" height="210" type="application/x-shockwave-flash" data="http://www.feiliu.com/zt/flash/flowplayer-3.2.1.swf">  <param name="movie" value="http://www.feiliu.com/zt/flash/flowplayer-3.2.1.swf" />  <param name="allowfullscreen" value="true" />  <param name="flashvars" value='config={"playlist":["http://www.feiliu.com/zt/img/20120417/img01.jpg", {"url": "http://www.feiliu.com/zt/video/mv01.flv","autoPlay":false,"autoBuffering":true}]}' /><img src="http://www.feiliu.com/zt/img/20120417/img01.jpg" width="280" height="210" alt="Poster Image"  title="No video playback capabilities." />  </object>  </video>  </div>  <!-- End VideoJS -->
</div>

<div class="vd">  <object classid="clsid:d27cdb6e-ae6d-11cf-96b8-444553540000" codebase="http://fpdownload.macromedia.com/pub/shockwave/cabs/flash/swflash.cab#version=6,0,0,0" width="280" height="210">  <param name="movie" value="http://static.youku.com/v/swf/qplayer.swf?winType=adshow&VideoIDS=XMzg2NzQ2OTU2&isAutoPlay=false&isShowRelatedVideo=false" />  <param name="quality" value="high" />  <param name="bgcolor" value="#ffffff" />  <param name="play" value="true" />  <param name="loop" value="true" />  <param name="wmode" value="transparent" />  <param name="scale" value="showall" />  <param name="menu" value="true" />  <param value="true" name="allowfullscreen" />  <param name="devicefont" value="false" />  <param name="salign" value="" />  <param name="allowScriptAccess" value="sameDomain" />  <param name="flashvars" value="isShowRelatedVideo=false&showAd=0&show_pre=1&show_next=1&isAutoPlay=false&isDebug=false&UserID=&winType=interior&playMovie=true&MMControl=false&MMout=false&RecordCode=1001,1002,1003,1004,1005,1006,2001,3001,3002,3003,3004,3005,3007,3008,9999"/>              <embed height="210" align="middle" width="280" pluginspage="http://www.macromedia.com/go/getflashplayer" type="application/x-shockwave-flash" name="aprilfools" flashvars="isShowRelatedVideo=false&showAd=0&show_pre=1&show_next=1&isAutoPlay=false&isDebug=false&UserID=&winType=interior&playMovie=true&MMControl=false&MMout=false&RecordCode=1001,1002,1003,1004,1005,1006,2001,3001,3002,3003,3004,3005,3007,3008,9999" src="http://static.youku.com/v/swf/qplayer.swf?winType=adshow&VideoIDS=XMzg2NzQ2OTU2&isAutoPlay=false&isShowRelatedVideo=false"  menu="true" play="true" allowfullscreen="true" allowscriptaccess="sameDomain" quality="high" wmode="transparent" bgcolor="#fff" ver="10.0.0"/>  </object>
</div>

<video id="my_video_1" class="video-js vjs-default-skin" controls preload="auto" width="280" height="210" poster="http://www.feiliu.com/zt/img/20120417/preview.jpg" data-setup="{}">  <source src="http://www.feiliu.com/zt/video/mv01.mp4" type='video/mp4'/>
</video>

<script src="http://api.html5media.info/1.1.4/html5media.min.js"></script>

<!-- 视频媒体标签 -->
<video src="http://www.feiliu.com/zt/video/mv02.mp4" width="480" height="320" controls preload></video>
<!-- 音频媒体标签 -->
<audio src="http://www.feiliu.com/zt/audio/test.mp3" controls loop></audio>