Weber更新日誌

組件概述

背景視頻是背景專用影片元件，影片會作為底層鋪在內容後方，上層可疊放標題、按鈕、圖片等任意組件。

適用場景

1. 首頁 Hero 區塊，使用短循環影片作為背景，搭配大標題與 CTA 按鈕

2. 服務、產品介紹章節，使用低幀、簡潔循環影片營造視覺氛圍

3. 落地頁首屏，用動態背景提升頁面質感與品牌感受

不建議使用場景

1、需要以視頻內容為主視覺的請使用【視頻】或【第三方視頻】組件，背景視頻設計定位為視覺氛圍，不適合作為主要內容傳遞組件。

2、小容器內使用背景影片：小空間使用背景影片效能消耗高，建議使用【圖片】組件。

組件使用

1、可以在編輯器右側【設置】中，開啟【自動播放】和【循環播放】功能。（注意：受瀏覽器等平台規則限制，自動播放視頻默認為【靜音播放】）

2、可以在編輯器右側【設置】中，開啟【播放按鈕】。播放按鈕可修改圖標樣式（僅支持圖標庫），可自定義樣式與位置。在部分移動端和禁止自動播放視頻平台中開啟此設置可以手動播放影片

3、可以在編輯器右側【設置】中，開啟【懸浮播放】，注意需要搭配【封面圖】使用

4、視頻組件可以通過以下兩個方式添加視頻：HTML5視頻 和 上傳視頻

5、組件支持自定義尺寸寬高

6、可在背景視頻疊加組件

示例：

① 拖入一個【Div】組件進入背景視頻組件內（可以拖入【網格容器】、【2列】組件作為容器）

② 選中【Div】層級在Class的【位置】➡️【定位方式】➡️【Absolute】設置，然後將偏移設置為【0】，將疊加內容覆蓋整個背景視頻組件。再將【圖層堆疊順序】設置為10。（注意：【播放按鈕】層級默認為10，避免層級混亂，如果Div層級高於10，需要將【播放按鈕】層級調整成比Div大）

③ 選中【Div】層級在Class的【裝飾】中設置背景顏色和透明度，作為遮罩存在

④ 可在【Div】層級內任意添加組件（例如文本、標題、圖標等組件）。（注意：如果要添加大型組件，背景視頻只能是純視覺效果視頻）

⑤ 選中【Div】層級在Class的【常規】➡️【Flex 彈性排列】設置，然後可以在【彈性佈局】內調整Div內的組件對齊方式。

（注意：設置彈性佈局後，Div內的組件寬度會根據內容自動識別佔比，如果需要組件單獨排列一行，可以將尺寸的【寬度】設置為100%）

注意事項

1. 建議加上半透明遮罩，若背景影片畫面繁雜，前景文字容易閱讀困難。

2. 版權提醒：影片素材需擁有合法授權。

3. 在編輯器中不支持背景視頻播放，需要發佈後查看實際效果

4. 可訪問性：不要依賴背景影片傳遞核心資訊，影片僅作裝飾，重要內容放在前景文字。如有視頻傳達信息需求，請使用【視頻】和【第三方視頻】組件