讓網站能播放MP4的格式視頻

一直有個問題，Insus.NET想去解決它，工作繁忙，但抽不出時間來。如何讓自己的網站能播放MP4的格式視頻? 以前在網站實現的，都是一般的.wmv,.flv，.avi或.swf等媒體視頻，就差.mp4格式的視頻無法在網站實現。不過，在昨晚Insus.NET已經實現了，現再抽點時間來分享這點點經驗。

先去網上下載一個能播放MP4的組件:http://flowplayer.org/ 

點擊箭頭所指的菜單，進入另外一個頁面，設計屬於你自己的播放器：

點擊"Generate Player" 銨鈕，它將給予你定製好的播放器代碼：

 1 <!doctype html> 2  3 <head> 4  5    <!-- player skin --> 6    <link rel="stylesheet" type="text/css" 7       href="//releases.flowplayer.org/5.4.1/skin/minimalist.css"> 8     9    <style>10    /* site specific styling */11    body {12       font: 12px "Myriad Pro", "Lucida Grande", "Helvetica Neue", sans-serif;13       text-align: center;14       padding-top: 1%;15       color: #999;16       background-color: #333333;17    }18 19    /* custom player skin */20    .flowplayer { width: 80%; background-color: #222; background-size: cover; max-width: 800px; }21    .flowplayer .fp-controls { background-color: rgba(0, 0, 0, 0.4)}22    .flowplayer .fp-timeline { background-color: rgba(0, 0, 0, 0.5)}23    .flowplayer .fp-progress { background-color: rgba(219, 0, 0, 1)}24    .flowplayer .fp-buffer { background-color: rgba(249, 249, 249, 1)}25    .flowplayer { background-image: url("http://farm4.staticflickr.com/3169/2972817861_73ae53c2e5_b.jpg")}26 27    </style>28 29    <!-- flowplayer depends on jQuery 1.7.1+ -->30    <script src="http://ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js"></script>31 32    <!-- flowplayer javascript component -->33    <script src="//releases.flowplayer.org/5.4.1/flowplayer.min.js"></script>34 35 </head>36 37 <body>38 39    <p>Video dimensions won't probably match your player</p>40 41    <div data-swf="//releases.flowplayer.org/5.4.1/flowplayer.swf"42       class="flowplayer no-toggle"43       data-ratio="0.416">44       <video>45          <source type="video/webm" src="http://stream.flowplayer.org/bauhaus/624x260.webm">46          <source type="video/mp4" src="http://stream.flowplayer.org/bauhaus/624x260.mp4">47          <source type="video/ogv" src="http://stream.flowplayer.org/bauhaus/624x260.ogv">48       </video>49       50    </div>51 52 </body>

OK，接下來，在我們的網站上，建立一個網頁，是.aspx的網頁，因為我們需要動態載入.mp4視頻給它，建立時，給個名字吧，如MP4Player.aspx，然後在上面產生的播放器的代碼內，選擇需要的代碼拷貝下來，先把第6行至33行拷貝，粘帖至MP4Player.aspx的<head>標籤內，再把第41行48行拷貝下來，粘帖至MP4Player.aspx的<form>標籤內。

完成了？還沒有呢。那還要做什嗎？ 現在需要動態載入視頻給這個播放器，因此還得改動一些代碼，參考：

修改的是，拿掉第63行至65行代碼，並添加一個asp:Literal控制項。

跟下來Insus.NET在下面將實三種視頻來播放，第一種是播放網站內的MP4視頻，第二種是播放其它網站的視頻，第三種是播放非網站目錄的視頻。
先來實現第一種：是在MP4Player.aspx.cs寫程式，

第二種，就是使用者可以粘帖其它MP4的視頻地址，然後在自己的網站播放。你在處理這些地址，可以使用下面的方法，判斷地址是否正確或是存在：
http://www.cnblogs.com/insus/archive/2013/05/03/3057029.html
然後，給使用者溫馨提示。

另外，Insus.NET從下面地址擷取測試站外視頻地址：http://www.asp.net/web-pages/videos 很多MP4的視頻喔！！！
下面是舉個例，擷取網上視頻地址：

擷取地址之後，我們得在程式中，讓使用者粘帖地址的地方，在MP4Player.aspx網頁，放一個TextBox和一個銨鈕，也就是說，使用者把視頻地址粘帖在文字框之後，點旁邊的揪放按鈕，就開始了。

看看.aspx.cs的Click播放事件：

 還是看看效果吧：

OK,一切跟當初想的一樣，現在完成最後一種方法，就是怎樣播放非網站目錄的MP4視頻？要實現這個，得需要寫點代碼。需要把檔案轉為資料流，再播放，你可以在網站建立一個.ashx檔案實現。

ProcessVideoFile.ashx檔案寫好了，Insus.NET還得改一下MP4Player.aspx.cs代碼，分4步來修改。

 
示範一下：

OK，算完成了。