了解如何在 Dreamweaver 網頁 (HTML5) 中內嵌視訊以及插入 FLV 檔案。

在網頁中內嵌視訊 (HTML5)

HTML5 支援可讓使用者在瀏覽器中播放視訊與音效檔案的視訊語音效標籤,不需要透過外部外掛程式或播放程式。Dreamweaver 支援加入視訊與音效標籤的相關程式碼提示。

「即時檢視」會呈現視訊,並且為您內嵌至網頁中的視訊提供預視。

註解:

雖然您可以將任何視訊內嵌至您的網頁,「即時檢視」不會一律呈現所有視訊。Dreamweaver 使用 Apple QuickTime 外掛程式來支援視訊與音效標籤。在 Windows 中,如果沒有安裝 Apple QuickTime 外掛程式,網頁就無法呈現媒體內容。

插入 FLV 檔

插入 FLV 檔

您可以輕易地將 FLV 視訊加入網頁,而不需要使用 Flash 撰寫工具。若要進行這項操作,您必須已有編碼的 FLV 檔。

Dreamweaver 會插入一個 SWF 組件用來顯示 FLV 檔;當您在瀏覽器中檢視時,該組件將顯示選取的 FLV 檔,以及一組播放控制項。

選取的 FLV 檔案以及一組播放控制項
選取的 FLV 檔案以及一組播放控制項

Dreamweaver 提供下列 FLV 視訊內容傳遞選項,方便您的網站瀏覽者觀賞:

漸進式下載視訊

會將 FLV 檔下載至網頁瀏覽者的硬碟,然後再播放檔案。不同於傳統的「下載後播放」視訊傳遞方法,漸進式下載允許視訊檔案在下載完成之前開始播放。

串流視訊

會串流視訊內容,並在確保播放流暢的短暫緩衝時間過後,在網頁上播放該內容。若要在網頁上啟用串流視訊,您必須具有 Adobe® Flash® Media Server 的存取權。

您必須已有編碼的 FLV 檔,才能在 Dreamweaver 中使用這種檔案。您可以插入兩種轉碼器 (壓縮/解壓縮技術) 所建立的視訊檔案:Sorenson Squeeze 和 On2。

如同一般的 SWF 檔,當您插入 FLV 檔時,Dreamweaver 也會插入程式碼用來偵測使用者是否已有正確的 Flash Player 版本可觀賞視訊。如果使用者的版本不正確,網頁將顯示預設替代內容以提示使用者下載 Flash Player 最新版本。

註解:

使用者若要檢視 FLV 檔,必須在電腦上安裝 Flash Player 8 或更新版本。如果使用者未安裝必要的 Flash Player 版本,但是已有 Flash Player 6.0 r65 或更新版本,瀏覽器則會顯示 Flash Player 快速安裝程式而非替代內容。使用者若拒絕快速安裝,網頁會接著顯示替代內容。

如需有關使用視訊的詳細資訊,請造訪視訊技術中心,網址為:www.adobe.com/go/flv_devcenter_tw

插入 FLV 檔

  1. 選取「插入 > HTML > Flash 視訊」。

    插入 Flash 視訊
    插入 Flash 視訊

  2. 在「插入 FLV」對話方塊中,從「視訊類型」彈出式選單中選取「漸進式下載視訊」或「串流視訊」。
  3. 完成對話方塊的其他選項,然後按一下「確定」。

註解:

Microsoft Internet Information Server (IIS) 不會處理巢狀物件標籤。在 ASP 網頁中,當插入 SWF 或 FLV 檔時,Dreamweaver 使用的是巢狀物件/內嵌程式碼,而不是巢狀物件程式碼。

設定漸進式下載視訊的選項

「插入 FLV」對話方塊可讓您針對插入網頁中的 FLV 檔,設定其漸進式下載傳遞的選項。

  1. 選取「插入 > HTML > Flash 視訊」(或在「插入」面板的「HTML」類別中,按一下「Flash 視訊」圖示)。

  2. 在「插入 FLV」對話方塊中,從「視訊類型」選單選取「漸進式下載視訊」。
    插入 Flash 視訊
    插入 Flash 視訊

  3. 請指定下列選項:

    URL

    指定 FLV 檔案的相對路徑或絕對路徑。 若要指定相對路徑 (例如,mypath/myvideo.flv),請按一下「瀏覽」按鈕,瀏覽並選取 FLV 檔案。若要指定絕對路徑,請輸入 FLV 檔案的 URL (例如,http://www.example.com/myvideo.flv)。

    外觀

    指定視訊組件的外觀。您所選取的外觀預覽畫面會出現在「外觀」彈出式選單的下方。

    寬度

    指定 FLV 檔案的寬度 (以像素為單位)。若要讓 Dreamweaver 判斷 FLV 檔案的確切寬度,請按一下「偵測大小」按鈕。如果 Dreamweaver 無法判斷寬度,您就必須鍵入寬度值。

    高度

    指定 FLV 檔案的高度 (以像素為單位)。 若要讓 Dreamweaver 判斷 FLV 檔案的確切高度,請按一下「偵測大小」按鈕。如果 Dreamweaver 無法判斷高度,您就必須鍵入高度值。

    註解:

    「外觀的總計」就是 FLV 檔案的寬度和高度,加上所選外觀的寬度和高度。

    限制

    會將視訊組件的寬度和高度維持在相同的比例。這是預設選取的選項。

    自動播放

    指定是否要在開啟網頁時播放視訊。

    自動倒帶

    指定是否要在播放完視訊後,讓播放控制項返回起始位置。

  4. 按一下「確定」關閉對話方塊,即可將 FLV 檔加入網頁。

    「插入 FLV」命令會產生視訊播放程式 SWF 檔和外觀 SWF 檔,這些檔案可用來在網頁上顯示視訊內容 (您可能需要在「檔案」面板中按一下「重新整理」按鈕以查看新的檔案)。這些檔案會和您在其中加入視訊內容的 HTML 檔,儲存於相同目錄。當您上傳含有 FLV 檔的 HTML 網頁時,Dreamweaver 會上傳這些檔案做為相關檔案 (只要您在「要上傳相關檔案嗎」對話方塊中按一下「是」)。

設定串流視訊選項

「插入 FLV」對話方塊可讓您針對插入網頁中的 FLV 檔,設定其串流視訊下載的選項。

  1. 選取「插入 > HTML > Flash 視訊」(或在「插入」面板的「HTML」類別中,按一下「Flash 視訊」圖示)。

  2. 從「視訊類型」彈出式選單中,選取「串流視訊」。
    設定串流視訊選項
    設定串流視訊選項

    伺服器 URI

    會以 rtmp://www.example.com/app_name/instance_name 的格式來指定伺服器名稱、應用程式名稱和實體名稱。

    串流名稱

    會指定要播放的 FLV 檔案名稱 (例如,myvideo.flv)。.flv 副檔名是選擇性的。

    外觀

    指定視訊組件的外觀。您所選取的外觀預覽畫面會出現在「外觀」彈出式選單的下方。

    寬度

    指定 FLV 檔案的寬度 (以像素為單位)。若要讓 Dreamweaver 判斷 FLV 檔案的確切寬度,請按一下「偵測大小」按鈕。如果 Dreamweaver 無法判斷寬度,您就必須鍵入寬度值。

    高度

    指定 FLV 檔案的高度 (以像素為單位)。 若要讓 Dreamweaver 判斷 FLV 檔案的確切高度,請按一下「偵測大小」按鈕。如果 Dreamweaver 無法判斷高度,您就必須鍵入高度值。

    註解:

    「外觀的總計」就是 FLV 檔案的寬度和高度,加上所選外觀的寬度和高度。

    限制

    會將視訊組件的寬度和高度維持在相同的比例。這是預設選取的選項。

    即時視訊播送

    指定是否要即時播送視訊內容。如果選取了「即時視訊內容」,Flash Player 會播放由 Flash® Media Server 以資料流方式所處理的即時視訊內容。即時視訊播送的名稱即為「串流名稱」文字方塊中指定的名稱。

    註解:

    當您選取「即時視訊播送」時,組件的外觀上只會出現音量控制項,因為您無法操作即時視訊。此外,「自動播放」和「自動倒帶」也都無法使用。

    自動播放

    指定是否要在開啟網頁時播放視訊。

    自動倒帶

    指定是否要在播放完視訊後,讓播放控制項返回起始位置。

    緩衝時間

    指定在視訊開始播放之前,進行緩衝所需的時間 (以秒為單位)。預設緩衝時間是設定為 0,在您按下「播放」按鈕之後,視訊就會立即開始播放 (如果選取了「自動播放」,則只要連線到伺服器,視訊就會開始播放)。如果要傳遞的視訊,其位元速率大於網頁瀏覽者連線速度,或者 Internet 流量可能會造成頻寬或連線問題時,您都可以設定緩衝時間。例如,如果您想要在網頁開始播放視訊之前,先傳送 15 秒的視訊到網頁,請將緩衝時間設定為 15。

  3. 按一下「確定」關閉對話方塊,即可將 FLV 檔加入網頁。

    「插入 FLV」命令會產生視訊播放程式 SWF 檔和外觀 SWF 檔,這些檔案可用來在網頁上顯示視訊。這個命令也會產生必須上傳到 Flash Media Server 的 main.asc 檔案 (您可能需要在「檔案」面板中按一下「重新整理」按鈕以查看新的檔案)。這些檔案會和您在其中加入視訊內容的 HTML 檔,儲存於相同目錄。當您上傳含有 FLV 檔的 HTML 網頁時,請記得將這些 SWF 檔上傳至您的網頁伺服器,並將 main.asc 檔案上傳到 Flash Media Server。

    註解:

    如果您的伺服器上已經有 main.asc 檔案,請先向您的伺服器管理員進行確認,再上傳「插入 FLV」命令所產生的 main.asc 檔案。

    在 Dreamweaver「文件」視窗中,選取視訊組件預留位置,並按一下「屬性」檢視窗 (「視窗 > 屬性」) 中的「上傳媒體」按鈕,即可上載所有必要的媒體檔案。如需查閱必要檔案的清單,請按一下「顯示必要的檔案」。

    註解:

    「上傳媒體」按鈕不會上傳含有視訊內容的 HTML 檔案。

編輯 Flash Player 下載資訊

當您將 FLV 檔插入頁面時,Dreamweaver 也會插入程式碼來偵測使用者是否已有正確的 Flash Player 版本。如果版本不正確,網頁將顯示預設替代內容以提示使用者下載最新版本。您可以隨時更改這個替代內容。

本程序也適用於 SWF 檔。

註解:

如果使用者未安裝必要的版本,但是已有 Flash Player 6.0 r65 或更新版本,瀏覽器則會顯示 Flash Player 快速安裝程式。使用者若拒絕快速安裝,網頁會接著顯示替代內容。

  1. 在「文件」視窗的「設計」檢視中,選取 SWF 檔或 FLV 檔。
  2. 按一下 SWF 檔或 FLV 檔索引標籤上的眼睛圖示。

    註解:

    您也可以按 Control+] 切換到替代內容檢視。若要返回 SWF/FLV 檢視,請按 Control+[ 直到選取整個替代內容為止,然後再次按 Control+[。

  3. 依照您在 Dreamweaver 中編輯任何其他內容的方式,編輯該內容。

    註解:

    您無法加入 SWF 檔或 FLV 檔做為替代內容。

  4. 再按一次眼睛圖示,返回 SWF 或 FLV 檔案檢視。

疑難排解 FLV 檔案

本節將詳細說明一些最常見的 FLV 檔案問題原因。

因相關檔案不存在而導致的檢視問題

Dreamweaver CS4 和更新版本產生的程式碼會用到四個不同於 FLV 檔案本身的相關檔案:

  • swfobject_modified.js

  • expressInstall.swf

  • FLVPlayer_Progressive.swf

  • 外觀檔案 (例如 Clear_Skin_1.swf)

請注意,相較於 Dreamweaver CS3,Dreamweaver CS4 和更新版本還多了兩個相關檔案。

上述檔案的前兩個檔案 (swfobject_modified.js 和 expressInstall.swf) 是安裝在稱為 Scripts 的資料夾,如果沒有這個資料夾,Dreamweaver 會在網站根目錄中建立。

後兩個檔案 (FLVPlayer_Progressive.swf 和外觀檔案) 會安裝在與內嵌 FLV 之頁面相同的資料夾中。外觀檔案包含 FLV 的控制項,而其名稱則視您在 Dreamweaver 說明所述選項中選擇的外觀而定。例如,選擇 Clear Skin,這個檔案就會命名為 Clear_Skin_1.swf。

這四個相關檔案都必須上傳至 FLV 的遠端伺服器,才能正確顯示。

忘記上傳這些檔案是 FLV 檔案無法在網頁中正確執行的最常見原因。如果遺漏其中一個檔案,您可能會在頁面上看見「白色方框」。

若要確保已經上傳所有相關檔案,請使用「Dreamweaver 檔案」面板來上傳顯示 FLV 的頁面。當您上傳頁面時,Dreamweaver 會詢問您是否要上傳相關檔案 (除非已關閉此選項)。按一下「是」以上傳相關檔案。

在本機預覽頁面時的檢視問題

由於 Dreamweaver CS4 中有安全性更新,除非您在 Dreamweaver 網站定義中定義本機測試伺服器並使用測試伺服器預覽頁面,否則無法使用「在瀏覽器中預覽」命令來測試含內嵌 FLV 的頁面。

一般而言,您只有在使用 ASP、ColdFusion 或 PHP 製作頁面時,才需要測試伺服器 (請參閱設定您的電腦以進行應用程式開發)。如果您正在建立只有使用 HTML 的網站,而沒有定義測試伺服器,按 F12 鍵 (Windows) 或 Opt+F12 鍵 (Macintosh) 便會在螢幕上產生一堆混亂的外觀控制項。解決方式是定義測試伺服器並使用測試伺服器預覽頁面,或是上傳檔案至遠端伺服器並於該處檢視頁面。

註解:

安全性設定或許也有可能造成無法預覽本機 FLV 內容,但是 Adobe 還不能確定這點。您可以嘗試更改安全性設定,看看是否有幫助。如需有關更改安全性設定的詳細資訊,請參閱技術文件 117502

FLV 檔案問題的其他可能原因

  • 如果您無法在本機進行預覽,請確定已取消選取「編輯 > 偏好設定 > 即時預覽」下的「使用暫存檔預覽」選項。

  • 確認您擁有最新的 FlashPlayer 外掛程式

  • 在 Dreamweaver 外部移動檔案和資料夾時,要很小心。如果您將檔案和資料夾移至 Dreamweaver 外部,Dreamweaver 無法保證 FLV 相關檔案的路徑正確。

  • 您可以使用已知有效的 FLV 檔案來暫時取代產生問題的 FLV 檔案。如果用來取代的 FLV 檔案有效,表示原始 FLV 檔案發生問題,而不是瀏覽器或電腦發生問題。

編輯或刪除 FLV 組件

您可以選取 Dreamweaver「文件」視窗中的視訊組件預留位置,然後使用屬性檢視窗來變更網頁上該視訊的設定。或者,您也可以刪除視訊組件,然後再選取「插入 > HTML > Flash 視訊」重新插入該組件。

編輯 FLV 組件

  1. 在 Dreamweaver「文件」視窗中,按一下預留位置中央的「FLV」圖示,以選取視訊組件預留位置。
  2. 開啟「屬性」檢視窗 (「視窗 > 屬性」),然後進行變更。

    註解:

    您無法使用「屬性」檢視窗來變更視訊類型 (例如,從漸進式下載視訊變更為串流視訊)。若要變更視訊類型,請先刪除 FLV 組件,再選取「插入 > 媒體 > FLV」重新插入組件。

刪除 FLV 組件

  • 在 Dreamweaver「文件」視窗中,選取 FLV 組件預留位置,然後按 Delete 鍵。

此産品由 Creative Commons Attribution-Noncommercial-Share Alike 3.0 Unported License 授權  Creative Commons 條款未涵蓋 Twitter™ 與 Facebook 文章。

法律說明   |   線上隱私權政策