DocumentatieNaslaggids voor dynamische mediasviewers

Interactieve video-viewer aanpassen customizing-interactive-video-viewer

Last update: Fri Aug 15 2025 00:00:00 GMT+0000 (Coordinated Universal Time)
  • Onderwerpen:

Gemaakt voor:

  • Ontwikkelaar
  • Gebruiker

Alle visuele aanpassingen en de meeste gedragsaanpassingen voor de Interactieve VideoKijker worden gedaan door een douaneCSS te creëren.

De voorgestelde workflow is om het standaard CSS-bestand voor de juiste viewer te gebruiken, het naar een andere locatie te kopiëren, het aan te passen en de locatie van het aangepaste bestand op te geven in de opdracht style= .

Standaard CSS-bestanden vindt u op de volgende locatie:

<s7_viewers_root>/html5/InteractiveVideoViewer_dark.css

De viewer wordt geleverd met twee CSS-bestanden die niet in de box staan, voor 'lichte' en 'donkere' kleurenschema's. Standaard wordt de "donkere" versie gebruikt, maar u kunt gemakkelijk overschakelen op de "lichte" versie met de volgende standaard-CSS:

<s7_viewers_root>/html5/InteractiveVideoViewer_light.css

Aangepast CSS-bestand moet dezelfde klassedeclaraties bevatten als het standaardbestand. Als een klassendeclaratie wordt weggelaten, werkt de viewer niet correct omdat deze geen ingebouwde standaardstijlen voor gebruikersinterface-elementen biedt.

Een andere manier om aangepaste CSS-regels te bieden, is door ingesloten stijlen rechtstreeks op de webpagina of in een van gekoppelde externe CSS-regels te gebruiken.

Houd er bij het maken van aangepaste CSS rekening mee dat de viewer de klasse .s7interactivevideoviewer toewijst aan het DOM-containerelement. Als u extern CSS-bestand gebruikt dat met de opdracht style= is doorgegeven, gebruikt u de klasse .s7interactivevideoviewer als bovenliggende klasse in de onderliggende kiezer voor uw CSS-regels. Als u ingesloten stijlen op de webpagina uitvoert, kwalificeert u deze kiezer met een id van het DOM-containerelement als volgt:

#<containerId>.s7interactivevideoviewer

Responsieve CSS maken section-0bb49aca42d242d9b01879d5ba59d33b

Het is mogelijk om verschillende apparaten en insluitingsgrootten in CSS als doel in te stellen om uw inhoudsweergave te wijzigen, afhankelijk van het apparaat van de gebruiker of een bepaalde webpaginalay-out. Deze methode omvat, maar is niet beperkt tot, verschillende lay-outs, de grootte van gebruikersinterface-elementen en de resolutie van illustraties.

De viewer ondersteunt twee mechanismen voor het maken van responsieve, ontworpen CSS: CSS-markeringen en standaard CSS-mediaquery's. U kunt deze mechanismen onafhankelijk of samen gebruiken.

CSS tellers

Voor hulp bij het maken van responsieve, ontworpen CSS, ondersteunt de viewer CSS-markeringen. Deze markeringen zijn speciale CSS-klassen. Ze worden dynamisch toegewezen aan het containerelement op het hoogste niveau, op basis van de viewergrootte tijdens runtime en het invoertype dat op het huidige apparaat wordt gebruikt.

De eerste groep CSS-markeringen bevat de klassen .s7size_large , .s7size_medium en .s7size_small . Ze worden toegepast op basis van het runtimegebied van de viewercontainer. Als het viewergebied gelijk is aan of groter is dan het formaat van een algemene desktopmonitor, wordt .s7size_large gebruikt. Als het gebied zich dicht bij een algemeen tabletapparaat bevindt, wordt .s7size_medium toegewezen. Voor gebieden die vergelijkbaar zijn met mobiele-telefoonschermen, wordt .s7size_small ingesteld. Het belangrijkste doel van deze CSS-markeringen is het maken van verschillende lay-outs voor de gebruikersinterface voor verschillende schermen en viewerformaten.

De tweede groep CSS-markeertekens bevat .s7mouseinput en .s7touchinput . De markering .s7touchinput wordt ingesteld als het huidige apparaat aanraakinvoermogelijkheden heeft; anders wordt .s7mouseinput gebruikt. Deze markeringen zijn vooral bedoeld om invoerelementen in de gebruikersinterface te maken met verschillende schermgrootten voor verschillende invoertypen, omdat aanraakinvoer doorgaans grotere elementen vereist.

De derde groep CSS-markeertekens bevat .s7device_landscape en .s7device_portrait . De markering .s7device_landscape wordt ingesteld als het aanraakapparaat liggend is. .s7device_portrait wordt gebruikt wanneer het aanraakapparaat wordt gedraaid naar de staande oriëntatie. Deze CSS-markeringen zijn alleen bedoeld voor gebruik op desktopsystemen.

In het volgende voorbeeld-CSS wordt de grootte van de afspeel-/pauzeknop ingesteld op 28x28 pixels op systemen met muisinvoer en 56x56 pixels op aanraakapparaten. Bovendien wordt de knop volledig verborgen als de viewergrootte aanzienlijk wordt verkleind:

.s7interactivevideoviewer.s7mouseinput .s7playpausebutton {
    width:28px;
    height:28px;
}
.s7interactivevideoviewer.s7touchinput .s7playpausebutton {
    width:56px;
    height:56px;
}
.s7interactivevideoviewer.s7size_small .s7playpausebutton {
    visibility:hidden;
}

In dit volgende voorbeeld bevindt de videobesturingsbalk zich op positie 138 pixels boven de onderkant van de viewer als het aanraakapparaat staand is. In alle andere gevallen wordt de clip naar de onderkant van de viewer verplaatst:

.s7interactivevideoviewer.s7touchinput.s7device_landscape .s7controlbar,
.s7interactivevideoviewer.s7mouseinput .s7controlbar {
 bottom:0px;
}
.s7interactivevideoviewer.s7touchinput.s7device_portrait .s7controlbar {
 bottom:136px;
}

Als u apparaten met verschillende pixeldichtheid wilt aanwijzen, moet u CSS-mediaquery's gebruiken. Het volgende mediaqueryblok bevat CSS die specifiek is voor schermen met hoge dichtheid:

@media screen and (-webkit-min-device-pixel-ratio: 1.5)
{
}

Het gebruik van CSS-markeringen is de meest flexibele manier om responsieve, ontworpen CSS te maken, omdat u hiermee niet alleen de schermgrootte van het apparaat maar ook de daadwerkelijke viewergrootte kunt instellen. Dit is handig voor responsieve ontwerplay-outs.

U kunt het CSS-bestand voor de standaardviewer gebruiken als voorbeeld van een CSS-markeertekenaanpak.

CSS media vragen

U kunt apparaatdetectie ook uitvoeren met zuivere CSS-mediaquery's. Alles wat in een bepaald mediaqueryblok is ingesloten, wordt alleen toegepast wanneer dit op een overeenkomstig apparaat wordt uitgevoerd.

Gebruik bij toepassing op mobiele viewers vier CSS-mediaquery's, die in uw CSS zijn gedefinieerd, in de onderstaande volgorde:

  1. Bevat alleen regels die specifiek zijn voor alle aanraakapparaten.

    code language-none 
    @media only screen and (max-device-width:13.5in) and (max-device-
height:13.5in) and (max-device-width:799px),
only screen and (max-device-width:13.5in) and (max-device-height:13.5in)
and (max-device-height:799px)
{
}

  2. Bevat alleen regels die specifiek zijn voor tablets met schermen met hoge resolutie.

    code language-none 
    @media only screen and (max-device-width:13.5in) and (max-device-height:13.5in) and (max-device-width:799px) and (-webkit-min-device-pixel-ratio:1.5),
only screen and (max-device-width:13.5in) and (max-device-height:13.5in) and (max-device-height:799px) and (-webkit-min-device-pixel-ratio:1.5)
{
}

  3. Bevat alleen specifieke regels voor alle mobiele telefoons.

    code language-none 
    @media only screen and (max-device-width:9in) and (max-device-height:9in)
{
}

  4. Bevat alleen specifieke regels voor mobiele telefoons met schermen met hoge resolutie.

    code language-none 
    @media only screen and (max-device-width:9in) and (max-device-height:9in) and (-webkit-min-device-pixel-ratio: 1.5),
  only screen and (device-width:720px) and (device-height:1280px) and (-webkit-device-pixel-ratio: 2),
  only screen and (device-width:1280px) and (device-height:720px) and (-webkit-device-pixel-ratio: 2)
{
}

Met een mediaqueryaanpak moet u CSS met apparaatdetectie als volgt ordenen:

  • Ten eerste definieert de desktopspecifieke sectie alle eigenschappen die specifiek zijn voor het bureaublad of die op alle schermen van toepassing zijn.
  • Ten tweede gaan de vier mediaquery's in de hierboven gedefinieerde volgorde en bieden ze CSS-regels die specifiek zijn voor het overeenkomstige apparaattype.

Het is niet nodig om de volledige viewer-CSS in elke mediaquery te dupliceren. Alleen eigenschappen die specifiek zijn voor bepaalde apparaten, worden opnieuw gedefinieerd in een mediaquery.

CSS-sprites section-9b6d8d601cb441d08214dada7bb4eddc

Veel gebruikersinterface-elementen van de viewer worden opgemaakt met behulp van bitmapillustraties en hebben meer dan één specifieke visuele status. Een goed voorbeeld is een knop met normaal ten minste drie verschillende toestanden: "omhoog", "boven" en "omlaag". Elke status vereist een eigen toegewezen bitmapillustratie.

Bij een klassieke benadering van opmaak zou de CSS een afzonderlijke verwijzing naar het afzonderlijke afbeeldingsbestand op de server hebben voor elke status van het interface-element. Hieronder ziet u een voorbeeld-CSS voor het opmaken van een knop in een volledig scherm:

.s7interactivevideoviewer.s7mouseinput .s7playpausebutton[selected='true'][state='up'] {
background-image:url(images/v2/PlayButton_up.png);
}
.s7interactivevideoviewer.s7mouseinput .s7playpausebutton[selected='true'][state='over'] {
background-image:url(images/v2/PlayButton_over.png);
}
.s7interactivevideoviewer.s7mouseinput .s7playpausebutton[selected='true'][state='down'] {
background-image:url(images/v2/PlayButton_down.png);
}
.s7interactivevideoviewer.s7mouseinput .s7playpausebutton[selected='true'][state='disabled'] {
background-image:url(images/v2/PlayButton_disabled.png);
}
.s7interactivevideoviewer.s7mouseinput .s7playpausebutton[selected='false'][state='up'] {
background-image:url(images/v2/PauseButton_up.png);
}
.s7interactivevideoviewer.s7mouseinput .s7playpausebutton[selected='false'][state='over'] {
background-image:url(images/v2/PauseButton_over.png);
}
.s7interactivevideoviewer.s7mouseinput .s7playpausebutton[selected='false'][state='down'] {
background-image:url(images/v2/PauseButton_down.png);
}
.s7interactivevideoviewer.s7mouseinput .s7playpausebutton[selected='false'][state='disabled'] {
background-image:url(images/v2/PauseButton_disabled.png);
}
.s7interactivevideoviewer.s7mouseinput .s7playpausebutton[selected='true'][replay='true'][state='up'] {
background-image:url(images/v2/ReplayButton_up.png);
}
.s7interactivevideoviewer.s7mouseinput .s7playpausebutton[selected='true'][replay='true'][state='over'] {
background-image:url(images/v2/ReplayButton_over.png);
}
.s7interactivevideoviewer.s7mouseinput .s7playpausebutton[selected='true'][replay='true'][state='down'] {
background-image:url(images/v2/ReplayButton_down.png);
}
.s7interactivevideoviewer.s7mouseinput .s7playpausebutton[selected='true'][replay='true'][state='disabled'] {
background-image:url(images/v2/ReplayButton_disabled.png);
}

Het nadeel van deze aanpak is dat de eindgebruiker een flikkerende of vertraagde reactie van de gebruikersinterface ervaart wanneer het element voor het eerst wordt gebruikt. Deze handeling treedt op omdat de afbeeldingsillustratie voor de nieuwe elementstatus nog niet is gedownload. Deze aanpak kan ook een enigszins negatief effect hebben op de prestaties als gevolg van een toename van het aantal HTTP-aanroepen naar de server.

CSS-sprites is een andere aanpak waarbij afbeeldingsillustraties voor alle elementstatussen worden gecombineerd in één PNG-bestand dat een 'sprite' wordt genoemd. Zulk "SPRITE"heeft alle visuele staten voor het bepaalde die element één na een andere wordt geplaatst. Wanneer het stileren van een gebruikersinterface element met sprites, wordt het zelfde SPRITE beeld van verwijzingen voorzien voor alle verschillende staten in CSS. Bovendien wordt de eigenschap background-position voor elke status gebruikt om aan te geven welk deel van de "sprite"-afbeelding wordt gebruikt. U kunt een sprite-afbeelding op elke gewenste manier structureren. De kijkers hebben het gewoonlijk verticaal gestapeld. Hieronder ziet u een op sprite gebaseerd voorbeeld waarin u dezelfde knop voor volledig scherm vroeger opmaakt:

.s7interactivevideoviewer .s7fullscreenbutton[state][selected]{
 background-image: url(images/v2/FullScreenButton_dark_sprite.png);
}
.s7interactivevideoviewer.s7mouseinput .s7fullscreenbutton[selected='true'][state='up'] {
background-position: -84px -1148px;
}
.s7interactivevideoviewer.s7mouseinput .s7fullscreenbutton[selected='true'][state='over'] {
background-position: -56px -1148px;
}
.s7interactivevideoviewer.s7mouseinput .s7fullscreenbutton[selected='true'][state='down'] {
background-position: -28px -1148px;
}
.s7interactivevideoviewer.s7mouseinput .s7fullscreenbutton[selected='true'][state='disabled'] {
background-position: -0px -1148px;
}
.s7interactivevideoviewer.s7mouseinput .s7fullscreenbutton[selected='false'][state='up'] {
background-position: -84px -1120px;
}
.s7interactivevideoviewer.s7mouseinput .s7fullscreenbutton[selected='false'][state='over'] {
background-position: -56px -1120px;
}
.s7interactivevideoviewer.s7mouseinput .s7fullscreenbutton[selected='false'][state='down'] {
background-position: -28px -1120px;
}
.s7interactivevideoviewer.s7mouseinput .s7fullscreenbutton[selected='false'][state='disabled'] {
background-position: -0px -1120px;
}

Algemene opmaakopmerkingen en advies section-95855dccbbc444e79970f1aaa3260b7b

  • Wanneer u de gebruikersinterface van de viewer aanpast met CSS, wordt het gebruik van de regel !IMPORTANT niet ondersteund voor het opmaken van viewerelementen. De !IMPORTANT -regel mag met name niet worden gebruikt om standaardstijlen of runtimestijlen die door de viewer of Viewer SDK worden geboden, te negeren. De reden hiervoor is dat het het gedrag van juiste componenten kan beïnvloeden. Gebruik in plaats daarvan CSS-kiezers met de juiste specificiteit om CSS-eigenschappen in te stellen die in deze naslaggids worden beschreven.

  • Alle paden naar externe elementen in CSS worden omgezet op de CSS-locatie, niet op de locatie van de HTML-pagina van de viewer. Houd rekening met deze regel wanneer u de standaard-CSS naar een andere locatie kopieert. Kopieer de standaardelementen of werk paden bij in de aangepaste CSS.

  • De voorkeursindeling voor bitmapillustraties is PNG.

  • Bitmapillustraties worden met de eigenschap background-image aan gebruikersinterface-elementen toegewezen.

  • De eigenschappen width en height van een interface-element definiëren de logische grootte ervan. De grootte van de bitmap die aan background-image wordt doorgegeven, heeft geen invloed op de logische grootte.

  • Als u de hoge pixeldichtheid van schermen met hoge resolutie, zoals Retina, wilt gebruiken, geeft u bitmapillustraties twee keer zo groot op als de logische grootte van de gebruikersinterface-elementen. Pas vervolgens de eigenschap -webkit-background-size:contain toe om de achtergrond omlaag te schalen naar de logische grootte van het interface-element.

  • Als u een knop uit de gebruikersinterface wilt verwijderen, voegt u display:none toe aan de bijbehorende CSS-klasse.

  • U kunt verschillende indelingen gebruiken voor kleurwaarden die CSS ondersteunt. Gebruik de indeling rgba(R,G,B,A) als u transparantie nodig hebt. Anders kunt u de notatie #RRGGBB gebruiken.

Algemene gebruikersinterface-elementen section-d6330c9be8c444aa9b2a07886e3dbc2a

Hier volgt de documentatie van de gebruikersinterface-elementen die van toepassing is op Interactive Video Viewer:

recommendation-more-help
b7426f53-aad9-4c00-83fc-664f30f681e8