如何在网页中插入Flv视频文件

谁践踏了优雅 2022-03-27 08:22 359阅读 0赞

首先說下這個Flash視頻，也就是Flash Video。  
  
為什麼要用這個？很顯然是需要在網頁中播放視頻。我們都知道一般的視頻文件，要不就是asf格式、wmv格式使用mediaplayer進行播放，要不就是rm格式用RealPlayer播放。  
  
這樣的問題是，格式的不同就需要選擇不同的播放器，這對於本地計算機沒有安裝相應播放器的用戶來說，這些視頻根本無法收看。  
  
並且，還由於這些文件的容量過大，下載慢，查看也不很流暢。  
  
所以，解決播放器和容量的問題，運用Flash有個方法：將各類視頻文件轉換成Flash視頻文件。  
  
播放器有嵌入在瀏覽器中的Flash播放器，這好像每個人的機器都有的吧，解決了其它一般視頻文件需要挑選播放器的問題，當然這也就是Flash的優勢。  
  
容量方面，從FlashMX2004起就支持了轉換為Flash視頻的功能，經過相關設置後，可縮小原有視頻的容量，最終轉換的文件擴展名是FLV。  
  
一句話：最終獲得的是個FLV即Flash視頻文件。  
  
那麼Flv文件如何在網頁中顯示呢？Flv文件也只是視頻文件，它的播放同樣是需要播放器的，而這個播放器就是FlashPlayer。  
  
第一種方法：  
  
將本地Flv文件導入部署到Flash軟件中，以庫中元素的形式而存在，將該元素拖入場景，調整位置後，發佈為swf文件即可。  
  
注意以上文件在本地測試沒有問題，但上傳到網絡時，其他瀏覽者是無法查看的，因為當前的播放器調用的是本地Flv文件。  
  
所以，需要調整路徑。首先需要將Flv文件上傳到某個網絡空間，並且獲得其準確的路徑地址。  
  
其次，打開Flash軟件，選擇Flv組件，Alt+F7打開「組件檢查器」，將「ContentPath」中的路徑由本地地址替換為網絡絕對地址  
  
  
  
再來將該Flash發佈導出swf文件。這時候才可以任意使用該swf文件，如同插入其他一般Flash文件一樣。  
  
測試：  [http://www.cnbruce.com/flv/13.swf][http_www.cnbruce.com_flv_13.swf]  
  
當然，此時還會有個播放器控制按鈕相關的一個swf文件，記得要附帶著。  
  
第二種方式：  
  
在第二種方式介紹之前，你有沒有發覺第一種方式有點麻煩？因為我們是需要將視頻插入到網頁的，現在卻需要先製作一個swf播放器文件，其中還有些曲折。然後再打開網頁編輯器將swf文件插入。  
  
正如我們在網頁中插入Flash按鈕一樣，先要用Flash製作按鈕，然後將該Flash插入到網頁。但你有沒有注意到Dreamweaver提供了直接插入Flash按鈕的功能，也就是說：你不必去製作Flash按鈕，直接通過DW中該途徑就能很快完成自己的需要。  
  
那麼，同樣，現在的Dreamweaver8支持了這一功能：插入Flash視頻  
  
你不需要去製作播放視頻的swf文件，只需要提供一個Flv視頻文件即可。這也就是我所要說的重點。  
  
打開插入面板，選擇常用類別，單擊媒體按鈕後的向下箭頭，從下拉列表中選擇「Flash視頻」  
  
  
  
彈出的對話框中，可使用網絡上已經固定的Flv文件地址，還可以是選擇瀏覽本地的Flv文件，但要注意該Flv文件應是你所定義的DW當前該站點中的，以獲得相對路徑，便於之後所有文件一起上傳後，一樣能尋找到該文件。  
  
不出所料，設置完畢後，DW8自動生成了FLVPlayer\_Progressive.swf播放器文件和Halo\_Skin\_3.swf控制器皮膚文件。  
  
那麼，最後你上傳網頁時就是4個文件一起上傳。  
  
  
  
OK，調試個地址看看：  [http://www.cnbruce.com/flv/][http_www.cnbruce.com_flv]  
  
第三種方式：  
  
如果你還是覺得文件比較的多，只要要一個播放器和一個Flv文件就了事。那麼，借用下Google的這個swf播放器googleplayer.swf，自己只需要提供flv路徑就可以了，除flv外，googleplayer.swf還支持mp3文件。  
  
具體如何使用google的這個播放器，Danger同學介紹了個：  [http://www.dengjie.com/weblog/comments.asp?post\_id=1066][http_www.dengjie.com_weblog_comments.asp_post_id_1066]  
  
並且還提供了個在線工具  [http://dengjie.com/temp/google\_player\_cn.swf][http_dengjie.com_temp_google_player_cn.swf]  
  
以下顯示的則是通過上面的工具設置的，採用的Google的播放器。

![程序代码][code.gif] 程序代码

http://video.google.com/googleplayer.swf?videoUrl=http%3A%2F%2Fwww%2Ecnbruce%2Ecom%2Fflv%2Flaislabonita%2Eflv&thumbnailUrl=http%3A%2F%2Fwww%2Ecnbruce%2Ecom%2Fblog%2Fimages%2F2006%2D2%2Ejpg&playerMode=normal

當然，畢竟這個播放器是Google的，只要通過URL的參數選項即可播放相應的該視頻文件。  
  
如果能脫離第一、第二種方式，使用第三種方法又不想使用Google的播放器，那只有自己來寫一個swf播放器了。Danger似乎已經完成。  
  
我的方法則是把google的該播放器下載了下來，然後放到自己的空間裡面  [http://www.cnbruce.com/flv/googl][http_www.cnbruce.com_flv_googl]  ... p;playerMode=normal ，接著就來使用了

![程序代码][code.gif] 程序代码

http://www.cnbruce.com/flv/googleplayer.swf?videoUrl=http%3A%2F%2Fwww%2Ecnbruce%2Ecom%2Fflv%2Flaislabonita%2Eflv&thumbnailUrl=http%3A%2F%2Fwww%2Ecnbruce%2Ecom%2Fblog%2Fimages%2F2006%2D2%2Ejpg&playerMode=normal

[http_www.cnbruce.com_flv_13.swf]: http://www.cnbruce.com/flv/13.swf
[http_www.cnbruce.com_flv]: http://www.cnbruce.com/flv/
[http_www.dengjie.com_weblog_comments.asp_post_id_1066]: http://www.dengjie.com/weblog/comments.asp?post_id=1066
[http_dengjie.com_temp_google_player_cn.swf]: http://dengjie.com/temp/google_player_cn.swf
[code.gif]: http://www.laoweng.com/images/code.gif
[http_www.cnbruce.com_flv_googl]: http://www.cnbruce.com/flv/googl