逐步：建立和發佈頁面內體驗

這個快速入門的目的是向您展示如何使用 Brightcove 畫廊建立頁面內體驗。

完成此「快速入門」後，您應該能夠：

  • 使用「圖庫」建立全新體驗
  • 將視訊新增至頁面內體驗
  • 自訂頁面內體驗並設計風格
  • 預覽和發佈頁面內體驗

觀眾

任何想要建立可嵌入網頁的頁面內體驗的 Video Cloud 發行者。

先決條件

  • 可存取「圖庫」模組的視訊雲端帳戶
  • 視訊雲端的工作知識
  • 本快速入門中使用的示例視頻可用於下載如果需要的話
  • 有助於查看使用圖庫建立頁內體驗訓練

使用快速入門資產

如果您想要使用此快速入門提供的範例視訊，請執行下列步驟。

  1. 下載樣本文件。
  2. 使用上載模塊到上載影片到您的視頻雲帳戶。
  3. 使用媒體模塊到創建動物播放列表並將視頻添加到播放列表。
  4. 使用玩家們模塊到創建一個新的Brightcove Player叫畫廊播放器。

使用資源庫建立頁面內體驗

若要使用布萊特灣畫廊建立頁內體驗，您將完成以下工作：

選取帳戶

視您的視訊雲端訂閱而定，您可能可以存取多個視訊雲端帳戶。開始使用之前，請確認您使用的是正確的帳戶。

  1. 登錄到 視頻雲工作室。
  2. 目前的 Video Cloud 帳戶名稱會出現在頁面的右上角。如果您有多個帳戶，請按一下帳戶選擇器下拉式清單，然後選取您想要在其中建立頁面內體驗的帳戶。請注意，這也應該是您想要使用的視頻的帳戶。
  3. 在主導航中，單擊 圖庫。

建立全新的頁面內體驗

若要建立新的頁面內體驗，請依照下列步驟執行。

  1. 如果您尚未建立任何體驗，則不會顯示任何專案頁面。請點擊創造旁邊的頁內。

    如果您已有體驗，請單擊 新體驗 ，然後單擊頁面頂部的 頁內選項 卡。

  2. 將顯示頁面內體驗範本清單。找到垂直播放列表模板，然後單擊選擇。
  3. 輸入一個 經驗標題和經驗描述。為了佈局尺寸， 選擇反應靈敏。
  4. 按一下「建立體驗」。

配置編輯器將會開啟。體驗標題會出現在頁面的頂端。標題可以更改為體驗細節。

自訂體驗

您可以將物件加入到體驗中以自訂外觀。頁面內體驗有不同的狀態，每個狀態都可以自訂。下列狀態可供自訂：

  • 播放之前 -在任何視頻播放開始之前首次渲染時的體驗如何顯示
  • 播放-播放影片時體驗的顯示方式
  • 播放後 -影片播放後體驗的顯示方式

若要編輯不同的狀態，請按一下狀態，然後依需要將元件加入至體驗。有關更多信息，請參見自定義頁內體驗。

若要將物件新增至頁面內體驗，請依照下列步驟執行。

  1. 單擊左側導航中的 佈局 。
  2. 點擊玩前州。加號圖標（）指示可以在其中添加組件的體驗。按一下體驗頂端的加號圖示。組件選擇器將打開。
  3. 點擊圖片零件。點擊瀏覽鏈接並選擇要用作體驗標題的圖像。請注意，快速入門範例檔案包含可以使用的影像。
  4. 按一下「儲存」。圖像將出現在體驗上。
  5. 單擊圖像組件上方的加號圖標，然後添加一個文本體驗的組成部分。輸入一些文本，然後單擊保存。
  6. 確認圖片和文字顯示在體驗上。

若要編輯任何元件性質，或刪除元件，請將游標懸停在該元件上，然後按一下編輯或刪除圖示。

新增視訊至體驗

視選取的範本而定，體驗可能一次顯示一或多個視訊。您可以手動將影片新增至體驗中、選擇播放清單或提供參考 ID。有關將視頻添加到頁內體驗的更多信息，請參見將視頻添加到頁內體驗。

若要將視訊新增至頁面內體驗，請依照下列步驟執行。

  1. 按一下左側導覽中的 [ 影片 ]。
  2. 按一下「新增視訊」。
  3. 選擇一個方法的選擇視頻手動選擇要添加的視頻要么， 選擇一個方法的選擇播放列表並瀏覽並選擇動物您使用示例視頻創建的播放列表。
  4. 請點擊選擇。將會顯示影片清單。

在視訊中新增互動性

連結和卡片互動可以新增至視訊。播放視訊時會顯示互動。有關將交互性添加到體驗中的更多信息，請參見將互動添加到頁內體驗。

若要設定視訊的互動性，請依照下列步驟執行。

  1. 按一下左側導覽中的 [ 影片 ]。
  2. 選擇要添加交互性的視頻，然後單擊鏈接圖標（） 在裡面動作柱。
  3. 加連結文字和一個連結網址。預覽播放器將顯示連結的預覽。
  4. 點擊配置鏈接。
  5. 點擊切換到 ％鏈接。設置開始時間成為視頻中的50％
  6. 為了持續時間，檢查直到視頻結束。
  7. 點擊設計鏈接。將連結設定為出現在播放器右下方。
  8. 按一下「儲存」。將會顯示為視訊設定的所有互動清單。
  9. 點擊X在對話框標題中關閉交互編輯器。

具有互動性的視頻將在互動性列指示已配置的交互類型。

自訂樣式

樣式會控制體驗中使用的字型和色彩。有關自定義樣式的更多信息，請參見自定義頁內體驗的樣式。

若要設定樣式，請依照下列步驟執行。

  1. 單擊左側導航中的 樣式 。
  2. 找到全球風格。點擊文字顏色圈出並將文字顏色更改為紅色。先前加入體驗的文字元件應變更為紅色。
  3. 按一下 [ X ] 以關閉檢色器。
  4. 找到視頻標題風格。點擊文字顏色圈出並將文字顏色更改為藍色。按一下 [ X ] 以關閉檢色器。
  5. 將左側導航滾動到頂部，然後單擊返回佈局鏈接。

設定體驗設定

體驗設定可控制各個方面的體驗，例如玩家使用、社交設定和其他設定。有關自定義設置的更多信息，請參見配置頁內體驗的設置。

若要設定體驗設定，請依照下列步驟執行。

  1. 點擊設置 > 播放器在左側導航中。
  2. 使用可用球員下拉列表以選擇畫廊播放器您之前創建的。這是將在頁面體驗中使用的玩家。
  3. 檢查自動前進到下一個視頻選項。
  4. 按一下「儲存」。
  5. 點擊設置 > 社交在左側導航中。
  6. 選取社交分享選項的顯示方式。
  7. 選擇可以分享的社交媒體網站視頻。某些網站也允許張貼自訂訊息。
  8. 按一下「儲存」。

檢閱體驗詳細資料

體驗詳細資料是設定體驗標題和大小的位置。有關自定義體驗詳細信息的更多信息，請參見配置頁內體驗的詳細信息。

若要設定體驗詳細資料，請依照下列步驟執行。

  1. 單擊左側導航中的 概覽 。
  2. 如有需要，請編輯體驗標題和說明。
  3. 確認佈局尺寸被設置為反應靈敏。當佈局大小設置為響應，它將調整大小以適應頁面上的容器。
  4. 如果進行了任何更改，請單擊保存。

預覽和發佈頁面內體驗

預覽頁面內體驗可讓您查看體驗的顯示方式，而不必在圖庫介面中檢視。發佈網頁內體驗會產生顯示網頁內部體驗所需的內嵌程式碼。有關預覽和發布頁內體驗的更多信息，請參見預覽和發布頁內體驗。

  1. 若要預覽頁面內體驗，請編輯體驗，然後按一下「預覽」。
  2. 桌面預覽會在新的瀏覽器索引標籤中開啟。
  3. 左上角的下拉式清單可用於預覽不同裝置類型的體驗，也可以在不同的體驗狀態下預覽體驗。下方會顯示行動裝置預覽。
  4. 若要發佈頁面內體驗，請按一下「發佈與嵌入」。
  5. 請點擊發布要么發布變更。
  6. 發布過程將開始，完成後，發布狀態將更改為這種經驗是最新的。 請注意，更新體驗可能需要幾分鐘的時間。

發布頁內體驗後，共享網址可以與他人共享，以便他們可以預覽體驗。「內嵌程式碼」可用來在現有的網頁中嵌入「頁內體驗」。