在這里介紹兩種方式在頁面中插入視頻，一種是以前常用的flash方式，一種是近幾年流行起來的html5方式。

到底選擇哪種方式就看你具體的項目：

• flash：兼容性比較好，視頻會壓縮，相比其他格式沒有那么大，但是要知道的是視頻越小質量就會越差的，而且flash方式插入的視頻對移動端也不友好。如果要考慮移動端的話最好是用html5.
• html5：由于每個瀏覽器支持不同格式的視頻，所以你必須在服務器放置好幾個不同格式的視頻，但是基本上公司都設有自己的服務器，硬盤的容量還是有保證的，畢竟可以還自己買硬盤加上。而在網絡上傳輸的話由于視頻的格式相比flash格式視頻是大了些，占用帶寬也會大，但是它的質量會更好些。

也許你需要對手上的視頻進行編碼

你用攝像機拍攝的視頻最初文件格式是由攝像機或視頻編輯器軟件（如 Adobe Premiere Pro CS4）決定的。這些原始文件不適合在互聯網上傳播。它們太大了，因為它們本來是被設計成通過DVD或其他介質傳播的。

• 一般的數碼相機視屏文件格式為AVI
• 手機：3GP，AVI,RMVB

要想在互聯網上發行，這些文件就必須轉換成用戶容易下載和觀看的格式。

各種各樣的視頻文件可以互相轉換，這里推薦幾款轉換工具：

• 格式工廠
• Adobe Media Encoder CS4

在頁面中插入格式為FLA的視頻

幾乎所有的網民都安裝了 Flash Player 多媒體播放器，所以可以放心使用地在頁面中插入fla視頻。

步驟：

1. 使用Adobe Media Encoder CS4/格式工廠軟件把原始視頻轉換成FLV格式文件，這是一種壓縮的格式，因此適用用于網絡傳輸。
2. 使用Dreamweaver把處理后的視頻文件添加到web中。

1：選擇能適用于 Flash Player的輸出格式，Adobe Media Encoder CS4中選擇 FLV|F4V，格式工廠中選擇FLV。

2：打開Dreamweaver點擊插入------媒體-------插入FLV，選擇你要添加的FLV視頻。當把視頻文件添加到web頁面中時，Dreamweaver在頁面中添加一個flash影片控制下載和播放（稱為視頻播放器）。頁面中需要有足夠的空間顯示視頻和視頻播放器。

Dreamweaver中有兩種不同的發布視頻的方式（視頻類型“選項），下面分別介紹。

累進式下載視頻：首先將FLV文件下載到訪問者的硬盤上，當下載了足夠多的視頻文件后就開始播放，它允許下載完成之前就開始播放視頻文件。

• ”url“:flv文件地址；
• ”外觀“：指定視頻組件的外觀，選擇某項后，會在下面顯示它的預覽效果
• ；“寬度”，“高度”分別設置FLV的寬和高，單位是像素。你也可以點擊后面的“檢測大小”按鈕來檢測視頻本來的大小；
• “限制高寬比”：保持FLV文件的寬度和高度比例不變；
• ”自動播放“：加載頁面時會自動播放FLV文件；
• ”自動重新播放“：FLV文件循環播放；
• “確定”：將FLV文件插入到頁面中。

然后打開你的站點會多出一個名為“Scripts"文件夾里面分別有兩個文件夾

如果你覺得默認的視頻控件不美觀，你可以使用Flash創建一個更好的視頻界面。然后把這個影片文件覆蓋到Dreamweaver生成的界面expressInstall.swf文件即可。

瀏覽器打開效果如下圖。

流視頻：Flash Player鏈接到服務器，視頻以流的形式傳播，當收到信息后，會顯示出來，然后就從內存中消除，它從不保存到用戶磁盤上。

百科：視頻流是指視頻數據的傳輸，例如，它能夠被作為一個穩定的和連續的流通過網絡處理。因為流動，客戶機瀏覽器或插件能夠在整個文件被傳輸完成前顯示多媒體數據。

• ”服務器URL“：輸入服務器名稱，應用程序名稱和實例名稱。
• ”流名稱“：指定要播放的FLV文件名稱。如name.flv。
• ”包括外觀“：flv文件的寬度和高度的總寬度和總高度是算上外觀。
• ”實時視頻輸入”：Flash Player將播放從Flash® Media Server流入的實時視頻流。如果要在網頁上啟用流視頻，那么是必須有訪問Flash® Media Server的權限。
• “緩沖時間”：設置在視頻開始播放之前進行緩沖處理所需要的時間（秒為單位）。

優點：

• 可以及時回放視頻，而不需要等下載一定多的量后才播放。
• 可以驗證用戶，只有授予權限的用戶才能訪問視頻。
• 可以根據用戶和視頻文件分配帶寬。
• 視頻文件不會被瀏覽器緩存，所以能控制傳播。

在頁面中插入html5視頻

各瀏覽器對基于html5<video>的兼容性：

<video poster="movie.jpg" controls>
  <source src="movie.webm" type='video/webm; codecs="vp8.0, vorbis"'>
  <source src="movie.ogg" type='video/ogg; codecs="theora, vorbis"'>
  <source src="movie.mp4" type='video/mp4; codecs="avc1.4D401E, mp4a.40.2"'>
  <p>This is fallback content</p>
</video>

1. WEBM
2. MP4
3. OGG

舊版本的ie

在html5沒有流行之前，通用的視頻播放解決方案是flash和flv，但是移動端開始流行起來，我們開始喜歡用html5，一般的做法是通過檢測agent是否支持html5來決定使用video還是flash，在ie8以下的瀏覽器，flash幾乎是唯一的選擇。

• 服務端根據不同的瀏覽器輸出不同的html，如果支持html5就輸出video+mp4和webm，否則就輸出flash相關的標簽和腳本。
• 使用html5shiv和html5-video使IE支持video標簽。參考
• 將object內嵌在video中。

將object內嵌在video中：

<video id="movie" width="320" height="240" preload controls>
  <source src="pr6.webm" type="video/webm; codecs=vp8,vorbis" />
  <source src="pr6.ogv" type="video/ogg; codecs=theora,vorbis" />
  <source src="pr6.mp4" />
  <object width="320" height="240" type="application/x-shockwave-flash"
    data="flowplayer-3.2.1.swf">
    <param name="movie" value="flowplayer-3.2.1.swf" />
    <param name="allowfullscreen" value="true" />
    <param name="flashvars" value="config={'clip': {'url': 'http://wearehugh.com/dih5/pr6.mp4', 'autoPlay':false, 'autoBuffering':true}}" />
    <p>Download video as <a href="pr6.mp4">MP4</a>, <a href="pr6.webm">WebM</a>, or <a href="pr6.ogv">Ogg</a>.</p>
  </object>
</video>

• 格式工廠目測不支持webm和ogg
• Easy HTML5 Video 支持多種格式轉換并生成html
  

video.js

現在介紹下第三種插入視頻方式----利用插件video.js

有關它的介紹就不多說了，網上都有很多了。

我們先去它的官網，把這個插件下載下來。

所需的文件都在“dist”這個文件里面，video.js插件界面用全部用css制作，所以“font”界面文件，“lang”提示語言（默認用的是英文）

然后：

1. “font”，“lang”文件夾和“video-js.css”，“video.js”復制到我們的項目文件夾中，并在html文件的頭部應用樣式和腳本。

   <link href="move/video-js.css" rel="stylesheet" type="text/css">
     <script src="move/video.js"></script>

2. 然后在放置視頻的地方放置如下代碼 

     <video id="example_video_1" class="video-js vjs-default-skin" controls preload="none" width="640" height="264"
         poster="http://video-js.zencoder.com/oceans-clip.png"
         data-setup="{}">
       <source src="http://video-js.zencoder.com/oceans-clip.mp4" type='video/mp4' />
       <source src="http://video-js.zencoder.com/oceans-clip.webm" type='video/webm' />
       <source src="http://video-js.zencoder.com/oceans-clip.ogv" type='video/ogg' />
       <track kind="captions" src="demo.captions.vtt" srclang="en" label="English"></track><!-- Tracks need an ending tag thanks to IE9 -->
       <track kind="subtitles" src="demo.captions.vtt" srclang="en" label="English"></track><!-- Tracks need an ending tag thanks to IE9 -->
       <p class="vjs-no-js">To view this video please enable JavaScript, and consider upgrading to a web browser that <a href="http://videojs.com/html5-video-support/" target="_blank">supports HTML5 video</a></p>
     </video>
   

   
   

注意：

如果你的界面圖標沒有出來，那就是你的“font"文件的引用路徑有問題，這時請打開你的“video-js.css”樣式表進行修改

     3.現在我們把提示文字除掉，修改第二步html，把下面兩句刪除即可：

 <track kind="captions" src="demo.captions.vtt" srclang="en" label="English"></track><!-- Tracks need an ending tag thanks to IE9 -->
 <track kind="subtitles" src="demo.captions.vtt" srclang="en" label="English"></track><!-- Tracks need an ending tag thanks to IE9 -->

補充：

該插件是默認不自動播放視頻，如果要打開網頁就自動播放視頻，那么請在”video“標簽中增加”autoplay="true""即可

最終代碼

 <video id="example_video_1" class="video-js vjs-default-skin" controls preload="none" width="640" height="264"
      poster="http://video-js.zencoder.com/oceans-clip.png"
      data-setup="{}">
    <source src="http://video-js.zencoder.com/oceans-clip.mp4" type='video/mp4' />
    <source src="http://video-js.zencoder.com/oceans-clip.webm" type='video/webm' />
    <source src="http://video-js.zencoder.com/oceans-clip.ogv" type='video/ogg' />

    <p class="vjs-no-js">您的瀏覽器不支持該視頻文件</p>
  </video>

參考文獻：

• 淺談html5網頁內嵌視頻
• Web頁面中添加視頻
  

<video id="movie" width="320" height="240" preload controls>
  <source src="pr6.webm" type="video/webm; codecs=vp8,vorbis" />
  <source src="pr6.ogv" type="video/ogg; codecs=theora,vorbis" />
  <source src="pr6.mp4" />
  <object width="320" height="240" type="application/x-shockwave-flash"
    data="flowplayer-3.2.1.swf">
    <param name="movie" value="flowplayer-3.2.1.swf" />
    <param name="allowfullscreen" value="true" />
    <param name="flashvars" value="config={'clip': {'url': 'http://wearehugh.com/dih5/pr6.mp4', 'autoPlay':false, 'autoBuffering':true}}" />
    <p>Download video as <a href="pr6.mp4">MP4</a>, <a href="pr6.webm">WebM</a>, or <a href="pr6.ogv">Ogg</a>.</p>
  </object>
</video>