Personnalisation de la visionneuse de vidéos avec recadrage intelligent customizing-smartcrop-video-viewer

Toutes les personnalisations visuelles et la plupart des personnalisations du comportement sont effectuées en créant une page CSS personnalisée.

Le workflow suggéré consiste à prendre le fichier CSS par défaut pour la visionneuse appropriée, à le copier vers un autre emplacement, à le personnaliser, et à spécifier l’emplacement du fichier personnalisé dans la commande style=.

Les fichiers CSS par défaut se trouvent à l’emplacement suivant :

<s7_viewers_root>/html5/SmartCropVideoViewer.css

Le fichier CSS personnalisé doit contenir les mêmes déclarations de classe que celles par défaut. Si une déclaration de classe est omise, la visionneuse ne fonctionne pas correctement, car elle ne fournit pas de styles par défaut intégrés pour les éléments de l’interface utilisateur.

Une autre manière de fournir des règles CSS personnalisées consiste à utiliser des styles incorporés directement sur la page web ou dans l’une des règles CSS externes liées.

Lorsque vous créez une page CSS personnalisée, n’oubliez pas que la visionneuse affecte la classe .s7smartcropvideoviewer à son élément DOM de conteneur. Si vous utilisez un fichier CSS externe qui est transmis avec la commande style=, utilisez la classe .s7smartcropvideoviewer comme classe parente dans le sélecteur descendant pour vos règles CSS. Si vous incorporez des styles à la page web, qualifiez également ce sélecteur avec un identifiant de l’élément DOM du conteneur comme suit :

#<containerId>.s7smartcropvideoviewer

Création d’une page CSS adaptée section-63e8f93ee2f14fd8bba1ce33a6870b80

Il est possible de cibler différents appareils dans CSS pour que votre contenu s’affiche différemment selon l’appareil d’un utilisateur. Ce ciblage comprend, sans s’y limiter, différentes tailles d’éléments de l’interface utilisateur et une résolution d’illustration.

La visionneuse prend en charge deux mécanismes de création de CSS responsive design : les marqueurs CSS et les requêtes multimédias CSS standard. Vous pouvez utiliser ces deux mécanismes séparément ou ensemble.

Marqueurs CSS

Pour faciliter la création de CSS responsive design, la visionneuse prend en charge les marqueurs CSS qui sont des classes CSS spéciales dynamiquement affectées à l’élément de conteneur de la visionneuse de niveau supérieur. Cette affectation est basée sur la taille de la visionneuse au moment de l’exécution et le type d’entrée utilisé sur l’appareil actuel.

Le premier groupe de marqueurs CSS comprend les classes .s7size_large, .s7size_medium et .s7size_small. Elles sont appliquées en fonction de la zone d’exécution du conteneur de la visionneuse. En d’autres termes, si la zone de visionneuse est égale ou supérieure à la taille d’un moniteur de bureau commun .s7size_large est utilisée ; si la zone est proche de la taille d’un tablette commun .s7size_medium est affectée. Pour les zones similaires aux écrans de téléphone mobile, .s7size_small est défini. L’objectif principal de ces marqueurs CSS est de créer différentes mises en page d’interface utilisateur pour différents écrans et tailles de visionneuse.

Le deuxième groupe de marqueurs CSS comprend .s7mouseinput et .s7touchinput. Le marqueur .s7touchinput est défini si l’appareil actuel dispose de fonctionnalités d’entrée tactile ; dans le cas contraire, .s7mouseinput est utilisé. Ces marqueurs sont destinés à créer des éléments d’entrée de l’interface utilisateur avec des tailles d’écran différentes pour différents types d’entrée, car la saisie tactile nécessite normalement des éléments plus volumineux. Si l’appareil dispose de fonctionnalités d’entrée de souris et de tactile, .s7touchinput est défini et la visionneuse effectue le rendu d’une interface utilisateur tactile.

L’exemple de page CSS suivant définit la taille du bouton de lecture/pause sur 28 x 28 pixels sur les systèmes avec entrée de la souris et 56 x 56 pixels sur les appareils tactiles. En outre, il masque complètement le bouton si la taille de la visionneuse devient petite :

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

Pour cibler des appareils avec une densité de pixels différente, utilisez des requêtes multimédias CSS. Le bloc de requête multimédia suivant contient une feuille CSS spécifique aux écrans à haute densité :

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

L’utilisation de marqueurs CSS est la méthode la plus souple pour créer des CSS réactives. Cette flexibilité vous permet de cibler non seulement la taille de l’écran de l’appareil, mais aussi la taille réelle de la visionneuse, ce qui peut s’avérer utile pour les mises en page en responsive design.

Utilisez le fichier CSS de visionneuse par défaut comme exemple d’approche des marqueurs CSS.

Requêtes multimédias CSS

La détection de périphérique peut également être effectuée à l’aide de requêtes multimédias CSS pures. Tout ce qui est inclus dans un bloc de requête multimédia donné est appliqué uniquement lorsqu’il est exécuté sur un appareil correspondant.

Lorsqu’elles sont appliquées aux visionneuses mobiles, utilisez quatre requêtes multimédias CSS, définies dans votre CSS dans l’ordre indiqué ci-dessous :

En utilisant l’approche de requêtes multimédias CSS, vous devez organiser CSS avec la détection de périphérique comme suit :

Il n’est pas nécessaire de dupliquer l’intégralité du CSS de la visionneuse dans chaque requête de média. Seules les propriétés spécifiques à des appareils donnés sont redéfinies au sein d’une requête multimédia.

Sprites CSS section-9b6d8d601cb441d08214dada7bb4eddc

De nombreux éléments de l’interface utilisateur de la visionneuse sont stylisés à l’aide d’illustrations bitmap et possèdent plusieurs états visuels distincts. Un bon exemple est un bouton qui a normalement au moins trois états différents : "haut", "sur" et "bas". Chaque état nécessite l’attribution de sa propre illustration bitmap.

Avec une approche classique de la mise en forme, le CSS dispose d’une référence distincte au fichier image individuel sur le serveur pour chaque état de l’élément d’interface utilisateur. Voici un exemple de page CSS pour la mise en forme d’un bouton plein écran :

.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);
}

L’inconvénient de cette approche est que l’utilisateur final subit un scintillement ou une réponse de l’interface utilisateur différée lorsque l’élément est interagi pour la première fois. Cette action se produit car l’illustration de l’image pour le nouvel état d’élément n’est pas encore téléchargée. En outre, cette approche peut avoir un léger impact négatif sur les performances en raison d’une augmentation du nombre d’appels HTTP au serveur.

Les sprites CSS constituent une approche différente selon laquelle l’illustration d’image pour tous les états d’élément est combinée dans un seul fichier PNG appelé "sprite". Un tel "sprite" a tous les états visuels pour l’élément donné positionnés l’un après l’autre. Lors du style d’un élément d’interface utilisateur avec des sprites, la même image de sprite est référencée pour tous les états différents du CSS. En outre, la propriété background-position est utilisée pour chaque état pour spécifier la partie de l’image "sprite" utilisée. Vous pouvez structurer une image "sprite" de n’importe quelle manière appropriée. Les visionneuses disposent normalement d’un empilement vertical. Vous trouverez ci-dessous un exemple de style basé sur un "sprite" du même bouton plein écran ci-dessus :

.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;
}

Notes et conseils généraux sur le style section-097418bd618740bba36352629e4d88e1

Éléments de l’interface utilisateur courants section-d6330c9be8c444aa9b2a07886e3dbc2a

Voici une documentation de référence sur les éléments de l’interface utilisateur qui s’applique à la visionneuse vidéo avec recadrage intelligent :