關於手機端視頻嵌入的探索

      最近一直在作移動端，並且如今與js，jq打交道的時間遠超html，css，這讓編程底子本就很薄的我倍感壓力，希望能一步步順利的克服難關吧。

      今天要在手機裏插入視頻，須要引入優酷或土豆的視頻連接。最開始想到的是html5 的video標籤，不過因爲視頻網站直接複製過來的url都是swf格式的，而這個格式video根本不支持。因而換回<object><embed>標籤來寫，放到手機頁面~結果ios不支持flash的播放。

      不過微信裏分享的那些視頻是怎麼作的呢？因而找了一個連接，開始分析、、

       

       這是在本地看到的視頻信息，能夠看到文件格式是swf

 

       

        這是用谷歌模擬手機瀏覽器的顯示，後綴變成了mp4。。

        也就是這些視頻網站經過user-agent來判斷用戶來源，若是是iOS用戶，則用video標記來替代傳統object，其src的則是源地址（不是flv，而是ts包裝的源，m3u8是個文本文件，其中指定了進一步的ts地址，包括一些視頻分段參數等）；對於其餘用戶，則出於兼容性和功能性考慮，依舊使用swf播放器。

        源地址從哪兒找？

        咱們以優酷爲例，隨便打開一個視頻，以下

           點擊分享給好友右邊的下拉箭頭，奇蹟來了

 

          最下面的通用代碼 ，瞬間感受本身浪費了好多時間。

          <iframe height=498 width=510 src="http://player.youku.com/embed/XOTU5NjU1NDY4" frameborder=0 allowfullscreen></iframe>

          另，聽說能夠無廣告插入視頻，不過好像是針對pc端的，方法以下：

          

第一種： 

<embed src="http://static.youku.com/v/swf/qplayer.swf?winType=adshow&VideoIDS=XNDgyOTYzMzU2&isAutoPlay=true&isShowRelatedVideo=false" wmod

e="transparent" width="480" align="center" border="0" height="400"></embed> 

 

 

【注意一：這個沒有工具條沒有邊框可能設置大小是須要本身調整width/height】 

【注意二：把上面代碼的VideoIDS=XNDQ4ODMzMzQ4裏的XNDQ4ODMzMzQ4換成你本身視頻的ID就能夠了】 

【注意三：isAutoPlay設置自動播放】

 

第二種：

<embed type="application/x-shockwave-flash" src="http://static.youku.com/v1.0.0201/v/swf/qplayer_taobao.swf?VideoIDS=XNDQ4ODMzMzQ4=&isAuto

Play=false&isShowRelatedVideo=false&embedid=-&showAd=0" id="movie_player" name="movie_player" bgcolor="#FFFFFF" quality="high" wmode="tran

sparent" allowfullscreen="true" flashvars="isShowRelatedVideo=false&showAd=0&show_pre=1&show_next=1&i

sAutoPlay=false&isDebug=false&UserID=&winType=interior&playMovie=true&MM Control=false&MMout=false&RecordCode=1001,1002,1003,1004,1005,1006,20

01,3001,3002,3003,3004,3005,3007,3008,9999" pluginspage="http://www.macromedia.com/go/getflashplayer" width="450" height="327"></embed> 

 

 

 

 

         順便分享下今天收集到的一些資料：

<OBJECT classid="clsid:D27CDB6E-AE6D-11cf-96B8-444553540000" 
codebase="http://download.macromedia.com/pub/shockwave/cabs/flash/swflash.cab#version=6,0,40,0" 
WIDTH="550" HEIGHT="400" id="myMovieName"> 
<PARAM NAME=movie VALUE="myFlashMovie.swf"> 
<PARAM NAME=quality VALUE=high> 
<PARAM NAME=bgcolor VALUE=#FFFFFF> 
<EMBED src="/support/flash/ts/documents/myFlashMovie.swf" quality=high bgcolor=#FFFFFF WIDTH="550" HEIGHT="400" 
NAME="myMovieName" ALIGN="" TYPE="application/x-shockwave-flash" 
PLUGINSPAGE="http://www.macromedia.com/go/getflashplayer"> 
</EMBED> 
</OBJECT>

OBJECT 標籤是用於windows IE3.0及之後瀏覽器或者其它支持Activex控件的瀏覽器。「classid」和「codebase」屬性必需要精確地按上例所示的寫法寫，它們告 訴瀏覽器自動下載flash player的地址。若是你沒有安裝過flash player 那麼IE3.0之後的瀏覽器會跳出一個提示框訪問是否要自動安裝flash player。固然，若是你不想讓那些沒有安裝flash player的用戶自動下載播放器，或許你能夠省略掉這些代碼。 
EMBED標籤是用於Netscape Navigator2.0及之後的瀏覽器或其它支持Netscape插件的瀏覽器。「pluginspage」屬性告訴瀏覽器下載flash player的地址，若是尚未安裝flash player的話，用戶安裝完後須要重啓瀏覽器才能正常使用。 
爲了確保大多數瀏覽器能正常顯 示flash，你須要把EMBED標籤嵌套放在OBJECT標籤內，就如上面代碼例子同樣。支持Activex控件的瀏覽器將會忽略OBJECT標籤內的 EMBED標籤。Netscape和使用插件的IE瀏覽器將只讀取EMBED標籤而不會識別OBJECT標籤。也就是說，若是你省略了EMBED標籤，那 firefox就不能識別你的flash了（不過納悶的是，省略了object只寫embed，IE也能正常顯示flash，呵呵，具體的再仔細看看 了）。 

下面列出了用於發佈影片的OBJECT和EMBED標籤的必要以及可選屬性。 

1、必需屬性： 
·CLASSID-設置瀏覽器的Activex控件，僅用於OBJECT標籤。 
·CODEBASE-設置flash Activex控件的位置，於是若是瀏覽器若是沒有安裝的話，能夠自動下載安裝。僅用於OBJECT標籤。 
·WIDTH-以百分比或象素指定flash影片的寬度。 
·HEIGHT-以百分比或象素指定flash影片的高度。 
·SRC-指定影片的下載地址。僅用於EMBED標籤。 
·PLUGINSPAGE-設置flash 插件的位置，於是若是瀏覽器若是沒有安裝的話，能夠自動下載安裝。僅用於EMBED標籤。 
·MOVIE-指定影片的下載地址。僅用於OBJECT標籤。 

2、可選屬性及可用的值： 
·ID-設定變量名，用於腳本代碼的引用。僅用於OBJECT。 
·NAME -設定變量名，用於腳本代碼（如javascript）的引用。僅用於EMBED。 
·SWLIVECONNECT - （true或false）指定當flash player第一次下載時，是否啓用java。若是些屬性省略，默認值爲false。你果你在相同頁同使用javascript和flash，java必須使用FSCommand來工做。 
·PLAY -（true或false）指定flash影片是否在下載完成後就自動播放，若是省略此屬性，則默認爲true。 
·LOOP - （true或false）指定影片播放完最後一幀後是中止仍是繼續循環播放，若是省略此屬性，則默認爲true。 
·MENU - （true或false） 
·True 顯示所有的菜單，容許用戶放大，縮小等控制影片播放等操做。 
·False 顯示只包含設置選項和關於flash的菜單。 
·QUALITY - (low, high, autolow, autohigh, best ) 
·Low 速度優於美觀，並且不該用反鋸齒。 
·Autolow 剛開始着重於速度，但當須要時隨時提高美觀。 
·Autohigh 同時着重播放速度和美觀，但須要時則犧牲美觀來保證播放速度。 
·Medium 應用一些反鋸齒而不平滑位圖。它質量高於low設置而低於high設置。 
·High 美觀優於播放速度，並且一直應用反鋸齒。若是影片不包含動畫，位圖會被平滑化;而若是影片包含動畫，位圖將不變平滑。 
·Best 提供最好的顯示質量而不考慮播放速度。全部輸出都應用反鋸齒及全部位圖都被平滑化。 
·SCALE - (showall, noborder, exactfit) 
·Default(Show all)影片在指定的區域內顯示，但保持原始的比例。影片兩側將會出現邊框。 
·No Boder 收縮影片以適合指定的區域，保持影片不失真，但部分影片將可能將裁切。然而保持影片的原始比例。 
·Exact Fit 使整個影片在指定的區域內顯示，影片有可能變形失真，並且不保持原始的比例。 
·ALIGN - (l, t, r, b) 
·默認爲居中，當瀏覽器窗口小於影片時，邊緣會被裁切。 
·Left,Right,Top,Bottom按照相應的設置沿瀏覽器的邊緣對齊。若是須要，另外三邊將被裁切。 
·SALIGN - (l, t, r, b, tl, tr, bl, br) 
·L,R,T,B 
·TL,TR 
·BL,BR 
·WMODE- (window, opaque, transparent) 設置flash影片的window mode屬性，指定flash在瀏覽器中的透明，層疊及位置。 
·Window 影片在瀏覽器中本身的矩形窗口內播放。 
·Opaque 影片隱藏了全部在它後面的內容。 
·Transparent 使flash影片透明，顯示透明影片後面的網頁內容。這將會下降動畫的性能。並且這個屬性不是在全部瀏覽器中均可用的。 
·BGCOLOR - （#RRGGBB, 十六進制RGB值。）指定影片的背景顏色。使用這個屬性覆蓋flash中設定的背景顏色。 
·BASE - 設定基準目錄或URL，用來解決因此flash中的相對路徑。相似網頁中的<base>標籤。 
·FLASHVARS 傳遞變量到flash player，須要flash player6及之後的版本。 
·傳遞root級變量到影片。字符串的格式是用「&」分隔的name=value集。 
·瀏覽器支持64kB大小的字符串長度。 
·更多關於FlashVars的信息，請查看相關文檔。