了解如何在網頁中插入 HTML5 視訊以及在瀏覽器中預覽視訊。

Dreamweaver 可讓您將 HTML5 視訊插入網頁。

HTML5 視訊元素提供將影片或視訊嵌入網頁的標準方法。

如需有關 HTML 視訊元素的詳細資訊,請參閱有關 HTML5 視訊的文章,網址為 W3schools.com

插入 HTML5 視訊

  1. 確定您的游標位於要插入視訊的地方。

  2. 選取「插入 > HTML > HTML5 視訊」。HTML5 視訊元素隨即插入指定的位置。

  3. 在「屬性」面板中,指定各種選項的值。

    來源/替換來源 1/替換來源 2:在「來源」中,輸入視訊檔案的位置。或者,按一下資料夾圖示,從本機檔案系統選取視訊檔案。視訊格式的支援會依不同瀏覽器而異。如果「來源」中的視訊格式不受支援,就會使用「替換來源 1」或「替換來源 2」中指定的視訊格式。瀏覽器會選取第一個辨認的格式來顯示視訊。

    指定 HTML5 視訊的屬性
    指定 HTML5 視訊的屬性

    註解:

    使用多個選取範圍快速新增視訊到 3 個欄位。當您為資料夾中 1 個相同的視訊選擇 3 個視訊格式時,清單中的第 1 個格式將使用在「來源」。清單中接下來的格式會用來自動填入「替代來源 1」和「替代來源 2」。

    如需有關瀏覽器及支援之視訊格式的詳細資訊,請參閱下列表格。如需最新資訊,請參閱 HTML5 - 瀏覽器支援

    瀏覽器 MP4 WebM Ogg
    Internet Explorer 9
    Firefox 4.0
    Google Chrome 6
    Apple Safari 5
    Opera 10.6
    • 標題:輸入視訊的標題。
    • 寬度 (W):輸入視訊的寬度 (以像素為單位)。
    • 高度 (H):輸入視訊的高度 (以像素為單位)。
    • 控制:如果您要在 HTML 頁面中顯示「播放」、「暫停」和「靜音」等視訊控制,則選取這個選項。
    • 自動播放:如果您希望視訊一載入網頁便立即開始播放,請選取這個選項。
    • Poster:輸入在視訊完成下載或是直到使用者按下「播放」時,您想要顯示影像的位置。當您插入影像,寬度和高度的值會自動填入。
    • 重複:如果您想要視訊持續播放,直到使用者停止播放影片,請選取這個選項。
    • 已靜音:如果您想要將視訊中的音訊部分靜音,請選取這個選項。
    • Flash 視訊:針對不支援 HTML5 視訊的瀏覽器選取 SWF 檔案。
    • 備用文字:提供當瀏覽器不支援 HTML5 時要顯示的文字。
    • 預先載入:指定頁面載入時應以何種方式載入視訊的作者偏好設定。選取「自動」會在頁面下載時載入整個視訊。選取「中繼資料」會在頁面下載完成之後,僅下載中繼資料。

在瀏覽器中預覽視訊

  1. 儲存網頁。

  2. 選取「檔案 > 即時預覽」。選取您要預覽視訊的瀏覽器。

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

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