在頁內體驗中使用動態視頻覆蓋

在本主題中,您將了解如何在頁內體驗中使用動態視頻覆蓋。

有時您可能想要更改頁內體驗中的視頻。例如,體驗中的視頻可能需要根據用戶所做的選擇或根據導航到站點的其他部分進行更改。無需創建新的頁內體驗,每個體驗都有不同的視頻集,可以修改嵌入代碼以將適當的視頻分配給體驗。嵌入代碼的更改因所使用的嵌入代碼類型而異:

推薦嵌入代碼

典型的頁面內體驗嵌入代碼(推薦選項)如下所示:

<div data-experience="597a2aa114b2ed00103052af"></div>
<script src="https://players.brightcove.net/20318290001/experience_597a2aa114b2ed00103052af/live.js"></script>

要動態覆蓋與頁面內體驗關聯的視頻,可以更改嵌入代碼以向div標籤以指定要使用的視頻或播放列表。

指定個別視頻

要指定要使用的單個視頻,請添加data-video-ids參數到div標記,然後指定以逗號分隔的視頻 ID 列表。

<div data-experience="597a2aa114b2ed00103052af" 
     data-video-ids="12345,56789"></div>
<script src="https://players.brightcove.net/20318290001/experience_597a2aa114b2ed00103052af/live.js"></script>

指定播放列表

要指定要使用的播放列表,請添加data-playlist-id參數到div標籤,然後指定要使用的播放列表 ID。

<div data-experience="597a2aa114b2ed00103052af" 
     data-playlist-id="12345"></div>
<script src="https://players.brightcove.net/20318290001/experience_597a2aa114b2ed00103052af/live.js"></script>

無 JavaScript 嵌入代碼

典型的頁面內體驗嵌入代碼(無 JavaScript 選項)如下所示:

<iframe style="display:block;border:none;margin-left:auto;margin-right:auto;"
src="https://players.brightcove.net/20318290001/experience_597a2aa114b2ed00103052af/index.html"
allowfullscreen webkitallowfullscreen mozallowfullscreen></iframe>

要動態覆蓋與頁面內體驗關聯的視頻,可以更改嵌入代碼以向src屬性。

指定個別視頻

要指定要使用的單個視頻,請添加videoIds參數,然後指定以逗號分隔的視頻 ID 列表。

<iframe style="display:block;border:none;margin-left:auto;margin-right:auto;"
src="https://players.brightcove.net/20318290001/experience_597a2aa114b2ed00103052af/index.html?videoIds=12345,56789""
allowfullscreen webkitallowfullscreen mozallowfullscreen></iframe>

指定播放列表

要指定要使用的播放列表,請添加playlistId參數,然後指定要使用的播放列表 ID。

<iframe style="display:block;border:none;margin-left:auto;margin-right:auto;"
src="https://players.brightcove.net/20318290001/experience_597a2aa114b2ed00103052af/index.html?playlistId=12345"
allowfullscreen webkitallowfullscreen mozallowfullscreen></iframe>