Video360 video

Last update: Mon Jul 22 2024 00:00:00 GMT+0000 (Coordinated Universal Time)

主題：

建立對象：

開發人員
使用者

HTML5 Video360 Viewer是一種360度影片播放程式，可播放從Dynamic Media Classic或Adobe Experience Manager、Dynamic Media傳送的H.264格式串流及漸進式360影片。

360度影片（也稱為沈浸式影片或球形影片）是同時錄製每個方向的檢視的影片，使用全方位相機或相機集合拍攝。同時支援單一視訊和自我調整視訊集。此檢視器也支援使用託管於外部位置的漸進式視訊和HLS資料流。

360度視訊的建議外觀比例為2:1。不支援空間音效。檢視器的設計僅能處理360度視訊；嘗試播放非360度視訊會導致視訊播放失真。

此檢視器的設計可在支援HTML5視訊的案頭和行動網頁瀏覽器上運作。檢視器支援選用的社交分享工具。

只要基礎系統支援，Video360 Viewer就會在其預設設定中使用HLS格式的HTML5串流視訊播放。在不支援HTML5串流的系統上，檢視器會回到HTML5漸進式視訊傳送。

檢視器型別為517。

示範URL section-c0ad383db6a444979dc7eeb1ec4cf54d

https://s7d9.scene7.com/s7viewers/html5/Video360Viewer.html?asset=Viewers/space_station_360-AVS

系統要求 section-b7270cc4290043399681dc504f043609

請參閱系統需求。

使用Video360檢視器 section-e6c68406ecdc4de781df182bbd8088b4

HTML5 Video360檢視器代表主要JavaScript檔案和一組協助程式檔案(單一JavaScript包含此檢視器使用的所有HTML5 Viewer SDK元件、資產、CSS)，這些檔案是檢視器在執行階段下載的。

HTML5 Video360 Viewer既可透過隨IS-Viewers提供的生產就緒HTML頁面以快顯視窗模式使用，也可透過內嵌模式使用，透過已記錄的API整合至目標網頁。

組態和外觀設定類似於本指南中描述的其他檢視器。所有外觀設定都是透過自訂(CSS)階層式樣式表來達成。

檢視所有檢視器通用的命令參考 — 組態屬性和所有檢視器通用的命令參考 — URL

360度影片內容需要的編碼設定比標準的非360度影片更高。換句話說，360內容必須比非360影片具有更高的解析度，才能達到相同的視覺品質。建議您針對360度影片考慮下列最適化影片預設集設定：

720p， 2500 kbps
1080p， 5000 kbps
1440p， 6600 kbps

但是請注意，提供使用這類高品質設定編碼的視訊需要一般使用者裝置上的高頻寬連線。

與Video360檢視器互動 section-642e66ca38cd4032992840ec6c0b0cd2

HTML5 Video360 Viewer提供一組標準使用者介面控制項供視訊播放使用，例如播放/暫停按鈕、視訊筆畫壓感視訊時間泡泡、播放時間/總時間指標、音量控制項及全熒幕按鈕。所有這些控制項都會分組到檢視器使用者介面底部的控制項列中。

在觸控裝置上，音量控制會隱藏在使用者介面中，因為只能使用裝置的硬體按鈕來控制音量。

當檢視器在快顯視窗模式下操作時，全熒幕按鈕在使用者介面中無法使用。

檢視器也支援各種社群媒體分享工具。它們可作為使用者介面中的單一按鈕使用，當使用者按一下或點選共用工具列時，該按鈕會展開至共用工具列。共用工具列包含每個支援共用管道型別的圖示，例如Facebook、Twitter、電子郵件共用、內嵌程式碼共用和連結共用。啟動電子郵件共用、內嵌共用或連結共用工具時，檢視器會顯示模型對話方塊，其中包含對應的資料輸入表單。呼叫Facebook或Twitter時，檢視器會將使用者從社群媒體服務重新導向至標準共用對話方塊。此外，當共用工具啟動時，視訊播放會自動暫停。因為Web瀏覽器安全限制，所以無法在全熒幕模式中使用共用工具。

檢視器支援以下專案的360度視訊播放：

VR耳機(例如Oculus Go和Oculus Rift)
VR HMD （頭戴式顯示器）掛載(如Google Cardboard)
非VR裝置（例如桌上型瀏覽器、平板電腦及未連線至VR HMD掛載的行動電話）

在VR頭戴式耳機上檢視360視訊內容無需額外設定。檢視器會自動偵測是否有VR頭戴式耳機，並在視訊內容上方顯示「VR」按鈕。啟用此「VR」按鈕會將視訊演算切換至VR模式。此檢視器僅在支援WebVR的瀏覽器中支援VR演算。

若要使用VR HMD掛載，必須在檢視器的設定中將Video360Player.vrrender修飾元設為1，以強制進行立體轉譯。

在VR頭戴式耳機和VR HMD掛載上，視點會因應頭戴式耳機的移動而改變，而不是在VR模式中提供其他播放控制。

在非VR裝置上觀看360度影片時，一般使用者可使用滑鼠、觸控或鍵盤來控制影片播放和檢視點。

該檢視器在具有觸控熒幕和滑鼠的Windows裝置上支援觸控輸入和滑鼠輸入，但是這項支援僅限Chrome、Internet Explorer 11和Edge網頁瀏覽器。

檢視器可使用完整的鍵盤。請參閱鍵盤協助工具與導覽。

內嵌Video360檢視器 section-6bb5d3c502544ad18a58eafe12a13435

不同的網頁對檢視者的行為有不同的需求。有時，網頁會提供連結，在選取時會在個別瀏覽器視窗中開啟檢視器。在其他情況下，需要直接將檢視器內嵌在託管頁面上。在後一種情況下，網頁可能會有靜態頁面佈局，或使用在不同裝置上或不同瀏覽器視窗大小下顯示不同的回應式設計。為了滿足這些需求，檢視器支援三種主要操作模式：快顯視窗、固定大小嵌入和回應式設計嵌入。

平板電腦和行動裝置支援在同一頁面上內嵌多個影片。通常一次只能播放一個視訊。當使用者開始播放一個影片，然後嘗試播放另一個影片時，會自動暫停第一個影片。自動暫停的視訊會記住其目前的播放時間，因此使用者可以隨時返回視訊並繼續播放。此規則唯一的例外是在Android™ 4.x裝置上的Chrome瀏覽器中，該瀏覽器可同時播放視訊。

關於快顯視窗模式

在快顯視窗模式中，檢視器會在個別的網頁瀏覽器視窗或標籤中開啟。它會取用整個瀏覽器視窗區域，並在瀏覽器調整大小或裝置方向變更時進行調整。

此模式在行動裝置中最常見。網頁會使用window.open() JavaScript呼叫、正確設定的AHTML元素或任何其他適當的方法載入檢視器。

建議您為快顯視窗操作模式使用現成的HTML頁面。它稱為Video360Viewer.html，且位於標準IS-Viewers部署的html5/子資料夾下：

<s7viewers_root>/html5/Video360Viewer.html

您可以套用自訂CSS以實現視覺化自訂。

以下是在新視窗中開啟檢視器的HTML程式碼範例：

<a href="https://s7d9.scene7.com/s7viewers/html5/Video360Viewer.html?asset=Viewers/space_station_360-AVS" target="_blank">Open popup viewer</a>

關於固定大小內嵌模式和回應式設計內嵌模式

在內嵌模式中，檢視器會新增至現有網頁，其中可能已有某些與檢視器無關的客戶內容。檢視器通常只會佔用網頁的一部分空間。

主要使用案例是針對桌上型電腦或平板電腦裝置的網頁，以及可依據裝置型別自動調整版面的回應式設計頁面。

當檢視器在初始載入後未變更其大小時，會使用固定大小內嵌。此方法適用於具有靜態配置的網頁。

回應式設計內嵌假設檢視器必須在執行階段調整大小，以回應其容器DIV的大小變更。最常見的使用案例是將檢視器新增到使用彈性頁面配置的網頁。

在回應式設計內嵌模式中，檢視器的行為會因網頁大小其容器DIV的方式而異。如果網頁僅設定容器DIV的寬度，而不限制其高度，檢視器會根據所使用資產的外觀比例，自動選擇其高度。此功能可確保資產完全符合檢視方式，且兩側不會有任何邊框間距。此使用案例最常用於使用回應式網頁設計配置架構(例如Bootstrap和Foundation)的網頁。

否則，如果網頁同時設定檢視器容器DIV的寬度和高度，則檢視器只會填滿該區域，並遵循網頁配置所提供的大小。一個好的範例是內嵌檢視器至強制回應覆蓋圖，其中覆蓋圖會根據網頁瀏覽器視窗大小而調整。

固定大小內嵌

您可以執行下列動作，將檢視器新增至網頁：

正在將viewer JavaScript檔案新增至您的網頁。
定義容器DIV。
設定檢視器大小。
正在建立和初始化檢視器。
正在將viewer JavaScript檔案新增至您的網頁。

建立檢視器需要您在HTML標題中新增指令碼標籤。在可以使用檢視器API之前，請確定您已包含Video360Viewer.js。 Video360Viewer.js檔案位於標準IS-Viewers部署的html5/js/子資料夾下：

<s7viewers_root>/etc/dam/viewers/s7viewers/html5/js/Video360Viewer.js

如果檢視器部署在任一Adobe Dynamic Media Classic伺服器上，且從相同網域提供服務，您就可以使用相對路徑。否則，請指定已安裝IS-Viewers之其中一個Adobe Dynamic Media Classic伺服器的完整路徑。

相對路徑如下所示：

<script language="javascript" type="text/javascript" src="/etc/dam/viewers/s7viewers/html5/js/InteractiveVideoViewer.js"></script>

NOTE

僅參考頁面上的主要檢視器JavaScript include檔案。請勿在網頁程式碼中參考任何其他JavaScript檔案（這些檔案可能由執行階段的檢視器邏輯下載）。特別是，請勿直接參考檢視器從/s7viewers內容路徑（所謂整合SDK include）載入的HTML5 SDK Utils.js資料庫。原因在於Utils.js或類似的執行階段檢視器程式庫的位置完全由檢視器的邏輯管理，且位置會在檢視器發行版本之間變更。 Adobe不會在伺服器上保留舊版的次要檢視器includes。

因此，日後部署新產品版本時，將檢視器使用的任何次要JavaScript include的直接參照放在頁面上，會中斷檢視器功能。

定義容器DIV。

新增空的DIV元素至您要檢視器出現的頁面。 DIV專案必須定義其ID，因為此ID稍後會傳遞至檢視器API。 DIV的大小是透過CSS指定。

預留位置DIV是定位元素，表示position CSS屬性設定為relative或absolute。

若要讓全熒幕功能在Internet Explorer中正常運作，請確定DOM中沒有其他元素的棧疊順序高於預留位置DIV。

以下是已定義的預留位置DIV元素的範例：

code language-html
`<div id="s7viewer" style="position:relative;width:640px;height:360px;"></div>`

設定檢視器大小

您可以透過以絕對單位宣告.s7video360viewer頂層CSS類別的檢視器，或使用stagesize修飾元來設定檢視器的靜態大小。

您可以將CSS的大小直接放在HTML頁面上，或放在自訂檢視器CSS檔案中(稍後會在Adobe Experience Manager Assets中指派給檢視器預設集記錄 — 隨選)，或使用style命令明確傳遞。

請參閱自訂Video360檢視器，以取得使用CSS設定檢視器樣式的詳細資訊。

以下是在「HTML」頁面中定義靜態檢視器大小的範例：

code language-html
`#s7viewer.s7video360viewer { width: 640px; height: 640px; }`

您可以在AEM Assets的檢視器預設集記錄中設定stagesize修飾元 — 隨選。或者，您可以使用params集合的檢視器初始化程式碼來明確傳遞它，或以API呼叫的形式傳遞，如Command Reference區段中所述，如下所示：

code language-html
`video360viewer.setParam("stagesize", "640,640");`

此範例建議您使用以CSS為基礎的方法。

正在建立和初始化檢視器。

完成上述步驟後，您會建立s7viewers.Video360Viewer類別的執行個體、將所有組態資訊傳遞至其建構函式，並在檢視器執行個體上呼叫init()方法。組態資訊會以JSON物件的形式傳遞至建構函式。此物件至少應有containerId欄位，其包含檢視器容器ID的名稱，以及含有檢視器支援之組態引數的巢狀params JSON物件。

在此情況下，params物件必須至少將影像伺服URL傳遞為serverUrl屬性，並將初始資產傳遞為asset引數。 JSON型初始化API可讓您使用一行程式碼、以videoserverurl屬性傳遞的視訊伺服器URL、以asset引數傳遞的初始資產，以及以interactivedata屬性傳遞的互動式資料，來建立及啟動檢視器。 JSON型初始化API可讓您使用一行程式碼來建立和啟動檢視器。

請務必將檢視器容器新增至DOM，讓檢視器程式碼可依其ID尋找容器元素。有些瀏覽器會延遲建立DOM，直到網頁結尾為止。為達到最大相容性，請在結尾的BODY標籤前面或內文onload()事件上呼叫init()方法。

同時，容器元素也不一定屬於網頁版面配置的一部分。例如，可以使用指派給它的display:none樣式來隱藏它。在此情況下，檢視器會延遲其初始化程式，直到網頁將容器元素帶回版面配置為止。發生此情況時，檢視器會自動繼續載入。

以下是建立檢視器執行個體、將最低必要組態選項傳遞至建構函式並呼叫init()方法的範例。此範例假設以下情況：

檢視器執行個體是video360Viewer。
預留位置DIV的名稱為s7viewer。
影像伺服URL為https://s7d9.scene7.com/is/image。
視訊伺服器URL是https://s7d9.scene7.com/is/content。
資產為Viewers/space_station_360-AVS。

code language-html

code language-html
`<script type="text/javascript"> var video360Viewer = new s7viewers.Video360Viewer({ "containerId":"s7viewer", "params":{ "asset":"Viewers/space_station_360-AVS", "serverurl":"https://s7d9.scene7.com/is/image/", "videoserverurl":"https://s7d9.scene7.com/is/content/" } }).init(); </script>`

<script type="text/javascript">
var video360Viewer = new s7viewers.Video360Viewer({
 "containerId":"s7viewer",
"params":{
 "asset":"Viewers/space_station_360-AVS",
 "serverurl":"https://s7d9.scene7.com/is/image/",
 "videoserverurl":"https://s7d9.scene7.com/is/content/"
}
}).init();
</script>

下列程式碼是嵌入固定大小Video360檢視器的簡單網頁的完整範例：

code language-html

code language-html
<!DOCTYPE html> <html> <head> <script type="text/javascript" src="https://s7d9.scene7.com/s7viewers/html5/js/Video360Viewer.js"></script> <style type="text/css"> #s7viewer.s7video360viewer { width: 640px; height: 480px; } </style> </head> <body> <div id="s7viewer" style="position:relative;width:640px;height:360px;"></div> <script type="text/javascript"> var video360Viewer = new s7viewers.Video360Viewer({ "containerId":"s7viewer", "params":{ "asset":"Viewers/space_station_360-AVS", "serverurl":"https://s7d9.scene7.com/is/image/", "videoserverurl":"https://s7d9.scene7.com/is/content/" } }).init(); </script> </body> </html>

<!DOCTYPE html>
<html>
<head>
<script type="text/javascript" src="https://s7d9.scene7.com/s7viewers/html5/js/Video360Viewer.js"></script>
<style type="text/css">
#s7viewer.s7video360viewer {
 width: 640px;
 height: 480px;
}
</style>
</head>
<body>
<div id="s7viewer" style="position:relative;width:640px;height:360px;"></div>
<script type="text/javascript">
var video360Viewer = new s7viewers.Video360Viewer({
 "containerId":"s7viewer",
"params":{
 "asset":"Viewers/space_station_360-AVS",
 "serverurl":"https://s7d9.scene7.com/is/image/",
 "videoserverurl":"https://s7d9.scene7.com/is/content/"
}
}).init();
</script>
</body>
</html>

高度不受限制的回應式設計內嵌

透過回應式設計內嵌，網頁通常會有某種彈性的配置，可指定檢視器容器DIV的執行階段大小。對於下列範例，假設網頁允許檢視器的容器DIV取得網頁瀏覽器視窗大小的40%，其高度不受限制。網頁HTML程式碼如下所示：

<!DOCTYPE html>
<html>
<head>
<style type="text/css">
.holder {
 width: 40%;
}
</style>
</head>
<body>
<div class="holder"></div>
</body>
</html>

將檢視器新增至這類頁面，類似於固定大小內嵌的步驟。唯一的區別是您不需要明確定義檢視器大小。

正在將viewer JavaScript檔案新增至您的網頁。
定義容器DIV。
正在建立和初始化檢視器。

上述所有步驟與內嵌固定大小相同。將容器DIV新增至現有的"holder" DIV。下列程式碼為完整的範例。請注意瀏覽器調整大小時檢視器大小的變化，以及檢視器外觀比例與資產的相符情形。

<!DOCTYPE html>
<html>
<head>
<script type="text/javascript" src="https://s7d9.scene7.com/s7viewers/html5/js/Video360Viewer.js"></script>
<style type="text/css">
.holder {
 width: 40%;
}
</style>
</head>
<body>
<div class="holder">
<div id="s7viewer" style="position:relative"></div>
</div>
<script type="text/javascript">
var video360Viewer = new s7viewers.Video360Viewer({
 "containerId":"s7viewer",
"params":{
 "asset":"Viewers/space_station_360-AVS",
 "serverurl":"https://s7d9.scene7.com/is/image/",
 "videoserverurl":"https://s7d9.scene7.com/is/content/"
}
}).init();
</script>
</body>
</html>

已定義寬度和高度的 回應式內嵌

如果有已定義寬度和高度的回應式內嵌，則網頁樣式會不同。它同時提供大小給"holder" DIV，並將它置中於瀏覽器視窗中。此外，網頁會將HTML和BODY專案的大小設定為100%。

<!DOCTYPE html>
<html>
<head>
<style type="text/css">
html, body {
 width: 100%;
 height: 100%;
}
.holder {
 position: absolute;
 left: 20%;
 top: 20%;
 width: 60%;
height: 60%;
}
</style>
</head>
<body>
<div class="holder"></div>
</body>
</html>

其餘的內嵌步驟與高度不受限制的回應式內嵌步驟相同。產生的範例如下：

<!DOCTYPE html>
<html>
<head>
<script type="text/javascript" src="https://s7d9.scene7.com/s7viewers/html5/js/Video360Viewer.js"></script>
<style type="text/css">
html, body {
 width: 100%;
 height: 100%;
}
.holder {
 position: absolute;
 left: 20%;
 top: 20%;
 width: 60%;
height: 60%;
}
</style>
</head>
<body>
<div class="holder">
<div id="s7viewer" style="position:relative"></div>
</div>
<script type="text/javascript">
var video360Viewer = new s7viewers.Video360Viewer({
 "containerId":"s7viewer",
"params":{
 "asset":"Viewers/space_station_360-AVS",
 "serverurl":"https://s7d9.scene7.com/is/image/",
 "videoserverurl":"https://s7d9.scene7.com/is/content/"
}
}).init();
</script>
</body>
</html>

使用Setter型API內嵌

除了使用JSON型初始化之外，也可以使用setter型API和no-args建構函式。使用此API建構函式不會接受任何引數，而設定引數是使用setContainerId()、setParam()和setAsset() API方法搭配個別的JavaScript呼叫所指定。

下列範例說明如何將固定大小內嵌與setter型API搭配使用：

<!DOCTYPE html>
<html>
<head>
<script type="text/javascript" src="https://s7d9.scene7.com/s7viewers/html5/js/Video360Viewer.js"></script>
<style type="text/css">
#s7viewer.s7video360viewer {
 width: 640px;
 height: 480px;
}
</style>
</head>
<body>
<div id="s7viewer" style="position:relative;width:640px;height:360px;"></div>
<script type="text/javascript">
var video360Viewer = new s7viewers.Video360Viewer();
video360Viewer.setContainerId("s7viewer");
video360Viewer.setParam("serverurl", "https://s7d9.scene7.com/is/image/");
video360Viewer.setParam("videoserverurl", "https://s7d9.scene7.com/is/content/");
video360Viewer.setAsset("Viewers/space_station_360-AVS");
video360Viewer.init();
</script>
</body>
</html>

recommendation-more-help

b7426f53-aad9-4c00-83fc-664f30f681e8