Video360 video

De HTML5 Video360 Viewer is een videospeler van 360 graden die streaming en progressieve 360 video die in het formaat H.264 wordt gecodeerd speelt, die van Dynamic Media Classic of van Adobe Experience Manager, Dynamic Media wordt geleverd.

Video's van 360 graden, ook wel overweldigende video's of sferische video's genoemd, zijn video-opnamen waarbij een weergave in elke richting tegelijkertijd wordt opgenomen en opgenomen met een omnidirectionele camera of een verzameling camera's. Zowel enkelvoudige video als Adaptieve videosets worden ondersteund. De viewer ondersteunt ook het werken met progressieve video- en HLS-streams die op externe locaties worden gehost.

De geadviseerde aspectverhouding voor 360 video is 2 :1. Ruimtelijk geluid wordt niet ondersteund. De viewer is alleen ontworpen voor gebruik met 360 video; een poging om een niet-360 video af te spelen, resulteert in vervormde videoweergave.

De viewer is ontworpen voor gebruik in zowel desktopbrowsers als mobiele webbrowsers die HTML5-video ondersteunen. De viewer ondersteunt optionele gereedschappen voor sociale media.

De Video360 Viewer gebruikt in de standaardconfiguratie HTML5-streaming video afspelen in HLS-indeling wanneer het onderliggende systeem dat ondersteunt. Op systemen die geen ondersteuning bieden voor HTML5-streaming, valt de viewer terug naar HTML5 voor progressieve video.

Het viewertype is 517.

Demo-URL's section-c0ad383db6a444979dc7eeb1ec4cf54d

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

Systeemvereisten section-b7270cc4290043399681dc504f043609

Zie ​ vereisten van het Systeem ​.

Video360 Viewer gebruiken section-e6c68406ecdc4de781df182bbd8088b4

HTML5 Video360 Viewer staat voor een JavaScript-hoofdbestand en een set helperbestanden (één JavaScript-bestand met alle HTML5 Viewer SDK-componenten die door deze viewer worden gebruikt, elementen, CSS) die door de viewer in runtime zijn gedownload.

HTML5 Video360 Viewer kan zowel in de pop-upmodus worden gebruikt met een HTML-pagina die klaar is voor productie en die bij IS-Viewers wordt geleverd, als in de ingesloten modus, waarbij de viewer met behulp van gedocumenteerde API in de doelwebpagina wordt geïntegreerd.

Configuratie en skins zijn vergelijkbaar met die van de andere viewers die in deze handleiding worden beschreven. Alle skins toewijzen wordt bereikt door middel van aangepaste CSS (Cascading Style Sheets).

Zie ​ verwijzing van het Bevel gemeenschappelijk aan alle kijkers - de attributen van de Configuratie ​ en ​ verwijzing van het Bevel gemeenschappelijk aan alle Kijkers - URL ​

Voor 360 video-inhoud zijn hogere coderingsinstellingen vereist dan voor de standaard niet-360 video. Met andere woorden, 360-inhoud moet een hogere resolutie krijgen dan niet-360-video om dezelfde waarneembare kwaliteit te bereiken. U wordt aangeraden de volgende instellingen voor adaptieve videovoorinstellingen voor 360 video in overweging te nemen:

Merk echter op dat het dienen van video die met dergelijke hoge kwaliteitsinstellingen wordt gecodeerd een hoge bandbreedteverbinding op het apparaat van een eindgebruiker vereist.

Interactie met Video360 Viewer section-642e66ca38cd4032992840ec6c0b0cd2

HTML5 Video360 Viewer biedt een set standaardbesturingselementen voor de gebruikersinterface voor het afspelen van video, zoals de knop Afspelen/pauzeren, de videotijdbubbel met scrubber, de indicator voor de afspeeltijd/totale tijd, de volumeregeling en de knop Volledig scherm. Al deze besturingselementen worden gegroepeerd in de besturingsbalk onder aan de gebruikersinterface van de viewer.

Op aanraakapparaten is de volumeregeling verborgen in de gebruikersinterface, omdat het alleen mogelijk is het volume te regelen met de hardwareknoppen van het apparaat.

Wanneer de viewer werkt in de pop-upmodus, is er geen knop voor een volledig scherm beschikbaar in de gebruikersinterface.

De viewer ondersteunt ook diverse gereedschappen voor het delen van sociale media. Ze zijn beschikbaar als één knop in de gebruikersinterface die wordt uitgevouwen tot een werkbalk voor delen wanneer de gebruiker erop klikt of tikt. De werkbalk voor delen bevat een pictogram voor elk type kanaal dat wordt ondersteund, zoals Facebook, Twitter, Delen via e-mail, Delen via code insluiten en delen van koppelingen. Wanneer gereedschappen voor delen via e-mail, insluiten of delen van koppelingen zijn geactiveerd, wordt in de viewer een modaal dialoogvenster weergegeven met een bijbehorend formulier voor gegevensinvoer. Wanneer Facebook of Twitter wordt aangeroepen, stuurt de viewer de gebruiker terug naar een standaarddialoogvenster voor delen via een sociale-mediaservice. Wanneer een gereedschap voor delen wordt geactiveerd, wordt het afspelen van video ook automatisch gepauzeerd. Delen van gereedschappen is niet beschikbaar in de modus Volledig scherm vanwege beveiligingsbeperkingen van de webbrowser.

De viewer ondersteunt het afspelen van 360 video op de volgende manieren:

Geen extra configuratie is noodzakelijk om 360 video inhoud op hoofdtelefoon te bekijken VR. De viewer detecteert automatisch de aanwezigheid van een VR-hoofdtelefoon en toont de knop VR boven op video-inhoud. Als u deze knop VR activeert, wordt het renderen van video overgeschakeld naar de VR-modus. De viewer ondersteunt alleen VR-rendering in browsers met WebVR-ondersteuning.

Als u VR HMD-bevestigingen wilt gebruiken, moet de optie Video360Player.vrrender zijn ingesteld op 1 in de configuratie van de viewer. Hierdoor wordt stereoscopische rendering afgedwongen.

Op VR-koptelefoons en VR HMD-montagesystemen vindt verandering in het gezichtspunt plaats als reactie op de beweging van de hoofdtelefoon, niet op een ander afspeelapparaat in de VR-modus.

Wanneer de eindgebruiker 360 video op niet-VR toegelaten apparaten bekijkt, kan muis, aanraking, of toetsenbord gebruiken om videoplayback en gezichtspunt te controleren.

De viewer ondersteunt zowel aanraakinvoer als muisinvoer op Windows-apparaten met aanraakscherm en muis. Deze ondersteuning is echter beperkt tot webbrowsers van Chrome, Internet Explorer 11 en Edge.

De viewer is volledig toegankelijk via het toetsenbord. Zie ​ toegankelijkheid van het Toetsenbord en navigatie ​.

Video360-viewer insluiten section-6bb5d3c502544ad18a58eafe12a13435

Verschillende webpagina's hebben verschillende vereisten voor viewergedrag. Soms bevat een webpagina een koppeling die de viewer in een apart browservenster opent wanneer u deze optie selecteert. In andere gevallen moet u de viewer rechtstreeks insluiten op de hostpagina. In het laatste geval heeft de webpagina mogelijk een statische paginalay-out of wordt een responsief ontwerp gebruikt dat op verschillende apparaten of voor verschillende venstergrootten van de browser anders wordt weergegeven. Om aan deze behoeften tegemoet te komen, ondersteunt de viewer drie primaire bewerkingsmodi: popup, insluiten van vaste grootte en insluiten van responsieve ontwerpen.

Het insluiten van meerdere video's op dezelfde pagina wordt ondersteund op tablets en mobiele apparaten. Gewoonlijk kan slechts één video tegelijk worden afgespeeld. Wanneer een gebruiker een video begint af te spelen en vervolgens een andere video probeert af te spelen, wordt de eerste video automatisch gepauzeerd. De video die automatisch is gepauzeerd onthoudt de huidige afspeeltijd, zodat de gebruiker er altijd weer naar kan terugkeren en het afspelen kan hervatten. De enige uitzondering op deze regel is Chrome browser op Android™ 4.x apparaten, die video's parallel kunnen afspelen.

Ongeveer pop-up wijze

In de pop-upmodus wordt de viewer geopend in een apart venster of tabblad van een webbrowser. Het neemt het volledige browservenstergebied en past zich aan voor het geval de browser wordt aangepast of de oriëntatie van het apparaat wordt gewijzigd.

Deze modus wordt het meest gebruikt voor mobiele apparaten. De webpagina laadt de viewer met window.open() JavaScript-aanroep, correct geconfigureerd A HTML-element of een andere geschikte methode.

Het wordt aanbevolen een HTML-pagina uit de doos te gebruiken voor de pop-upbewerkingsmodus. Deze wordt Video360Viewer.html genoemd en bevindt zich in de submap html5/ van uw standaard IS-Viewers-implementatie:

<s7viewers_root>/html5/Video360Viewer.html

U kunt visuele aanpassing bereiken door aangepaste CSS toe te passen.

Hieronder ziet u een voorbeeld van HTML-code waarmee de viewer in een nieuw venster wordt geopend:

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

Ongeveer vaste grootte inbeddende wijze en ontvankelijke ontwerp het inbedden wijze

In de ingesloten modus wordt de viewer toegevoegd aan de bestaande webpagina, waar al inhoud van de klant beschikbaar is die geen betrekking heeft op de viewer. De viewer neemt doorgaans slechts een deel van het onroerend goed van een webpagina in beslag.

De belangrijkste gebruiksgevallen zijn webpagina's die zijn georiënteerd op desktops of tablets, en responsieve, ontworpen pagina's die de lay-out automatisch aanpassen, afhankelijk van het apparaattype.

De insluiting met een vaste grootte wordt gebruikt wanneer de viewer de grootte niet wijzigt na de eerste keer laden. Deze methode is de beste keuze voor webpagina's met een statische indeling.

Bij het insluiten van responsieve ontwerpen wordt ervan uitgegaan dat de viewer bij uitvoering de grootte moet wijzigen als reactie op de wijziging van de grootte van de container DIV . De meest gebruikte optie is het toevoegen van een viewer aan een webpagina die een flexibele pagina-indeling gebruikt.

In de responsieve ontwerpinsluitingsmodus werkt de viewer anders, afhankelijk van de manier waarop de container van de webpagina wordt verkleind DIV . Als op de webpagina alleen de breedte van de container DIV wordt ingesteld en de hoogte onbeperkt blijft, kiest de viewer automatisch de hoogte op basis van de hoogte-breedteverhouding van het element dat wordt gebruikt. Deze functionaliteit zorgt ervoor dat het element perfect in de weergave past zonder opvulling aan de zijkanten. Dit is het meest gangbare geval voor webpagina's die responsieve webontwerplay-outframeworks zoals Bootstrap en Foundation gebruiken.

Als de webpagina zowel de breedte als de hoogte voor de container van de viewer instelt DIV , vult de viewer alleen dat gebied en volgt deze het formaat dat de webpaginalay-out biedt. Een goed voorbeeld is het insluiten van de viewer in een modale overlay, waarbij de grootte van de overlay wordt aangepast aan de venstergrootte van de webbrowser.

Vaste grootte het inbedden

U voegt de viewer als volgt toe aan een webpagina:

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

U kunt een relatief pad gebruiken als de viewer wordt geïmplementeerd op een van de Adobe Dynamic Media Classic-servers en vanuit hetzelfde domein wordt aangeboden. Anders geeft u een volledig pad op naar een van de Adobe Dynamic Media Classic-servers waarop IS-Viewers zijn geïnstalleerd.

Het relatieve pad ziet er als volgt uit:

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

Responsief ontwerp inbeddend met onbeperkte hoogte

Bij responsieve ontwerpinsluiting heeft de webpagina normaal gesproken een flexibele indeling die de runtimegrootte van de container van de viewer DIV bepaalt. In het volgende voorbeeld wordt ervan uitgegaan dat de webpagina de container DIV van de viewer 40% van de venstergrootte van de webbrowser laat nemen, waarbij de hoogte onbeperkt blijft. De HTML-code van de webpagina ziet er als volgt uit:

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

Het toevoegen van de viewer aan een dergelijke pagina is vergelijkbaar met de stappen voor het insluiten van een vaste grootte. Het enige verschil is dat u de viewergrootte niet expliciet hoeft te definiëren.

Alle bovenstaande stappen zijn gelijk aan die bij het insluiten van de vaste grootte. Voeg de container DIV toe aan de bestaande "holder" DIV.

De volgende code is een volledig voorbeeld. U ziet hoe de grootte van de viewer verandert wanneer de grootte van de browser wordt gewijzigd en hoe de hoogte-breedteverhouding van de viewer overeenkomt met het element.

<!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>

Responsive Embedding met Gedefinieerde Breedte en Hoogte

Als er responsieve insluiting is waarbij breedte en hoogte zijn gedefinieerd, is de opmaak van de webpagina anders. Het biedt beide grootten voor de "holder" DIV en centreert deze in het browservenster. Bovendien stelt de webpagina de grootte van het element HTML en BODY in op 100 procent.

<!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>

De overige insluitingsstappen zijn identiek aan de stappen die worden gebruikt voor het insluiten van responsieve lagen met onbeperkte hoogte.

Het resulterende voorbeeld is het volgende:

<!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>

Inbeddend het Gebruiken van op zetter-Gebaseerde API

In plaats van JSON-gebaseerde initialisatie, is het mogelijk om op setter-gebaseerde API en no-args aannemer te gebruiken. Wanneer u deze API-constructor gebruikt, worden er geen parameters gebruikt en worden configuratieparameters opgegeven met de API-methoden setContainerId() , setParam() en setAsset() met afzonderlijke JavaScript-aanroepen.

In het volgende voorbeeld wordt het gebruik van insluiting met een vaste grootte met de op een setter gebaseerde API geïllustreerd:

<!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>