使用頁面佈局

在本主題中,您將了解不同的頁面佈局、它們在您的應用程序中的顯示方式以及它們如何適應頁面創建過程。

不支持的佈局

本主題描述了 Beacon Studio 支持的所有佈局。請注意,Beacon Classic 有一些現在已棄用的額外佈局。這些佈局無法在 Beacon Studio 中查看或編輯。

如果您嘗試在 Beacon Studio 中打開現有佈局,並看到此消息:

不支持的佈局

無法在此工具中編輯您當前的佈局。聯繫支持人員進行更改。

你需要聯繫支持在更新佈局方面獲得幫助。

頁面創建過程

創建頁面時,首先要求您輸入頁面標題、頁麵類型,然後要求選擇頁面佈局:

  1. 在裡面佈局模塊,點擊創建頁面 .
    點擊創建頁面
  2. 選擇一個主菜單或者中學頁麵類型。
    點擊輔助
  3. 通過給頁面命名並選擇所需的佈局來創建頁面,然後單擊創造 .

本文檔將重點介紹頁面佈局、它們的功能和外觀。有關整個頁面創建過程的信息,請參閱創建和管理頁面文檔。

格式化播放列表

在頁面上放置播放列表時,您可以靈活選擇。如果單擊播放列表名稱旁邊的三個省略號(三個點)

三點編輯

您調出播放列表設置對話框。此處提供了幾個播放列表操作選項。

當你點擊更多佈局選項您會看到播放列表佈局對話框,其中提供了更多播放列表操作選項。

播放列表佈局選項

並非每個頁面佈局上的每個播放列表都提供所有選項。將在適合每個頁面佈局的地方列出限制。

有關管理和配置播放列表的完整詳細信息,請參閱管理頁面上的播放列表文檔。

播放列表網格

請注意以下有關播放列表網格頁面佈局:

  • 播放列表網格在網格中顯示一個或多個播放列表,這意味著播放列表中所有視頻的縮略圖將顯示在頁面上。如果選擇了多個播放列表,播放列表名稱將作為選項卡顯示在應用程序頁面的頂部,如下所示:
    網格頁面
  • 請注意,如果只顯示一個播放列表,則不會出現任何播放列表名稱。在這種情況下,您需要確保頁面名稱反映了播放列表的內容。
  • 頁面佈局是響應式的。以下屏幕截圖顯示了之前顯示的同一頁面,但瀏覽器寬度更窄。請注意,縮略圖只有四個跨度,而在更寬的瀏覽器中,它們是五個跨度。
    更窄的網格
  • 如果添加到頁面的播放列表數量使播放列表名稱選項卡比可用空間寬,則會在選項卡列表的右側添加一個箭頭以提供一種查看所有選項卡的方法,如下所示:
    選項卡箭頭
    到達終點後,箭頭會出現在左側。

英雄(自動播放頻道)

請注意以下有關英雄(自動播放頻道)頁面佈局:

  • 將頻道設置為全屏、自動播放視頻。播放以下視頻以查看行為。
  • 其他播放列表顯示為輪播。
  • 帶頻道的播放列表的有效視頻內容是:
    • Brightcove Beacon 頻道
    • 在 Studio 中創建的 Cloud Playout 頻道
  • 該頁面是響應式的。正在播放的視頻縮小了,輪播的縮略圖縮小了,顯示的也更少了。
  • 自動播放頻道不允許更改佈局。
  • 有一個回退功能,如果您不知道它可能會造成混淆。如果由於某種原因無法播放特色自動播放播放列表,則正常播放列表中的第一個播放列表將“提升”到自動播放位置。下圖進一步闡明了該功能:
    英雄自動播放回退

請注意以下有關英雄(精選播放列表)頁面佈局:

  • 精選播放列表顯示在頁面頂部,其在輪播中的縮略圖比頁面上其他播放列表的縮略圖更大,如下所示:
    英雄播放列表寬
  • 如上面的屏幕截圖所示,添加到頁面的其他播放列表顯示在輪播中精選播放列表的下方,使用較小的縮略圖。
  • 頁面佈局是響應式的。以下屏幕截圖顯示了之前顯示的同一頁面,但瀏覽器寬度更窄。請注意,精選播放列表的縮略圖只有兩個,而在更寬的瀏覽器中,它們是三個。
    英雄播放列表縮小
  • 在特色播放列表中,您無法選擇以縱向顯示縮略圖。

英雄(圖片)

請注意以下有關英雄(圖片)頁面佈局:

  • 主圖大部分可見,添加的播放列表覆蓋在應用頁面底部附近的圖像上,如下所示:
    英雄形象
  • 其他播放列表顯示為輪播。
  • 該頁面是響應式的。主圖縮小,輪播縮略圖縮小,顯示更少。

旋轉木馬

請注意以下有關旋轉木馬頁面佈局:

  • 為頁面上放置的每個播放列表添加一個新的輪播,如下所示:
    旋轉木馬
  • 人字形雪佛龍出現在旋轉木馬的兩端,用於導航到播放列表中的所有視頻。
  • 該頁面是響應式的。這是頁面的較窄視圖,其中一個播放列表使用縱向縮略圖顯示:
    帶肖像的旋轉木馬

重定向鏈接頁麵類型允許您在主菜單中輸入鏈接,單擊該鏈接會將查看者發送到網頁 URL。這適用於 Web、iOS 和 Android 應用程序。您可以選擇在同一選項卡或新選項卡中打開頁面。以下視頻顯示了以下內容:

  • iOS 相同標籤重定向
  • iOS 新標籤重定向
  • Web 新標籤頁重定向
 

您可以設置重定向鏈接目標鏈接網址對於所有支持的語言,除了標準可用性環境。

重定向鏈接配置