De Smart Crop Video-viewer aanpassen customizing-smartcrop-video-viewer

Alle visuele aanpassingen en de meeste gedragsaanpassingen worden gedaan door douanecCSS 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 het style= gebruiken.

Standaard CSS-bestanden vindt u op de volgende locatie:

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

Wanneer u aangepaste CSS maakt, moet u niet vergeten dat de viewer hieraan toewijzingen toekent .s7smartcropvideoviewer -klasse aan het DOM-containerelement. Als u een extern CSS-bestand gebruikt dat samen met de style= gebruiken .s7smartcropvideoviewer klasse als bovenliggende klasse in afstammende kiezer voor uw CSS-regels. Als u stijlen op de webpagina insluit, kwalificeert u deze kiezer ook als volgt met een id van het DOM-containerelement:

#<containerId>.s7smartcropvideoviewer

Responsieve CSS maken section-63e8f93ee2f14fd8bba1ce33a6870b80

Het is mogelijk verschillende apparaten in CSS als doel in te stellen om de weergave van uw inhoud te wijzigen, afhankelijk van het apparaat van de gebruiker. Dit geldt onder andere voor verschillende elementgrootten van de gebruikersinterface 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 twee mechanismen onafhankelijk of samen gebruiken.

CSS-markeringen

Om responsieve, ontworpen CSS te helpen maken, ondersteunt de viewer CSS-markeringen die speciale CSS-klassen dynamisch zijn toegewezen aan het containerelement op het hoogste niveau. Deze toewijzing is gebaseerd op de grootte van de uitvoeringsviewer en het invoertype dat op het huidige apparaat wordt gebruikt.

De eerste groep CSS-markeringen bevat .s7size_large, .s7size_medium, en .s7size_small klassen. Ze worden toegepast op basis van het runtimegebied van de viewercontainer. Dit betekent dat het viewergebied gelijk is aan of groter is dan het formaat van een algemene desktopmonitor .s7size_large wordt gebruikt; als het gebied zich in de buurt van een gebruikelijke tabletvorm bevindt .s7size_medium is toegewezen. Voor gebieden die vergelijkbaar zijn met mobiele-telefoonschermen, .s7size_small is 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-markeringen bevat .s7mouseinput en .s7touchinput. De markering .s7touchinput wordt ingesteld als het huidige apparaat aanraakinvoermogelijkheden heeft; anders .s7mouseinput wordt gebruikt. Deze markeringen zijn bedoeld om invoerelementen voor de gebruikersinterface te maken met verschillende schermgrootten voor verschillende invoertypen, omdat aanraakinvoer doorgaans grotere elementen vereist. Als het apparaat zowel muisinvoer- als aanraakmogelijkheden heeft, .s7touchinput wordt ingesteld en de viewer een aanraakvriendelijke gebruikersinterface weergeeft.

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

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

Gebruik CSS-mediaquery's om apparaten met een andere pixeldichtheid als doel in te stellen. 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 samen te stellen. Met deze flexibiliteit kunt u niet alleen de schermgrootte van het apparaat als doel instellen, maar ook de werkelijke viewergrootte. Dit kan handig zijn voor responsieve ontwerppaginalay-outs.

Gebruik het CSS-bestand voor de standaardviewer als voorbeeld van een CSS-markeertekenaanpak.

CSS-mediaquery's

Apparaatdetectie kan ook worden uitgevoerd 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 in de onderstaande volgorde zijn gedefinieerd:

Met de CSS-benadering voor mediaquery's moet u CSS met apparaatdetectie als volgt ordenen:

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:

.s7smartcropvideoviewer.s7mouseinput .s7playpausebutton[selected='true'][state='up'] {
background-image:url(images/v2/PlayButton_up.png);
}
.s7smartcropvideoviewer.s7mouseinput .s7playpausebutton[selected='true'][state='over'] {
background-image:url(images/v2/PlayButton_over.png);
}
.s7smartcropvideoviewer.s7mouseinput .s7playpausebutton[selected='true'][state='down'] {
background-image:url(images/v2/PlayButton_down.png);
}
.s7smartcropvideoviewer.s7mouseinput .s7playpausebutton[selected='true'][state='disabled'] {
background-image:url(images/v2/PlayButton_disabled.png);
}
.s7smartcropvideoviewer.s7mouseinput .s7playpausebutton[selected='false'][state='up'] {
background-image:url(images/v2/PauseButton_up.png);
}
.s7smartcropvideoviewer.s7mouseinput .s7playpausebutton[selected='false'][state='over'] {
background-image:url(images/v2/PauseButton_over.png);
}
.s7smartcropvideoviewer.s7mouseinput .s7playpausebutton[selected='false'][state='down'] {
background-image:url(images/v2/PauseButton_down.png);
}
.s7smartcropvideoviewer.s7mouseinput .s7playpausebutton[selected='false'][state='disabled'] {
background-image:url(images/v2/PauseButton_disabled.png);
}
.s7smartcropvideoviewer.s7mouseinput .s7playpausebutton[selected='true'][replay='true'][state='up'] {
background-image:url(images/v2/ReplayButton_up.png);
}
.s7smartcropvideoviewer.s7mouseinput .s7playpausebutton[selected='true'][replay='true'][state='over'] {
background-image:url(images/v2/ReplayButton_over.png);
}
.s7smartcropvideoviewer.s7mouseinput .s7playpausebutton[selected='true'][replay='true'][state='down'] {
background-image:url(images/v2/ReplayButton_down.png);
}
.s7smartcropvideoviewer.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. Ook de background-position eigenschap wordt 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 schermvullende knop van bovenaf opmaakt:

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

Algemene opmaakopmerkingen en advies section-097418bd618740bba36352629e4d88e1

Algemene gebruikersinterface-elementen section-d6330c9be8c444aa9b2a07886e3dbc2a

Hieronder vindt u de referentiedocumentatie voor gebruikersinterface-elementen die van toepassing is op de SmartCrop Video-viewer: