讓網站能播放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,算完成了。


免責聲明!

本站轉載的文章為個人學習借鑒使用,本站對版權不負任何法律責任。如果侵犯了您的隱私權益,請聯系本站郵箱yoyou2525@163.com刪除。



 
粵ICP備18138465號   © 2018-2025 CODEPRJ.COM