Dynamic Media-elementen toevoegen aan pagina's

Als u de Dynamic Media-functionaliteit wilt toevoegen aan elementen die u op uw websites gebruikt, kunt u de opdracht Dynamic Media, Interactieve media, Panoramische media, of Video 360-media rechtstreeks op de pagina. U voegt componenten toe door de modus Lay-out in te voeren en de Dynamic Media-componenten in te schakelen. Vervolgens kunt u deze componenten aan de pagina toevoegen en assets aan de component toevoegen. De componenten voor dynamische media zijn slim: ze weten of u een afbeelding of een video toevoegt en de beschikbare configuratieopties veranderen dienovereenkomstig.

U voegt Dynamic Media-elementen rechtstreeks aan de pagina toe als u Adobe Experience Manager als uw WCM gebruikt. Als u een derde voor uw WCM gebruikt, of link of insluiten uw elementen. Voor een responsieve website van derden raadpleegt u het leveren van geoptimaliseerde afbeeldingen op een responsieve site.

OPMERKING

Zorg ervoor dat u elementen publiceert voordat u deze in Experience Manager aan pagina's toevoegt. Zie Dynamic Media-elementen publiceren.

Een Dynamic Media-component aan een pagina toevoegen

Het toevoegen van een 3D-mediacomponent, Dynamic Media, Interactieve media, Panoramische media, SmartCrop-video of Video 360-mediacomponent aan een pagina is hetzelfde als het toevoegen van een component aan een pagina. De Dynamic Media-componenten worden in de volgende secties beschreven.

Een Dynamic Media-component aan een pagina toevoegen:

  1. Open in Experience Manager de pagina waaraan u de Dynamic Media-component wilt toevoegen.

  2. Selecteer in het deelvenster aan de linkerkant van de pagina (indien nodig de weergave van het zijpaneel) de optie Components pictogram.

  3. Onder de Components in de vervolgkeuzelijst selecteert u Dynamic Media.

    Als er geen lijst met Dynamic Media-componenten beschikbaar is, moet u de Dynamic Media-componenten inschakelen die u wilt gebruiken. Zie Dynamic Media-componenten inschakelen.

    6_5_360video_wcmcomponent

  4. Sleep een Dynamic Media die u wilt gebruiken en op de gewenste locatie op de pagina neerzetten.

  5. Houd de muisaanwijzer rechtstreeks boven de component. Wanneer de component door een blauw vakje wordt omringd, selecteer eens om de toolbar van de component te tonen. Selecteer Configuration (wrench) pictogram.

    6_5_360video_wcmcomponentconfigure

  6. Afhankelijk van de Dynamic Media-component die u op de pagina hebt neergezet, wordt een configuratiedialoogvenster geopend. Opties van component instellen indien nodig.

    In het onderstaande voorbeeld ziet u de Dynamic Media Video 360 Media en de opties die beschikbaar zijn in de vervolgkeuzelijst Voorinstelling viewer.

    Video 360-mediacomponent

    De Dynamic Media Video 360 Media-component.

  7. Als u klaar bent, selecteert u in de rechterbovenhoek van het dialoogvenster het vinkje waarop u de wijzigingen wilt opslaan.

Dynamic Media-componenten inschakelen

Als er geen Dynamic Media-componenten beschikbaar zijn om aan een pagina toe te voegen, betekent dit waarschijnlijk dat u eerst de componenten moet inschakelen die u wilt gebruiken.

Dynamic Media-componenten inschakelen:

  1. Open in Experience Manager de pagina waaraan u de Dynamic Media-component wilt toevoegen.

  2. Selecteer links op de werkbalk naast de pagina het pictogram Pagina-informatie en selecteer vervolgens Edit Template in de vervolgkeuzelijst.

    edit-template

  3. Selecteer in de vervolgkeuzelijst rechts van de werkbalk boven aan de pagina de optie Structure.

    Beleid

  4. Selecteer onder aan de pagina de optie Layout Container om zijn toolbar te openen, dan selecteer het pictogram van het Beleid.

  5. Op de Layout Container pagina, onder de Properties , zorgt u ervoor dat de Allowed Components is geselecteerd.

    Toegestane componenten

  6. Schuiven totdat u ziet Dynamic Media.

  7. Selecteer het pictogram > links van Dynamic Media zodat u de lijst kunt uitvouwen, selecteert u vervolgens de Dynamic Media-componenten die u wilt inschakelen.

    Lijst met Dynamic Media-componenten

  8. In de rechterbovenhoek van het dialoogvenster Layout Container selecteert u het pictogram Gereed (vinkje).

  9. Selecteer in de vervolgkeuzelijst rechts van de werkbalk boven aan de pagina de optie Initial Content vervolgens een Dynamic Media-component aan een pagina toevoegen zoals gebruikelijk.

Dynamic Media-componenten lokaliseren

U kunt Dynamic Media-componenten op twee manieren lokaliseren:

  • Open Properties en selecteer het tabblad Advanced op een webpagina in Sites. Selecteer de gewenste taal voor lokalisatie.

    chlimage_1-172

  • Selecteer de gewenste pagina of paginagroep in de sitekiezer. Selecteren Properties en selecteert u de Advanced tab. Selecteer de gewenste taal voor lokalisatie.

    OPMERKING

    Niet alle talen die beschikbaar zijn in de Language momenteel zijn tokens toegewezen.

Dynamic Media-componenten

Dynamic Media-componenten zijn beschikbaar wanneer u Components pictogram, vervolgens filteren op Dynamic Media.

De volgende Dynamic Media-componenten zijn beschikbaar:

  • Dynamic Media - Wordt gebruikt voor assets zoals afbeeldingen, video, e-catalogi en spinsets.
  • Interactive Media - Wordt gebruikt voor interactieve elementen zoals interactieve video, interactieve afbeeldingen of carrouselsets.
  • Panoramic Media - Gebruik voor panoramische afbeeldingen of panoramische VR-afbeeldingselementen.
  • Video 360 Media - Wordt gebruikt voor 360 video- en 360 VR-video-elementen.
OPMERKING

Deze componenten zijn niet standaard beschikbaar; ze moeten beschikbaar worden gesteld in de sjablooneditor voordat u ze kunt gebruiken. Nadat ze ter beschikking zijn gesteldIn de malplaatjeredacteur, kunt u de componenten aan uw pagina toevoegen zoals u een andere component van de Experience Manager.

6_5_dynamicmediawcmcomponents

Dynamic Media-component

De Dynamic Media-component is slim. U hebt verschillende opties, of u nu een afbeelding of video toevoegt. De component ondersteunt voorinstellingen voor afbeeldingen, op afbeeldingen gebaseerde viewers, zoals afbeeldingssets, centrifuges, gemengde mediasets en video. Bovendien reageert de viewer snel. De grootte van het scherm verandert automatisch op basis van de schermgrootte. Alle viewers zijn HTML5-viewers.

OPMERKING

Als uw webpagina het volgende heeft:

  • Meerdere instanties van de Dynamic Media-component die op dezelfde pagina worden gebruikt.
  • Elke instantie gebruikt hetzelfde elementtype.

Het toewijzen van een andere viewervoorinstelling aan elke Dynamic Media-component op die pagina wordt niet ondersteund.

U kunt echter dezelfde viewervoorinstelling gebruiken voor alle Dynamic Media-componenten die op de pagina elementen van hetzelfde type gebruiken.

Wanneer u de Dynamic Media-component toevoegt, en Dynamic Media Settings is leeg of u kunt een element niet correct toevoegen, controleer het volgende:

  • U hebt Dynamic Media ingeschakeld. Dynamic Media is standaard uitgeschakeld.
  • De afbeelding heeft een piramideTIFF-bestand. Afbeeldingen die u importeert voordat u Dynamic Media inschakelt, beschikken niet over een TIFF-bestand met piramide.

Wanneer u met afbeeldingen werkt

Met de Dynamic Media-component kunt u dynamische afbeeldingen toevoegen, zoals afbeeldingssets, centrifuges en gemengde mediasets. U kunt inzoomen, uitzoomen en, indien van toepassing, een afbeelding binnen een centrifugeset draaien of een afbeelding van een ander type set selecteren.

U kunt de viewervoorinstelling, afbeeldingsvoorinstelling of afbeeldingsindeling ook rechtstreeks in de component configureren. Als u een afbeelding responsief wilt maken, kunt u de onderbrekingspunten instellen of een responsieve voorinstelling voor de afbeelding toepassen.

Bewerk de volgende Dynamic Media-instellingen door de Edit in de component en vervolgens Dynamic Media Settings.

dm-settings-image-preset

OPMERKING

Standaard is de afbeeldingscomponent voor dynamische media adaptief. Als u een vaste grootte wilt instellen, stelt u dit in de component op het tabblad Advanced met Width en Height in.

  • Viewer preset - Selecteer een bestaande viewervoorinstelling in het keuzemenu. Als de viewervoorinstelling die u zoekt niet zichtbaar is, moet u deze zichtbaar maken. Zie Viewervoorinstellingen beheren. U kunt geen viewervoorinstelling selecteren als u een voorinstelling voor afbeeldingen gebruikt en omgekeerd.

    Dit is de enige optie die beschikbaar is als u afbeeldingssets, centrifuges of gemengde mediasets bekijkt. De weergegeven viewervoorinstellingen zijn slim. Alleen relevante viewervoorinstellingen worden weergegeven.

  • Viewer modifiers - Viewer-modifiers hebben de vorm van name=value pair met een &-scheidingsteken en laten u viewers wijzigen zoals beschreven in de Viewer Reference Guide. Een voorbeeld van een viewer-modifier is posterimage=img.jpg&caption=text.vtt,1 Hiermee stelt u een andere afbeelding in voor de videominiatuur en koppelt u een ondertitelingsbestand/ondertitelingsbestand aan de video.

  • Image preset - Selecteer een bestaande voorinstelling voor de afbeelding in het keuzemenu. Als de voorinstelling die u zoekt niet zichtbaar is, moet u deze zichtbaar maken. Zie Voorinstellingen afbeelding beheren. U kunt geen viewervoorinstelling selecteren als u een voorinstelling voor afbeeldingen gebruikt en omgekeerd.

    Deze optie is niet beschikbaar als u afbeeldingssets, centrifuges of gemengde mediasets bekijkt.

  • Image Modifiers - U kunt afbeeldingseffecten toepassen door extra opdrachten voor afbeeldingen te geven. Deze effecten worden beschreven in Voorinstellingen afbeelding en de verwijzing Opdracht Beeldserver.

    Deze optie is niet beschikbaar als u afbeeldingssets, centrifuges of gemengde mediasets bekijkt.

  • Breakpoints - Als u dit middel op een ontvankelijke plaats gebruikt, moet u de beeldbreekpunten toevoegen. Afbeeldingsonderbrekingspunten worden gescheiden door komma's (,). Deze optie werkt wanneer er geen hoogte of breedte is gedefinieerd in een voorinstelling voor afbeeldingen.

    Deze optie is niet beschikbaar als u afbeeldingssets, centrifuges of gemengde mediasets bekijkt.

    U kunt de volgende geavanceerde instellingen bewerken door Edit in de component.

  • Optimize for higher resolution devices - Schakel het selectievakje (standaard) in om DPR (Device Pixel Ratio)-optimalisatie toe te staan.

    De Optimize for higher resolution devices Deze optie wordt alleen weergegeven als de volgende waarde true is:

    • Onder Type voorinstelling, Image Preset is geselecteerd, en RESS_IP is geselecteerd uit het Image Preset vervolgkeuzelijst.

    instelling voor pixelverhouding van apparaat voor voorinstelling afbeelding

    Zie ook Optimalisatie van apparaatpixelverhoudingen. Alle Adobe Experience Manager Dynamic Media Smart Imaging DPR-waarden worden genegeerd.

  • Title - Wijzig de titel van de afbeelding.

  • Alt Text - Voeg een titel aan de afbeelding toe voor gebruikers die afbeeldingen hebben uitgeschakeld.

    Deze optie is niet beschikbaar als u afbeeldingssets, centrifuges of gemengde mediasets bekijkt.

  • URL, Open in - U kunt een element zo instellen dat een koppeling wordt geopend. Stel de URL in en kies Openen in om aan te geven of deze in hetzelfde venster of in een nieuw venster moet worden geopend.

    Deze optie is niet beschikbaar als u afbeeldingssets, centrifuges of gemengde mediasets bekijkt.

  • Width - Voer een waarde in pixels in als u wilt dat de afbeelding een vaste grootte heeft. Als u deze waarde leeg laat, wordt het element adaptief.

  • Height - Voer een waarde in pixels in als u wilt dat de afbeelding een vaste grootte heeft. Als u deze waarde leeg laat, wordt het element adaptief.

Wanneer u werkt met video

Met de Dynamic Media-component kunt u dynamische video toevoegen aan uw webpagina's. Wanneer u de component bewerkt, kunt u een vooraf gedefinieerde videoviewer gebruiken om de video op de pagina af te spelen.

chlimage_1-173

De volgende Dynamic Media-instellingen bewerken door Edit in de component.

OPMERKING

De Dynamic Media-videocomponent is standaard adaptief. Als u van het een vaste grootte wilt maken, plaats het in de component met Width en Height in de Advanced tab.

  • Viewer preset - Selecteer een bestaande voorinstelling voor een videoviewer in het keuzemenu. Als de viewervoorinstelling die u zoekt niet zichtbaar is, moet u deze zichtbaar maken. Zie Viewervoorinstellingen beheren.

  • Viewer modifiers - Viewer-modifiers hebben de vorm van name=value pair met een &-scheidingsteken en laten u viewers wijzigen zoals beschreven in de Adobe Viewers Reference Guide. Een voorbeeld van een viewer-modifier is posterimage=img.jpg&caption=text.vtt,1

    Met viewermodifiers kunt u bijvoorbeeld het volgende doen:

    • Een bijschriftbestand koppelen aan een video: bijschrift

    • Een navigatiebestand koppelen aan een video: navigatie

      U kunt de volgende geavanceerde instellingen bewerken door Edit in de component.

  • Title - Wijzig de titel van de video.

  • Width - Voer een waarde in pixels in als u wilt dat de afbeelding een vaste grootte heeft. Als u deze waarde leeg laat, wordt het element adaptief.

  • Height - Voer een waarde in pixels in als u wilt dat de afbeelding een vaste grootte heeft. Als u deze waarde leeg laat, wordt het element adaptief.

Wanneer u werkt met Slim uitsnijden

Met de Dynamic Media-component kunt u SmartCrop-afbeeldingselementen toevoegen aan uw webpagina's. Wanneer u de component bewerkt, kunt u een vooraf gedefinieerde videoviewer gebruiken om de video op de pagina af te spelen.

Zie ook Afbeeldingsprofielen.

dm-settings-smart-crop

De volgende Dynamic Media-instelling bewerken door Edit in de component.

OPMERKING

Standaard is de afbeeldingscomponent voor dynamische media adaptief. Als u een vaste grootte wilt instellen, stelt u dit in de component op het tabblad Advanced met Width en Height in.

  • Image Modifiers - U kunt afbeeldingseffecten toepassen door extra opdrachten voor afbeeldingen te geven. Deze effecten worden beschreven in Voorinstellingen afbeelding en de verwijzing Opdracht Beeldserver.

    Deze optie is niet beschikbaar als u afbeeldingssets, centrifuges of gemengde mediasets bekijkt.

    U kunt de volgende geavanceerde instellingen bewerken door Edit in de component.

  • Enable Aspect Ration match - Selecteer deze optie als u wilt dat Dynamic Media een slimme uitsnijdvertoning kiest met een hoogte-breedteverhouding die het beste overeenkomt met de hoogte-breedteverhouding van de oorspronkelijke afbeelding.

  • Optimize for higher resolution devices - Schakel het selectievakje (standaard) in om DPR (Device Pixel Ratio)-optimalisatie toe te staan.

    De Optimize for higher resolution devices Deze optie wordt alleen weergegeven als de volgende waarde true is:

    • Onder Type voorinstelling, Smart Crop is geselecteerd.

    instelling voor pixelverhouding van apparaat voor slim uitsnijden

    Zie ook Optimalisatie van apparaatpixelverhoudingen. Alle Adobe Experience Manager Dynamic Media Smart Imaging DPR-waarden worden genegeerd.

  • Title - Wijzig de titel van de slimme-uitsnijdafbeelding.

  • Alt Text - Voeg een titel toe aan de slimme-uitsnijdafbeelding voor gebruikers die afbeeldingen hebben uitgeschakeld.

    Deze optie is niet beschikbaar als u afbeeldingssets, centrifuges of gemengde mediasets bekijkt.

  • URL, Open in - U kunt een element zo instellen dat een koppeling wordt geopend. Stel de URL in en kies Openen in om aan te geven of deze in hetzelfde venster of in een nieuw venster moet worden geopend.

    Deze optie is niet beschikbaar als u afbeeldingssets, centrifuges of gemengde mediasets bekijkt.

  • Width - Voer een waarde in pixels in als u wilt dat de afbeelding een vaste grootte heeft. Als u deze waarde leeg laat, wordt het element adaptief.

  • Height - Voer een waarde in pixels in als u wilt dat de afbeelding een vaste grootte heeft. Als u deze waarde leeg laat, wordt het element adaptief.

Interactieve mediacomponent

De interactieve component van Media is voor die activa die interactiviteit op hen zoals hotspots of beeldkaarten hebben. Als u een interactieve afbeelding, interactieve video of carrouselbanner hebt, gebruikt u de opdracht Interactive Media component.

De component Interactieve media is slim. U hebt verschillende opties, of u nu een afbeelding of video toevoegt. Bovendien reageert de viewer snel. De grootte van het scherm verandert automatisch op basis van de schermgrootte. Alle viewers zijn HTML5-viewers.

OPMERKING

Als uw webpagina het volgende heeft:

  • Meerdere instanties van de component Interactive Media die op dezelfde pagina worden gebruikt.
  • Elke instantie gebruikt hetzelfde elementtype.

Het toewijzen van een andere viewervoorinstelling aan elke interactieve mediacomponent op die pagina wordt niet ondersteund.

U kunt echter dezelfde viewervoorinstelling gebruiken voor alle interactieve mediacomponenten die op de pagina elementen van hetzelfde type gebruiken.

chlimage_1-174

U kunt het volgende bewerken General instellingen door Edit in de component.

  • Viewer preset - Selecteer een bestaande viewervoorinstelling in het keuzemenu. Als de viewervoorinstelling die u zoekt niet zichtbaar is, moet u deze zichtbaar maken. Voorinstellingen voor viewers moeten worden gepubliceerd voordat ze kunnen worden gebruikt. Zie Viewer-voorinstellingen beheren.

  • Title - Wijzig de titel van de video.

  • Width - Voer een waarde in pixels in als u wilt dat de afbeelding een vaste grootte heeft. Als u deze waarde leeg laat, wordt het element adaptief.

  • Height - Voer een waarde in pixels in als u wilt dat de afbeelding een vaste grootte heeft. Als u deze waarde leeg laat, wordt het element adaptief.

    U kunt het volgende bewerken Add To Cart instellingen door Edit in de component.

  • Show Product Asset - Deze waarde is standaard geselecteerd. Het productelement toont een afbeelding van het product zoals gedefinieerd in de module Handel. Schakel het vinkje uit om het productelement niet weer te geven.

  • Show Product Price - Deze waarde is standaard geselecteerd. De prijs van het product is de prijs van het object zoals gedefinieerd in de module Handel. Schakel het vinkje uit om de productprijs niet weer te geven.

  • Show Product Form - Deze waarde is standaard niet geselecteerd. Het productformulier bevat alle productvarianten zoals grootte en kleur. Schakel het vinkje uit om de productvarianten niet weer te geven.

Panoramische mediacomponent

Panoramische media-component is bedoeld voor die elementen die bolvormige panoramische afbeeldingen zijn. Dergelijke afbeeldingen bieden een kijkervaring van 360° voor een ruimte, eigenschap, locatie of landschap. Een afbeelding kan alleen als bolvormig panorama worden beschouwd als de afbeelding een van de volgende opties of beide heeft:

  • Een hoogte-breedteverhouding van 2:1.
  • Gecodeerd met de trefwoorden equirectangular of (spherical + panorama) of (spherical + panoramic). Zie Tags gebruiken.

Zowel de criteria voor hoogte-breedteverhouding als voor trefwoorden zijn van toepassing op panoramische assets voor de pagina met assetdetails en de Panoramic Media WCM-component.

OPMERKING

Als uw webpagina het volgende heeft:

  • Meerdere instanties van de Panoramic Media die op dezelfde pagina worden gebruikt.
  • Elke instantie gebruikt hetzelfde elementtype.

Een andere viewervoorinstelling toewijzen aan elke Panoramic Media wordt niet ondersteund.

U kunt echter dezelfde viewervoorinstelling gebruiken voor alle Panoramische Media-componenten die elementen van hetzelfde type gebruiken, op de pagina.

panoramisch-media-viewer-voorinstelling

U kunt de volgende instelling bewerken door Configure in de component.

  • Viewer Preset - Selecteer een bestaande viewer in het vervolgkeuzemenu met voorinstellingen voor viewer.

Als de viewervoorinstelling die u zoekt niet zichtbaar is, controleert u of deze is gepubliceerd. Publiceer viewervoorinstellingen voordat u deze gebruikt. Zie Viewer-voorinstellingen beheren.

Video 360-mediacomponent

Gebruik de Video 360 Media voor het weergeven van rechthoekige video op uw webpagina voor een indrukwekkende kijkervaring in een kamer, eigenschap, locatie, landschap of medische procedure.

Tijdens het afspelen op een plat beeldscherm heeft de gebruiker controle over de kijkhoek; Bij het afspelen op mobiele apparaten worden doorgaans de ingebouwde gyroscopische besturingselementen gebruikt.

De viewer bevat native ondersteuning voor de levering van 360 video-elementen. Standaard is geen aanvullende configuratie nodig voor weergave of afspelen. U levert 360 Video gebruikend standaardvideouitbreidingen zoals .mp4, .mkv, en .mov. De meest algemene codec is H.264.

6_5_360video_wcmcomponent-1

U kunt de volgende instelling bewerken door Configure in de component.

  • Viewer Preset - Selecteer een bestaande viewer in het vervolgkeuzemenu met voorinstellingen voor viewer. Gebruik Video360VR voor eindgebruikers die een virtuele realiteitsbril gebruiken. Bevat basisbesturingselementen voor het afspelen van video en functies voor sociale media. Gebruik Video360_social, die basisbesturingselementen voor het afspelen van video bevat. Video renderen wordt uitgevoerd in de stereomodus. Handmatige zichtpuntcontrole is uitgeschakeld, maar gyroscopische controle is ingeschakeld. Er zijn geen functies voor sociale media.

Als de viewervoorinstelling die u zoekt niet zichtbaar is, controleert u of deze is gepubliceerd. Zorg ervoor dat u viewervoorinstellingen publiceert voordat u deze gebruikt. Zie Viewer-voorinstellingen beheren.

HTTP/2 gebruiken om Dynamic Media-elementen te leveren

HTTP/2 is het nieuwe, bijgewerkte webprotocol dat de manier verbetert waarop browsers en servers communiceren. Het zorgt voor een snellere overdracht van informatie en vermindert de hoeveelheid verwerkingskracht die nodig is. De levering van Dynamic Media-middelen kan nu plaatsvinden via HTTP/2, wat betere responstijd en laadtijden biedt.

Zie HTTP2 Levering van inhoud voor volledige informatie over hoe u aan de slag gaat met HTTP/2 met uw Dynamic Media-account.

Op deze pagina