Video360 video

HTML5 Video360 뷰어는 Dynamic Media Classic 또는 Dynamic Media Adobe Experience Manager에서 제공되는 H.264 형식으로 인코딩된 스트리밍 및 점진적 360 비디오를 재생하는 360도 비디오 플레이어입니다.

몰입형 영상 또는 구면 영상이라고도 하는 360도 영상은 전방위 카메라 또는 카메라 컬렉션을 사용하여 촬영하면서 모든 방향의 보기를 동시에 기록하는 영상 녹화물이다. 단일 비디오와 응용 비디오 세트가 모두 지원됩니다. 뷰어는 또한 외부 위치에서 호스팅되는 점진적 비디오 및 HLS 스트림 작업을 지원합니다.

360 비디오의 권장 종횡비는 2:1입니다. 공간 사운드는 지원되지 않습니다. 뷰어는 360 비디오로만 작동하도록 디자인되었습니다. 360이 아닌 비디오를 재생하면 왜곡된 비디오가 재생됩니다.

이 뷰어는 HTML 5 비디오를 지원하는 데스크탑 및 모바일 웹 브라우저에서 모두 작동하도록 설계되었습니다. 뷰어는 선택적 소셜 공유 도구를 지원합니다.

Video360 뷰어는 기본 시스템이 이를 지원할 때마다 기본 구성에서 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 Viewer 사용 section-e6c68406ecdc4de781df182bbd8088b4

HTML5 비디오360 뷰어는 런타임에 뷰어가 다운로드한 기본 JavaScript 파일 및 도우미 파일 세트(단일 JavaScript에 이 뷰어에서 사용하는 모든 HTML5 Viewer SDK 구성 요소, 에셋, CSS가 포함됨)를 나타냅니다.

HTML5 Video360 Viewer는 IS-Viewer와 함께 제공되는 프로덕션 준비 HTML 페이지를 사용하는 팝업 모드와 문서화된 API를 사용하여 대상 웹 페이지에 통합되는 내장 모드 모두에서 사용할 수 있습니다.

구성 및 스키닝은 이 안내서에서 설명한 다른 뷰어의 구성과 유사합니다. 모든 스키닝은 사용자 지정(CSS) 계단식 스타일 시트를 통해 수행됩니다.

모든 뷰어에 공통되는 명령 참조 - 구성 특성 및 모든 뷰어에 공통되는 명령 참조 - URL을 참조하십시오.

360 비디오 컨텐츠는 표준 비 360 비디오보다 높은 인코딩 설정이 필요합니다. 즉, 360 콘텐츠는 동일한 인지 가능한 품질을 달성하기 위해 비 360 비디오보다 높은 해상도로 들어와야 합니다. 360 비디오에 대한 다음 응용 비디오 사전 설정 설정을 고려하는 것이 좋습니다.

그러나 이러한 고품질 설정으로 인코딩된 비디오를 서비스하려면 최종 사용자의 장치에서 고대역폭 연결이 필요합니다.

Video360 뷰어와 상호 작용 section-642e66ca38cd4032992840ec6c0b0cd2

HTML5 Video360 뷰어는 재생/일시 중지 단추, 비디오 스크러버 비디오 시간 버블, 재생 시간/총 시간 표시기, 볼륨 컨트롤 및 전체 화면 단추와 같은 비디오 재생을 위한 표준 사용자 인터페이스 컨트롤 세트를 제공합니다. 이러한 모든 컨트롤은 뷰어 사용자 인터페이스 하단에 있는 컨트롤 막대로 그룹화됩니다.

터치 장치에서는 장치의 하드웨어 버튼을 사용하여 볼륨을 제어할 수만 있으므로 볼륨 컨트롤이 사용자 인터페이스에 표시되지 않습니다.

뷰어가 팝업 모드로 동작하는 경우, 전체 화면 버튼이 사용자 인터페이스에서 이용 가능하지 않다.

뷰어는 다양한 소셜 미디어 공유 도구도 지원합니다. 이 버튼은 사용자가 클릭하거나 탭하면 공유 도구 모음으로 확장되는 사용자 인터페이스에서 단일 버튼으로 사용할 수 있습니다. 공유 도구 모음에는 Facebook, Twitter, 이메일 공유, 포함 코드 공유 및 링크 공유와 같이 지원되는 각 공유 채널 유형에 대한 아이콘이 있습니다. 이메일 공유, 포함 공유 또는 링크 공유 도구가 활성화되면 뷰어에 해당 데이터 입력 양식이 있는 모달 대화 상자가 표시됩니다. facebook 또는 Twitter이 호출되면 뷰어는 사용자를 소셜 미디어 서비스에서 표준 공유 대화 상자로 리디렉션합니다. 또한 공유 도구가 활성화되면 비디오 재생이 자동으로 일시 중지됩니다. 웹 브라우저 보안 제한으로 인해 공유 도구를 전체 화면 모드에서 사용할 수 없습니다.

뷰어는 다음에서 360 비디오 재생을 지원합니다.

VR 헤드셋에서 360 비디오 콘텐츠를 보기 위해 추가 구성이 필요하지 않습니다. 뷰어는 자동으로 VR 헤드셋의 존재를 감지해 동영상 콘텐츠 위에 'VR' 버튼을 보여준다. 이 "VR" 버튼을 활성화하면 비디오 렌더링이 VR 모드로 전환됩니다. 뷰어는 WebVR이 지원되는 브라우저에서만 VR 렌더링을 지원합니다.

VR HMD를 사용하려면 뷰어 구성에서 Video360Player.vrrender 수정자를 1(으)로 설정해야 합니다. 이 수정자는 스테레오스코픽 렌더링이 필요합니다.

VR 헤드셋 및 VR HMD 마운트에서, VR 모드에서 다른 재생 제어가 제공되지 않고 헤드셋 움직임에 응답하여 시점 변경이 발생한다.

비 VR 지원 장치에서 360 비디오를 시청할 때 최종 사용자는 마우스, 터치 또는 키보드를 사용하여 비디오 재생 및 POV를 제어할 수 있습니다.

뷰어는 터치 스크린 및 마우스로 Windows 장치에서 터치 입력 및 마우스 입력을 모두 지원하지만 Chrome, Internet Explorer 11 및 Edge 웹 브라우저로만 지원됩니다.

뷰어는 키보드에 완전히 액세스할 수 있습니다. 키보드 접근성 및 탐색을 참조하세요.

Video360 뷰어 포함 section-6bb5d3c502544ad18a58eafe12a13435

웹 페이지마다 뷰어 동작에 대한 요구 사항이 다릅니다. 경우에 따라 웹 페이지에서 링크를 제공하여 선택하면 뷰어가 별도의 브라우저 창에서 열립니다. 다른 경우에는 뷰어를 호스팅 페이지에 직접 임베드해야 합니다. 후자의 경우, 웹 페이지는 정적 페이지 레이아웃을 갖거나, 다른 디바이스에서 또는 다른 브라우저 창 크기에 대해 다르게 표시되는 반응형 디자인을 사용할 수 있습니다. 이러한 요구를 수용하기 위해 뷰어는 팝업, 고정 크기 포함, 반응형 디자인 포함 등 세 가지 기본 작업 모드를 지원합니다.

태블릿과 모바일 장치에서 동일한 페이지에 여러 비디오를 포함할 수 있습니다. 일반적으로 한 번에 하나의 비디오만 재생할 수 있습니다. 사용자가 한 비디오를 재생하기 시작한 다음 다른 비디오를 재생하려고 하면 첫 번째 비디오가 자동으로 일시 중지됩니다. 자동 일시 중지된 비디오는 현재 재생 시간을 기억하므로 사용자는 언제든지 비디오로 돌아가 재생을 재개할 수 있습니다. 이 규칙은 Android™ 4.x 장치의 Chrome 브라우저에서 유일하게 제외되며, 동시에 비디오를 재생할 수 있습니다.

팝업 모드 정보

팝업 모드에서는 뷰어가 별도의 웹 브라우저 창 또는 탭에서 열립니다. 브라우저 크기가 조정되거나 디바이스 방향이 변경되는 경우 전체 브라우저 창 영역을 가져와서 조정합니다.

이 모드는 모바일 장치에서 가장 일반적입니다. 웹 페이지는 window.open() JavaScript 호출, 올바르게 구성된 A HTML 요소 또는 기타 적절한 메서드를 사용하여 뷰어를 로드합니다.

팝업 작업 모드에는 기본 제공 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에 대한 너비와 높이를 모두 설정하는 경우 뷰어는 해당 영역만 채우고 웹 페이지 레이아웃에서 제공하는 크기를 따릅니다. 좋은 예는 뷰어를 모달 오버레이에 포함하고, 여기서 오버레이의 크기는 웹 브라우저 창 크기에 따라 지정됩니다.

고정 크기 포함

다음을 수행하여 웹 페이지에 뷰어를 추가합니다.

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

뷰어가 Adobe Dynamic Media Classic 서버 중 하나에 배포되고 동일한 도메인에서 제공되는 경우 상대 경로를 사용할 수 있습니다. 그렇지 않으면 IS-Viewer가 설치된 Adobe Dynamic Media Classic 서버 중 하나에 대한 전체 경로를 지정합니다.

상대 경로는 다음과 같습니다.

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

무제한 높이의 응답형 디자인 포함

응답형 디자인 임베딩을 사용하면 일반적으로 웹 페이지에는 뷰어의 컨테이너 DIV의 런타임 크기를 지정하는 일종의 유연한 레이아웃이 있습니다. 다음 예제에서는 웹 페이지에서 뷰어의 컨테이너 DIV이(가) 웹 브라우저 창 크기의 40%를 차지하도록 허용하고 높이는 제한되지 않는다고 가정합니다. 웹 페이지 HTML 코드는 다음과 같습니다.

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

이러한 페이지에 뷰어를 추가하는 것은 고정 크기 임베딩 단계와 유사합니다. 유일한 차이점은 뷰어 크기를 명시적으로 정의할 필요가 없다는 것입니다.

위의 모든 단계는 고정 크기 포함과 동일합니다. 기존 "holder" DIV에 컨테이너 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 생성자를 사용하면 매개 변수를 사용하지 않으며, 별도의 JavaScript 호출과 함께 setContainerId(), setParam() 및 setAsset() API 메서드를 사용하여 구성 매개 변수를 지정합니다.

다음 예제에서는 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>