> For the complete documentation index, see [llms.txt](https://bai-da-shuspersonal-organization.gitbook.io/2025wmg/llms.txt). Markdown versions of documentation pages are available by appending `.md` to page URLs; this page is available as [Markdown](https://bai-da-shuspersonal-organization.gitbook.io/2025wmg/di-si-zhang-chan-pin-she-ji-gui-ge/3.0-sai-hui-xiao-xi/3.2-sai-hui-ying-yin-lie-biao.md).

# 3.2-賽會影音列表

### Meta Data設定

<table><thead><tr><th width="171">項目</th><th width="438">內容</th><th>備註</th></tr></thead><tbody><tr><td>頁面簡述</td><td>列出世壯運賽事活動各類影音、直播、影像內容資訊</td><td></td></tr><tr><td>網址URL</td><td>/video</td><td></td></tr><tr><td>【頁籤名稱】 網址</td><td><ul><li>【宣傳影片】 /video/1</li><li>【賽事直播】 /video/2</li><li>【精彩回顧】 /video/3</li></ul></td><td></td></tr><tr><td>Page Title</td><td>賽會影音｜2025雙北世界壯年運動會</td><td></td></tr><tr><td>Page Description</td><td>探索2025年世界壯年運動會的賽事影音列表，隨時觀看最新的宣傳影片、賽事直播、賽事精華和精彩回顧影片。此頁面匯集豐富的視覺內容，讓您更深入了解賽事精彩瞬間，感受壯年運動的活力與熱情。</td><td></td></tr><tr><td>OG Image設定</td><td>使用全站用<a href="/2025wmg/fu-lu-qing-dan/quan-zhan-meta-data-she-ding-qing-dan.md#og-image">OG:Image</a></td><td></td></tr></tbody></table>

{% hint style="info" %}
完整清單，請點選前往[全站Meta Data設定清單](https://docs.google.com/spreadsheets/d/1mbYNsNVQGtUAlDKejE4DphAiQwHbe40KvPUrDCuWGIw/edit?gid=150750486#gid=150750486)
{% endhint %}

***

### 功能簡述

{% hint style="info" %}

* 賽會影音提供使用者不同種類的影音、影像資訊，並依照賽事階段新增頁籤內容
* 配合賽事階段，各頁籤內容新增狀態如下:

  <figure><img src="https://933433492-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FigGuRzvi7b8gTMDtYDBn%2Fuploads%2FLO3P9GIoYROP70dXPxWg%2FFrame%20627361.png?alt=media&amp;token=78f0d8f3-6f5e-4c5f-a506-dff7a7f87c0b" alt=""><figcaption><p>賽事影音列表 階段性狀態</p></figcaption></figure>

{% endhint %}

### 設計規格

{% tabs %}
{% tab title="【宣傳影片】頁籤" %}

* 放置賽事宣傳影片、賽後回顧紀錄片等官方影片資訊
* 5/16前，隱藏頁籤切換列，只顯示宣傳影片內容

<figure><img src="https://933433492-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FigGuRzvi7b8gTMDtYDBn%2Fuploads%2FJ6hJ0MdFCFhyLKv6hEa3%2FFrame%20627279.png?alt=media&amp;token=22e602af-0528-403a-b540-9ae12a73fee5" alt=""><figcaption></figcaption></figure>

1. **影片元件**

   <div align="left"><figure><img src="https://933433492-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FigGuRzvi7b8gTMDtYDBn%2Fuploads%2FXWdVDcRTy71Op0aq5oe1%2F%E5%88%97%E8%A1%A8%E9%A0%81.png?alt=media&amp;token=0b0f6d0d-9115-4fa7-a002-b5b35d0588ad" alt=""><figcaption></figcaption></figure></div>

   1. 影片元件組成：
      1. 影片播放框
      2. 影片標題文字：文字超過元件寬度自動往下斷行排列，超過二行，顯示『...』
      3. 發布日期：顯示年月日，如：2024.03.27
      4. 分類標籤：顯示影片的分類標籤
   2. 點擊影片元件後彈出播放視窗(如下示意)

      <figure><img src="https://933433492-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FigGuRzvi7b8gTMDtYDBn%2Fuploads%2FxROSHkzEA36MRpKkptFf%2FFrame%20627172.png?alt=media&amp;token=b4c94f70-e0d3-48d6-b80e-ecff64ee4518" alt=""><figcaption><p>彈出播放視窗</p></figcaption></figure>

      1. 彈出播放視窗後，自動播放Youtube影片
      2. 點選右上角「Ｘ」按鈕可關閉彈出視窗
   3. 當無上稿影片時，顯示[無影片空值狀態](/2025wmg/di-si-zhang-chan-pin-she-ji-gui-ge/3.0-sai-hui-xiao-xi/3.2-sai-hui-ying-yin-lie-biao/xuan-chuan-ying-pian-ye-qian-ying-pian-lie-biao-wu-ying-pian-kong-zhi-zhuang-tai.md)
   4. 影片元件列表排序，依據 『發佈日期』 ，由最新至最舊排序<br>
2. **置頂影片區塊**

   <figure><img src="https://933433492-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FigGuRzvi7b8gTMDtYDBn%2Fuploads%2Fj5KlPAlZTQ8LBqsuUJbl%2FFrame%20627239.png?alt=media&amp;token=de79ad6e-e113-4b67-b579-c5182649f81a" alt=""><figcaption></figcaption></figure>

   1. 當後台設定置頂影片時，將特定影片顯示於影片列表上方區塊(如圖示意)，而列表中不重複顯示該置頂影片
   2. 最多設定1支置頂影片
   3. 點擊影片框，使用框內方式播放 (下方影片列表，採點選後另開視窗方式播放影片)<br>
3. **分類篩選列**
   1. 針對所有影片資訊中『影片分類』欄位，進行篩選分類
   2. 當選擇特定影片分類下拉選單後，列出該影片分類的所屬影片列表
   3. 運動種類下拉選單：
      1. 項目內容：
         1. 全部
         2. 宣傳影片
         3. 籌備紀錄
         4. 圓夢者計畫
      2. 預設項目：全部<br>
4. **頁次切換列**
   1. 無設定置頂影片時：\
      每頁最多**8**則影片元件，超過8則可切換次頁
   2. 有設定置頂影片時：

      每頁最多9則影片元件，超過9則可切換次頁
   3. 相關規格，[參照頁次切換列規格](https://bai-da-shuspersonal-organization.gitbook.io/2025wmg/di-si-zhang-chan-pin-she-ji-gui-ge/quan-yu-xing-gong-neng/ye-ci-qie-huan-lie)
      {% endtab %}

{% tab title="【賽事直播】頁籤" %}

* 賽事期間(5/17～5/30) 每日提供不同運動種類的賽事直播影片訊號，同日最少2場，最多7場\
  詳細參照[賽事每日直播場次表](/2025wmg/fu-lu-qing-dan/sai-shi-mei-ri-zhi-bo-chang-ci-biao.md)

<figure><img src="https://933433492-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FigGuRzvi7b8gTMDtYDBn%2Fuploads%2FQVm5qkhCnKjOSzQisEmC%2FFrame%20627321.png?alt=media&amp;token=dbe1ad63-b6b6-4a42-a591-ebb086ce8f09" alt=""><figcaption></figcaption></figure>

1. **日期篩選列**

   <figure><img src="https://933433492-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FigGuRzvi7b8gTMDtYDBn%2Fuploads%2FyRViK94jHvcFVM4vYvNt%2FFrame%20627322.png?alt=media&amp;token=a65951c8-60f0-424f-8cdf-7be0a6ac3dfa" alt=""><figcaption></figcaption></figure>

   1. 選單帶入當日與當日之前的日期項目，\
      如：今日是5/20，則日期下拉選單可選項目是5/17、5/18、5/19、5/20
   2. 項目完整內容：5/17 \~ 5/30 (共14天)
   3. 選擇特定日期，連動下方「直播影片選列」＆「直播影片框」內容
   4. 每日直播場次內容，請參照[賽事每日直播場次表](/2025wmg/fu-lu-qing-dan/sai-shi-mei-ri-zhi-bo-chang-ci-biao.md)<br>
2. **直播影片選擇列**

   <figure><img src="https://933433492-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FigGuRzvi7b8gTMDtYDBn%2Fuploads%2FareLzyI0QV7nNfDMKCS9%2FFrame%20627325.png?alt=media&amp;token=e4fd8cbf-ed45-4d13-aee1-04a7b8387b91" alt=""><figcaption></figcaption></figure>

   1. 依照「日期篩選列」帶入當日轉播的運動種類項目，供使用者選擇切換觀看
   2. 同日最多7場，最少2場運動種類供選擇
   3. 選擇特定運動種類，連動左方直播影片框內切換至該運動種類的直播影片訊號<br>
3. **直播影片框**
   1. 依照日期篩選列＆直播影片選擇列中所選的日期＆運動種類，切換至特定直播影片訊號
   2. 直播影片會於影片框內自動播放，當特定運動無直播影片訊號內容時，則顯示[無直播影片訊號空值狀態](/2025wmg/di-si-zhang-chan-pin-she-ji-gui-ge/3.0-sai-hui-xiao-xi/3.2-sai-hui-ying-yin-lie-biao/sai-shi-zhi-bo-ye-qian-wu-zhi-bo-ying-pian-xun-hao-kong-zhi-zhuang-tai.md)<br>
4. **前往直播平台按鈕**

   <div align="left"><figure><img src="https://933433492-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FigGuRzvi7b8gTMDtYDBn%2Fuploads%2FrOSaz7T83wtn2a1MjGX1%2FPrimary.png?alt=media&amp;token=99756bce-16f7-4391-a999-4b038ca9c090" alt=""><figcaption></figcaption></figure></div>

   1. 點選後另開新頁，前往第三方直播平台<br>
5. **每日直播日程表**

   <figure><img src="https://933433492-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FigGuRzvi7b8gTMDtYDBn%2Fuploads%2FEiv5xgKMHf7lGtZc3ZkV%2FFrame%20627246.png?alt=media&amp;token=5d934159-0204-42fb-870b-c9a59e16b206" alt=""><figcaption></figcaption></figure>

   1. 以列表形式呈現5/17\~5/30 每日轉播的運動種類項目資訊
   2. 手機版因寬度，會固定凍結第一欄「日期」，運動種類可左右滑動瀏覽更多內容
      {% endtab %}

{% tab title="【精彩回顧】頁籤" %}

* 精彩影像提供選手，可以前往第三方平台購買自己競賽時的影像記錄
* 賽事精華提供賽事期間每日賽事3分鐘精華短片，每日2部，全部共14部

<figure><img src="https://933433492-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FigGuRzvi7b8gTMDtYDBn%2Fuploads%2FFaz1BVIXBipoTSmgysdE%2FFrame%20627171.png?alt=media&amp;token=3302e68e-97fd-44fc-b9d3-82e6499c8193" alt=""><figcaption></figcaption></figure>

1. **前往影像平台按鈕**
   1. 影像平台卡片提供選手購買賽事影像資訊
   2. 點選「前往影像平台」按鈕，另開新頁前往 第三方影像平台<br>
2. **日期選擇列**

   <figure><img src="https://933433492-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FigGuRzvi7b8gTMDtYDBn%2Fuploads%2FoahPyuVWZgG6hqMCVQeG%2F%E7%AF%A9%E9%81%B8%26%E6%90%9C%E5%B0%8B.png?alt=media&amp;token=e67b6e7b-ce0c-45c1-ac13-05dcb2a72dfa" alt=""><figcaption></figcaption></figure>

   1. 針對所有精華影片中日期欄位，進行篩選分類
   2. 當選擇特定日期下拉選單後，列出該日期的精華影片元件列表
   3. 日期下拉選單：
      1. 項目內容：
         1. 全部
         2. {帶入精華影片日期，如5/17}
   4. 篩選結果數：
      1. 列出符合篩選條件的影片總數，如: 共14則<br>
3. **影片元件**

   <div align="left"><figure><img src="https://933433492-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FigGuRzvi7b8gTMDtYDBn%2Fuploads%2FSKH4DyEudbFOuV0IxaIA%2F%E5%88%97%E8%A1%A8%E9%A0%81.png?alt=media&amp;token=14c65fcc-4a5c-4c94-a721-d385434514ff" alt=""><figcaption></figcaption></figure></div>

   1. 影片元件組成：
      1. 影片播放框
         1. 影片標題文字：文字超過元件寬度自動往下斷行排列，超過二行，顯示『...』
         2. 發布日期：顯示年月日，如：2024.03.27
   2. 點擊影片元件後彈出播放視窗(如下示意)

      <figure><img src="https://933433492-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FigGuRzvi7b8gTMDtYDBn%2Fuploads%2FxROSHkzEA36MRpKkptFf%2FFrame%20627172.png?alt=media&amp;token=b4c94f70-e0d3-48d6-b80e-ecff64ee4518" alt=""><figcaption><p>彈出播放視窗</p></figcaption></figure>

      1. 彈出播放視窗後，自動播放Youtube影片
      2. 點選右上角「Ｘ」按鈕可關閉彈出視窗
   3. 當無上稿影片時，顯示[無影片空值狀態](/2025wmg/di-si-zhang-chan-pin-she-ji-gui-ge/3.0-sai-hui-xiao-xi/3.2-sai-hui-ying-yin-lie-biao/jing-cai-hui-gu-ye-qian-wu-jing-cai-hui-gu-ying-pian-kong-zhi-zhuang-tai.md)<br>
4. **頁次切換列**
   1. 下方每頁最多**8**則影片元件，超過8則可切換次頁
   2. 相關規格，[參照頁次切換列規格](https://bai-da-shuspersonal-organization.gitbook.io/2025wmg/di-si-zhang-chan-pin-she-ji-gui-ge/quan-yu-xing-gong-neng/ye-ci-qie-huan-lie)
      {% endtab %}
      {% endtabs %}

### 連結設定

<table data-full-width="true"><thead><tr><th width="177">區塊</th><th>連結圖片示意</th><th width="121">開啟形式<select><option value="s30xPWWMdFV6" label="同頁開啟" color="blue"></option><option value="fBJ57gNPKSqQ" label="另開新頁" color="blue"></option></select></th><th>連結設定</th><th>備註</th></tr></thead><tbody><tr><td>賽事直播頁籤-直播影片框</td><td><img src="https://933433492-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FigGuRzvi7b8gTMDtYDBn%2Fuploads%2FpWguSSkopVn5a8oiEkt2%2FPrimary.png?alt=media&amp;token=35bfeb2f-b7c0-4f02-a1b6-b4e262094267" alt="" data-size="original"></td><td><span data-option="fBJ57gNPKSqQ">另開新頁</span></td><td>待客戶提供第三方直播平台</td><td></td></tr><tr><td>精彩回顧頁籤-精彩影像區塊</td><td><img src="https://933433492-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FigGuRzvi7b8gTMDtYDBn%2Fuploads%2FJyrEKssEQnCYP5jRNjYJ%2FCards.png?alt=media&amp;token=c960034b-b13c-4e2f-8dc6-ff814829d53f" alt="" data-size="original"></td><td><span data-option="fBJ57gNPKSqQ">另開新頁</span></td><td>待客戶提供第三方影像平台</td><td></td></tr></tbody></table>

{% hint style="info" %}
完整連結(含無障礙設定)，請參考[3.2-賽會影音列表連結設定](https://docs.google.com/spreadsheets/d/1mbYNsNVQGtUAlDKejE4DphAiQwHbe40KvPUrDCuWGIw/edit?gid=1363514464#gid=1363514464)
{% endhint %}

### UI設計檔

{% embed url="<https://www.figma.com/design/GO84awYAhcTLDEkhRZCfXm/2025%E4%B8%96%E7%95%8C%E5%A3%AF%E5%B9%B4%E9%81%8B%E5%8B%95%E6%9C%83%E5%AE%98%E7%B6%B2_%E5%AE%A2%E6%88%B6%E6%8F%90%E5%A0%B1%E4%BD%BF%E7%94%A8?node-id=7638-679724&t=62dZpnUGpA4NzNe1-1>" %}

***

### 修訂記錄

<table data-full-width="false"><thead><tr><th width="79" data-type="number">序號</th><th width="121">修訂時間</th><th width="300">主要修改內容</th><th width="179">修訂來源</th><th>備註</th></tr></thead><tbody><tr><td>1</td><td>2024.11.24</td><td><ul><li>【賽事影音】頁籤內容，新增影片分類篩選下拉選單</li></ul></td><td>客戶端</td><td></td></tr><tr><td>2</td><td>2024.12.02</td><td><ul><li>賽事影音-賽事直播頁籤，運動種類影音下拉選單形式，改為『種類按鈕』形式</li></ul></td><td><a href="https://www.figma.com/design/GO84awYAhcTLDEkhRZCfXm?node-id=7638-679724#1047141767">客戶Figma回覆</a></td><td></td></tr><tr><td>3</td><td>2024.12.11</td><td><ul><li><p>更新宣傳影片頁籤中影片分類項目：</p><ul><li>宣傳影片</li><li>籌備紀錄</li><li>圓夢者計畫</li></ul></li></ul></td><td><a href="https://www.figma.com/design/GO84awYAhcTLDEkhRZCfXm?node-id=7638-679724#1034671787">客戶Figma回覆</a></td><td></td></tr><tr><td>4</td><td>2024.12.11</td><td><ul><li>調整頁面名稱為『賽會影音』</li></ul></td><td>客戶Figma回覆</td><td></td></tr></tbody></table>