這個元件不適用於 Google Ads、Google AdMob、AMP HTML 廣告、影片廣告和圖像廣告。
影片元件可讓您在專案中嵌入影片,並新增互動功能。
如要顯示 YouTube 影片,請改用 YouTube 元件。
如何在專案中新增影片元件:
- 依序開啟「元件」面板和「媒體」資料夾。
- 將「影片」元件 拖曳至中心區域。如果您正在製作廣告,則可改用 [檔案] > [匯入素材資源...] 指令,並略過下一個步驟。
- 找出「屬性」面板的「影片」屬性部分,然後在 [來源] 欄位中輸入影片來源檔案網址。如果影片來源檔案位於本機,請按一下欄位中的「瀏覽」按鈕 ,從電腦檔案系統中選取影片。
- 如要為影片加入互動效果,您可以新增互動區和提示點。在中心區域內的影片元件上按兩下,即可開啟互動式影片對話方塊。
- 互動區會在特定時間範圍內顯示於影片元件上。
- 提示點的作用是將事件連接至影片播放過程中的特定時間點。
行動瀏覽器中的影片
行動瀏覽器可能會停用影片自動播放功能,以免因播放未要求的內容而造成使用者須支付行動數據費用。對行動瀏覽器來說,最佳做法是關閉自動播放功能,改為開啟影片控制項。
在「屬性」面板中執行下列變更:
- 取消勾選 [自動播放] 方塊。
- 勾選 [顯示控制項] 方塊。
互動式影片對話方塊
您可以透過互動式影片對話方塊預覽影片,並設定互動區和提示點。此對話方塊含有影片時間軸,方便您查看互動區和提示點的出現時機。如要在影片預覽畫面中查看互動區,您必須將播放頭移至互動區的開始和結束時間之間。
互動式影片對話方塊控制項
您可以透過影片預覽畫面下方的按鈕控制影片播放程序和播放頭位置,這些按鈕包括:
倒轉 (至提示點、互動區的開始或結束時間,或者影片開頭) | |
前一個畫格 | |
/ | 播放/暫停 |
下一個畫格 | |
快轉 (至提示點、互動區的開始或結束時間,或者影片結尾) |
如要直接編輯目前的影片播放時間,您也可以點選顯示為黃色的時間,並以秒為單位輸入新的時間。
新增提示點
- 當影片時間軸播放頭移至您要新增提示點的位置時,請點選影片下方的「建立提示點」按鈕 。或者,您也可以在影片時間軸上按一下滑鼠右鍵,然後選取彈出式選單中的 [新增提示點]。
- 提示點標記 會顯示在影片時間軸上方。
- 您可以在右側的「屬性」面板中編輯提示點 ID,也可以在提示點上按一下滑鼠右鍵並選取 [編輯 ID...]。
- 如要調整提示點時間,請沿著影片時間軸拖曳提示點標記,或在「屬性」面板中輸入新的時間。兩個不同提示點之間至少必須相隔半秒。
關閉對話方塊後,您就可以在事件和動作中參照提示點。
刪除提示點
在提示點標記上按一下滑鼠右鍵,然後選取 [刪除]。
新增互動區
- 將時間軸播放頭移至您要新增互動區的位置。
- 按一下影片時間軸左側的 [+ 互動區] 按鈕。影片時間軸下方會顯示新的互動區播放軌。
- 在右側的「屬性」面板中,選取您要以重疊形式顯示的素材資源。
- 如要讓互動區呈現透明,請略過這個步驟。
- 如果您使用影片素材資源,影片將在互動區顯示時自動開始播放,但不會提供控制項。
- 調整互動區的位置、大小和時間。
- 根據預設,互動區的顯示時間涵蓋整個影片播放過程,包括影片開始播放前和結束播放後。
- 您可以在「屬性」面板中變更相關設定,也可以直接拖曳互動區本身、用於調整互動區大小的控點,以及影片時間軸中的互動區長條圖示。
如要回應使用者對互動區的點擊操作,請在關閉互動式影片對話方塊後設定可偵測這類操作的事件,做法是在事件對話方塊中依序按一下 [滑鼠] > [點擊]。
全螢幕影片無法使用互動區。
刪除互動區
在影片時間軸左側,按一下互動區 ID 旁邊的 [X]。
屬性
影片元件屬性
您可以在「屬性」面板中查看影片元件屬性,不過您必須先關閉互動式影片對話方塊。
屬性 | 說明 |
---|---|
名稱 | 元件名稱。 |
自動播放 | 選用這個屬性時,您的影片會在頁面載入後自動播放。部分行動瀏覽器不支援此屬性。 |
循環播放 | 選用這個屬性時,影片會不斷重複播放。 |
靜音 | 選用這個屬性時,影片會在靜音的情況下開始播放。 |
控制項 | 選用這個屬性時,影片播放器會顯示標準影片控制列。 |
來源 | 影片來源網址。您可以用逗號分隔數個網址,藉此加入多種不同格式的來源。可繫結至動態資料。 |
海報 | 海報畫格的網址,用於在使用者播放影片或跳轉至特定播放時間點之前顯示。可繫結至動態資料。 |
您可以在互動式影片對話方塊中查看及編輯提示點屬性。
屬性 | 說明 |
---|---|
ID | 提示點 ID。 |
時間 | 提示點的設定時間 (以秒為單位)。可繫結至動態資料。 |
您可以在互動式影片對話方塊中查看及編輯互動區屬性。
屬性 | 說明 |
---|---|
ID | 互動區 ID。 |
左側 | 以影片元件寬度百分比表示互動區的左側位置。可繫結至動態資料。 |
上方 | 以影片元件高度百分比表示互動區的上方位置。可繫結至動態資料。 |
選取範圍寬度 | 以影片元件寬度百分比表示互動區的寬度。可繫結至動態資料。 |
選取範圍高度 | 以影片元件高度百分比表示互動區的高度。可繫結至動態資料。 |
顯示時間 | 互動區的顯示時間 (以秒為單位)。如果您已選取 [在影片播放前顯示],就無法設定這個屬性。可繫結至動態資料。 |
在影片播放前顯示 | 是否在影片開始播放前顯示互動區。 |
隱藏時間 | 互動區停止顯示的時間 (以秒為單位)。如果您已選取 [在影片播放後顯示],就無法設定這個屬性。可繫結至動態資料。 |
在影片播放後顯示 | 是否在影片結束播放後繼續顯示顯示互動區。 |
素材資源 | 以重疊形式顯示的圖片、影片或群組。可繫結至動態資料。 |
縮放 | 如果素材資源為圖片,您可以設定在互動區尺寸和素材資源尺寸不同時採用的縮放方式:
|
事件和動作
瞭解如何設定事件。
事件
影片元件傳送的事件您可以透過下列影片元件事件觸發其他動作:
事件 | 說明 |
---|---|
暫停後播放 | 在已暫停播放的媒體開始繼續播放時傳送;也就是在前一個暫停事件之後,於繼續播放內容時傳送。 |
已暫停 | 在暫停播放時傳送。 |
播放中 | 在開始播放媒體 (包括首次播放、在暫停之後播放以及結束後重新開始播放) 時傳送。 |
已結束 | 在結束播放時傳送。 |
音量變更 | 在變更音訊音量 (包括設定音量及變更靜音屬性) 時傳送。 |
已跳轉 | 在完成跳轉作業後傳送。 |
緩衝處理中 | 在因為其他操作尚未結束 (例如跳轉) 而無法完成所要求的操作 (例如播放) 時傳送。 |
如要在「事件」對話方塊中選取以上任一事件,請將影片元件設為「目標」。
如果您在影片中加入提示點,則可透過下列提示點事件觸發其他動作:
事件 | 說明 |
---|---|
已到達提示點 | 一旦媒體播放至提示點中定義的時間,系統就會傳送事件。 |
如要在「事件」對話方塊中選取此事件,請將提示點設為「目標」。
如果您在影片中加入互動區,則可透過下列互動區事件觸發其他動作:
事件 | 說明 |
---|---|
已顯示互動區 | 在互動區顯示時傳送事件。 |
已隱藏互動區 | 在互動區隱藏時傳送事件。 |
如要在「事件」對話方塊中選取以上任一事件,請將互動區設為「目標」。
動作
影片元件執行的動作下列影片元件動作可透過其他事件觸發:
動作 | 設定選項 |
---|---|
切換成靜音 | 無 |
暫停 | 無 |
播放 | 無 |
重播 | 無 |
跳轉 | 時間:跳轉至的時間點 (以秒為單位)。 |
設定音量 | 設定音量 (0-100):百分比式影片音量。 |
設定來源 | 來源:不同格式影片的來源網址 (以逗號分隔各個網址)。 |
在「事件」對話方塊中選取以上任一動作時,請將影片元件設為「接收端」。
如果您在影片中加入提示點,則可透過其他事件觸發下列提示點動作:
動作 | 設定選項 |
---|---|
跳轉至提示點 | 無 |
設定提示點時間 | 時間:以秒為單位設定時間。 |
在「事件」對話方塊中選取以上任一動作時,請將提示點設為「接收端」。
如果您在影片中加入互動區,則可透過其他事件觸發下列互動區動作:
動作 | 設定選項 |
---|---|
變更顯示設定 | 顯示互動區 - 顯示互動區。如果您取消勾選這個方塊,則會改為隱藏互動區。 |
跳轉至顯示時間或隱藏時間 | 跳轉至顯示時間 - 跳轉至互動區的顯示時間。如果您取消勾選這個方塊,則會改為跳轉至互動區的隱藏時間。此動作最適合用於在影片播放之前或之後顯示的互動區,因為該動作在影片播放期間只能暫時發揮效果。 |
設定時間 |
|
在「事件」對話方塊中選取以上任一動作時,請將互動區設為「接收端」。
預覽
只要在中心區域內的影片元件上按兩下,即可透過互動式影片對話方塊預覽影片。對話方塊中的影片預覽畫面無法完整轉譯內含動畫的互動區。
除了影片元件外,如果您也要一併預覽文件中的其他元素,或是測試任何事件,請關閉互動式影片對話方塊,然後按一下右上角的 [預覽] 按鈕。