Video over slim uitsnijden smart-crop-video

In de Smart Crop Video Viewer worden streaming en progressieve video die in de H.264-indeling is gecodeerd, afgespeeld met ondersteuning voor slimme uitsnijdingen. Het wordt geleverd van Dynamic Media Classic of Experience Manager met Dynamic Media.

Zie vereisten en eerste vereisten van het Systeem.

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. Het is ontworpen voor zowel desktopbrowsers als mobiele webbrowsers die HTML5-video ondersteunen. Deze viewer ondersteunt ook optionele, gesloten bijschriften die boven op video-inhoud, navigatie in videohoofdstukken en gereedschappen voor het delen van sociale media worden weergegeven.

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

Viewer type 518.

Demo-URL section-e1c3106f5b3e445d9b95be337c2f94e2

https://s7d9.scene7.com/s7viewers/html5/SmartCropVideoViewer.html?asset=html5automation/frisbee-AVS

De Smart Crop Video Viewer gebruiken section-f21ac23d3f6449ad9765588d69584772

De Smart Crop Video Viewer vertegenwoordigt een JavaScript-hoofdbestand en een set hulpbestanden (één JavaScript-pakket) met alle SDK-componenten van de Viewer die door deze specifieke viewer worden gebruikt, elementen en CSS-gedownload door de viewer in runtime.

U kunt de Smart Crop Video Viewer in de pop-upmodus gebruiken met HTML-pagina die klaar is voor productie en die bij IS-Viewers wordt geleverd. U kunt de viewer ook gebruiken in de ingesloten modus, waar deze met de gedocumenteerde API is geïntegreerd in een doelwebpagina.

Het configureren en toewijzen van een skin aan de viewer is vergelijkbaar met die van andere viewers. Alle skins worden gemaakt door middel van aangepaste CSS.

Zie verwijzing van het Bevel gemeenschappelijk aan alle kijkers - de attributen van de Configuratieen verwijzing van het Bevel gemeenschappelijk aan alle Kijkers - URL

Interactie met de SmartCrop Video-viewer section-ab66eb6955aa4a8aa6d14a3b3acfed3f

De Smart Crop Video Viewer biedt een set standaardbesturingselementen voor de gebruikersinterface voor het afspelen van video, zoals:

Al deze controles worden gegroepeerd in een controlebar bij de bodem van het gebruikersinterface van de kijker.

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

Wanneer de viewer werkt in de pop-upmodus, is de knop Volledig scherm niet beschikbaar in de gebruikersinterface.

U kunt snel door de inhoud van een video navigeren wanneer het videohoofdstuk wordt geactiveerd. De videohoofdstukken worden getoond als tellers in het videoscrubberspoor en tonen de hoofdstuktitel en bijbehorende beschrijving op een muisomvergooien of met één enkele aanraking op aanrakingssystemen. Gebruikers kunnen naar een bepaald hoofdstuk zoeken door een hoofdstukmarkering te selecteren of de ballon met de hoofdstukbeschrijving te selecteren.

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

Deze viewer is volledig toegankelijk via het toetsenbord.

Zie toegankelijkheid van het Toetsenbord en navigatie.

Gereedschappen voor het delen van sociale media met SmartCrop Video Viewer section-907d316fe1da4b87abb9775f02464704

De SmartCrop Video-viewer ondersteunt 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. Ook wanneer het afspelen van video automatisch wordt gepauzeerd met een gereedschap voor delen.

Delen van gereedschappen is niet beschikbaar in de modus Volledig scherm vanwege beveiligingsbeperkingen van de webbrowser.

Smart Crop Video 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 SmartCropVideoViewer.html genoemd en bevindt zich in de submap html5/ van uw standaard IS-Viewers-implementatie:

<s7viewers_root>/html5/SmartCropVideoViewer.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="http://s7d1.scene7.com/s7viewers/html5/SmartCropVideoViewer.html?asset=html5automation/frisbee-AVS" target="_blank">Open popup viewer</a>

Ongeveer vaste grootte inbeddend wijze en ontvankelijke 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 normaal gesproken slechts een deel van het onroerend goed van de webpagina in beslag.

De belangrijkste gebruiksgevallen zijn webpagina's die zijn georiënteerd op desktops of tabletapparaten, en ook responsieve ontwerppagina'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. Dit is de beste keuze voor webpagina's met een statische pagina-indeling.

Bij het insluiten van responsieve ontwerpen wordt ervan uitgegaan dat de viewer tijdens runtime het formaat moet wijzigen als reactie op de wijziging van de grootte van de container DIV . De meest gebruikte optie is het toevoegen van de 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 methode zorgt ervoor dat het element perfect in de weergave past zonder opvulling aan de zijkanten. Dit gebruiksgeval komt het meest voor bij webpagina's die gebruikmaken van een responsief ontwerplay-outframework, zoals Bootstrap of Foundation.

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 wordt aangegeven door de indeling van de webpagina. Een goed voorbeeld is het insluiten van de viewer in een modale overlay, waarbij de grootte van de overlay wordt aangepast aan de grootte van het venster van de webbrowser.

Vaste grootte het inbedden

U voegt de viewer als volgt toe aan een webpagina:

<s7viewers_root>/html5/js/SmartCropVideoViewer.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.

Relatief pad ziet er als volgt uit:

<script language="javascript" type="text/javascript" src="/s7viewers/html5/js/SmartCropVideoViewer.js"></script>

Responsief ontwerp inbeddend met onbeperkte hoogte

Met het responsieve ontwerpinsluiten heeft de webpagina normaal gesproken een of andere flexibele indeling die de runtimegrootte van de container van de viewer DIV bepaalt. In dit voorbeeld wordt ervan uitgegaan dat de webpagina de viewercontainer DIV in staat stelt 40% van de venstergrootte van de webbrowser in beslag te 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 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 container DIV toe aan de bestaande aanduiding "" DIV . De volgende code is een volledig voorbeeld. U kunt zien hoe de grootte van de viewer verandert wanneer de browser wordt aangepast en hoe de hoogte-breedteverhouding van de viewer overeenkomt met het element.

<!DOCTYPE html>
<html>
<head>
<script type="text/javascript" src="http://s7d1.scene7.com/s7viewers/html5/js/SmartCropVideoViewer.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 smartCropVideoViewer = new s7viewers.SmartCropVideoViewer({
 "containerId":"s7viewer",
"params":{
 "asset":"html5automation/frisbee-AVS",
 "serverurl":"http://s7d1.scene7.com/is/image/",
 "videoserverurl":"http://s7d1.scene7.com/is/content/"
}
}).init();
</script>
</body>
</html>

De volgende voorbeeldpagina illustreert het levensechte gebruik van responsieve ontwerpinsluiting met onbeperkte hoogte:

Levende demo's

afwisselende manifestplaats

Responsief ontwerp beddend met bepaalde breedte en hoogte

Als er een responsief ontwerpinsluiting is waarbij breedte en hoogte zijn gedefinieerd, is de opmaak van de webpagina anders. De aanduiding voor de webpagina heeft beide formaten en centreert deze in het browservenster. DIV Bovendien stelt de webpagina de grootte van het element HTML en BODY in op 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>

De overige insluitstappen zijn identiek aan het reageren op ontwerpinsluiting met onbeperkte hoogte. Het resulterende voorbeeld is het volgende:

<!DOCTYPE html>
<html>
<head>
<script type="text/javascript" src="http://s7d1.scene7.com/s7viewers/html5/js/SmartCropVideoViewer.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 smartCropVideoViewer = new s7viewers.SmartCropVideoViewer({
 "containerId":"s7viewer",
"params":{
 "asset":"html5automation/frisbee-AVS",
 "serverurl":"http://s7d1.scene7.com/is/image/",
 "videoserverurl":"http://s7d1.scene7.com/is/content/"
}
}).init();
</script>
</body>
</html>

het Inbedden gebruikend op zetter-Gebaseerde API

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

In het volgende voorbeeld wordt het insluiten van een vaste grootte met een setter-API geïllustreerd:

<!DOCTYPE html>
<html>
<head>
<script type="text/javascript" src="http://s7d1.scene7.com/s7viewers/html5/js/SmartCropVideoViewer.js"></script>
<style type="text/css">
#s7viewer.s7videoviewer {
 width: 640px;
 height: 480px;
}
</style>
</head>
<body>
<div id="s7viewer" style="position:relative;width:640px;height:360px;"></div>
<script type="text/javascript">
var smartCropVideoViewer = new s7viewers.SmartCropVideoViewer();
smartCropVideoViewer.setContainerId("s7viewer");
smartCropVideoViewer.setParam("serverurl", "http://s7d1.scene7.com/is/image/");
smartCropVideoViewer.setParam("videoserverurl", "http://s7d1.scene7.com/is/content/");
smartCropVideoViewer.setAsset("html5automation/frisbee-AVS");
smartCropVideoViewer.init();
</script>
</body>
</html>