Vidéo interactive

La visionneuse de vidéos interactive est un lecteur vidéo qui lit la diffusion en flux continu et la vidéo progressive codée au format H.264.

Le lecteur de contenu affiche également des échantillons de produit interactifs en regard du contenu vidéo. Les visionneuses de vidéos uniques et adaptatives sont prises en charge. Il est conçu pour fonctionner à la fois sur les navigateurs Web mobiles et de bureau qui prennent en charge les vidéos HTML5. Le lecteur de contenu prend en charge les sous-titres en option affichés sur le contenu vidéo, la navigation dans les chapitres vidéo et les outils de partage sur les réseaux sociaux. L’objectif de cette visionneuse est de vous aider à mettre en oeuvre une expérience de "vidéo pouvant faire l’objet d’un achat". En d’autres termes, les utilisateurs peuvent sélectionner une nuance associée à une région de temps vidéo particulière et être redirigés vers une Vue rapide ou une page des détails du produit sur le site Web du client.

Le type de lecteur est 510.

URL de démonstration

https://marketing.adobe.com/resources/help/en_US/dm/shoppable-video/glacier/InteractiveVideoViewerDemo.html

et

https://marketing.adobe.com/resources/help/en_US/dm/shoppable-video/AXIS/index.html

Configuration système requise

Voir Configuration système requise.

Utilisation de la visionneuse de vidéos interactive

La visionneuse de vidéos interactive représente un fichier JavaScript principal et un ensemble de fichiers d’aide (un seul fichier JavaScript est inclus avec tous les composants du SDK de la visionneuse utilisés par cette visionneuse, ressources et CSS) téléchargés par la visionneuse au moment de l’exécution.

La visionneuse de vidéos interactive peut être utilisée en mode contextuel à l’aide d’une page HTML prête à l’emploi fournie avec les visionneuses de diffusion d’images. Il peut également être utilisé en mode incorporé, où il est intégré à la page Web ciblée à l’aide de l’API documentée.

La configuration et l’habillage sont similaires à ceux des autres visionneuses décrites dans ce guide. Tous les habillages sont réalisés au moyen de feuilles de style en cascade (CSS) personnalisées.

Voir Référence de commande commune à toutes les visionneuses - Attributs de configuration et Référence de commande commune à toutes les visionneuses - URL

Interaction avec la visionneuse de vidéos interactive

La visionneuse de vidéos interactive fournit un ensemble de commandes standard de l’interface utilisateur pour la lecture vidéo, telles qu’un bouton Lecture/Pause, la barre de défilement vidéo, la bulle de temps de lecture vidéo, l’indicateur de temps de lecture/total, le contrôle du volume, le bouton Plein écran et la bascule de sous-titrage. Tous ces contrôles sont regroupés dans une barre de contrôle directement sous la vue principale.

Notez que sur les périphériques tactiles, le contrôle de volume est masqué dans l'interface utilisateur, car il est possible de contrôler le volume uniquement à l'aide des boutons matériels du périphérique.

Lorsque le lecteur fonctionne en mode contextuel, aucun bouton plein écran n’est disponible dans l’interface utilisateur.

La visionneuse affiche un panneau avec des échantillons interactifs à droite de la zone de visualisation vidéo. La liste des échantillons avance automatiquement à mesure que la vidéo est lue, de sorte que les échantillons correspondant à la région de la vidéo active s’affichent. Un clic ou un appui sur une nuance déclenche une action associée à cette nuance pendant l’heure de création. Selon la manière dont vous l’avez configuré, le déclencheur peut rediriger vers une autre page du site Web ou transmettre les informations sur le produit à la logique de la page Web, ce qui peut à son tour déclencher l’ouverture d’une Vue rapide qui affiche le contenu du produit associé.

Il est possible de naviguer rapidement dans le contenu vidéo lorsque le chapitre vidéo est activé. Les chapitres vidéo sont affichés sous la forme de marqueurs dans le suivi de la barre de défilement vidéo et affichent le titre et la description du chapitre lors du roulement (ou sur un seul appui sur les systèmes tactiles). Le client peut "rechercher" un chapitre particulier en cliquant sur un marqueur de chapitre ou en appuyant sur une bulle de description de chapitre.

Le lecteur prend également en charge divers outils de partage sur les réseaux sociaux. Ils sont disponibles sous la forme d’un bouton unique dans l’interface utilisateur qui se développe dans une barre d’outils de partage lorsque l’utilisateur clique ou appuie dessus. La barre d’outils de partage contient une icône pour chaque type de canal de partage pris en charge, tel que Facebook, Twitter, le partage de courrier électronique, le partage de code incorporé et le partage de liens. Lorsque des outils de partage de courrier électronique, de partage incorporé ou de partage de liens sont activés, le lecteur affiche une boîte de dialogue modale avec un formulaire de saisie de données correspondant. Lorsque Facebook ou Twitter sont appelés, le lecteur redirige l’utilisateur vers une boîte de dialogue de partage standard à partir d’un service de médias sociaux. En outre, lorsqu’un outil de partage est activé, la lecture vidéo est automatiquement suspendue. Les outils de partage ne sont pas disponibles en mode plein écran en raison des restrictions de sécurité du navigateur Web.

Le lecteur est entièrement accessible au clavier. Voir Accessibilité du clavier et navigation.

Incorporation de la visionneuse de vidéos interactives

La visionneuse de vidéos interactive est conçue pour être intégrée à la page d’hébergement. Une telle page Web peut avoir une mise en page statique, ou elle peut être "adaptée" et s’afficher différemment sur différents périphériques ou pour différentes tailles de fenêtre de navigateur.

Pour répondre à ces besoins, le lecteur prend en charge deux modes de fonctionnement Principaux : incorporation de taille fixe et incorporation réactive.

A propos du mode d'incorporation de taille fixe et du mode d'incorporation de conception réactif

En mode incorporé, le lecteur est ajouté à la page Web existante, qui peut déjà contenir du contenu client qui n’est pas lié au lecteur. En règle générale, le lecteur occupe uniquement une partie de l’espace d’une page Web.

Les cas d'utilisation Principaux sont les pages Web orientées vers les ordinateurs de bureau ou les tablettes, ainsi que les pages adaptées qui ajustent automatiquement la mise en page en fonction du type de périphérique.

L’incorporation de taille fixe est utilisée lorsque la visionneuse ne change pas de taille après le chargement initial. Il s’agit du meilleur choix pour les pages Web présentant une disposition statique.

L’incorporation de la conception réactive suppose que la visionneuse doit peut-être être redimensionnée au moment de l’exécution en réponse au changement de taille de son conteneur DIV. Le cas d’utilisation le plus courant consiste à ajouter une visionneuse à une page Web qui utilise une disposition de page souple.

En mode d’incorporation de conceptions réactives, le lecteur se comporte différemment selon la manière dont la page Web dimensionne son conteneur DIV. Si la page Web ne définit que la largeur du conteneur DIV, en ne limitant pas sa hauteur, le lecteur sélectionne automatiquement sa hauteur en fonction des proportions du fichier utilisé. Cette fonctionnalité permet de s’assurer que la ressource s’intègre parfaitement à la vue sans remplissage sur les côtés. Ce cas d’utilisation est le plus courant pour les pages Web utilisant des structures de mise en page de conception Web réactives telles que Bootstrap, Foundation, etc.

Sinon, si la page Web définit à la fois la largeur et la hauteur du conteneur DIV du lecteur, celui-ci remplit cette zone et suit la taille fournie par la mise en page Web. Un bon exemple est l’incorporation de la visionneuse dans une incrustation modale, où l’incrustation est dimensionnée en fonction de la taille de la fenêtre du navigateur Web.

Incorporation de taille fixe

Pour ajouter la visionneuse à une page Web, procédez comme suit :

  1. Ajouter le fichier JavaScript de la visionneuse sur votre page Web.

  2. Définition du conteneur DIV.

  3. Définition de la taille de la visionneuse.

  4. Création et initialisation de la visionneuse.

  5. Ajouter le fichier JavaScript de la visionneuse sur votre page Web.

    Pour créer une visionneuse, vous devez ajouter une balise de script dans l’en-tête HTML. Avant de pouvoir utiliser l’API du lecteur de contenu, veillez à inclure InterativeVideoViewer.js. Le fichier InteractiveVideoViewer.js se trouve sous le sous-dossier html5/js/ de votre déploiement des visionneuses IS standard :

<s7viewers_root>/etc/dam/viewers/s7viewers/html5/js/InteractiveVideoViewer.js

Vous pouvez utiliser un chemin relatif si la visionneuse est déployée sur l’un des serveurs Dynamic Media Classic de l’Adobe et qu’elle est diffusée à partir du même domaine. Sinon, vous spécifiez un chemin d’accès complet à l’un des serveurs Dynamic Media Classic Adobe sur lesquels les visionneuses IS sont installées.

Le chemin relatif ressemble à ce qui suit :

<script language="javascript" type="text/javascript" src="/etc/dam/viewers/s7viewers/html5/js/InteractiveVideoViewer.js"></script>
REMARQUE

Vous ne devez référencer que le fichier JavaScript du lecteur principal include sur votre page. Vous ne devez pas référencer de fichiers JavaScript supplémentaires dans le code de la page Web qui pourraient être téléchargés selon la logique du lecteur au moment de l’exécution. En particulier, ne référencez pas directement la bibliothèque HTML5 SDK Utils.js chargée par la visionneuse à partir du chemin de contexte /s7viewers (appelé SDK consolidé include). La raison en est que l’emplacement des bibliothèques de lecteurs de contenu d’exécution Utils.js ou similaires est entièrement géré par la logique du lecteur et que l’emplacement change entre les versions du lecteur. Adobe ne conserve pas les anciennes versions du lecteur secondaire includes sur le serveur.

Par conséquent, le fait de placer une référence directe à tout script JavaScript secondaire include utilisé par le lecteur sur la page rompt la fonctionnalité du lecteur à l’avenir lorsqu’une nouvelle version du produit est déployée.

  1. Définition du conteneur DIV.

    Ajoutez un élément DIV vide sur la page dans laquelle vous souhaitez que le lecteur s’affiche. L'identifiant de l'élément DIV doit être défini, car il est transmis ultérieurement à l'API du lecteur de contenu. La taille du DIV est spécifiée par le biais de CSS.

    L’espace réservé DIV est un élément positionné, ce qui signifie que la propriété CSS position est définie sur relative ou absolute.

    Pour que la fonction plein écran fonctionne correctement dans Internet Explorer, assurez-vous qu’aucun autre élément du modèle DOM ne présente un ordre d’empilement supérieur à celui de votre espace réservé DIV.

    Voici un exemple d’élément d’espace réservé défini DIV :

    <div id="s7viewer" style="position:relative"></div>
    
  2. Définition de la taille de la visionneuse

    Vous pouvez définir la taille statique de la visionneuse en la déclarant pour la classe CSS de niveau supérieur .s7interactivevideoviewer en unités absolues ou en utilisant le modificateur stagesize.

    Vous pouvez placer le dimensionnement en CSS directement sur la page HTML ou dans un fichier CSS de visionneuse personnalisée, qui est ensuite affecté à un enregistrement de paramètre prédéfini de visionneuse en AEM Assets - à la demande ou transmis explicitement à l’aide de la commande style.

    Voir Personnalisation de la visionneuse de vidéos interactives pour plus d’informations sur le style de la visionneuse avec CSS.

    Voici un exemple de définition de la taille d’une visionneuse statique dans la page HTML :

    #s7viewer.s7interactivevideoviewer { 
     width: 640px; 
     height: 640px; 
    }
    

    Vous pouvez définir le modificateur stagesize dans l’enregistrement de paramètre prédéfini de la visionneuse à AEM Assets - on-demand. Vous pouvez également le transmettre explicitement avec le code d’initialisation de la visionneuse avec la collection params, ou en tant qu’appel d’API comme décrit dans la section Référence de commande, comme suit :

    interactivevideoviewer.setParam("stagesize", "640,640");
    

    Une approche CSS est recommandée et est utilisée dans cet exemple.

  3. Création et initialisation de la visionneuse.

    Une fois les étapes ci-dessus terminées, vous créez une instance de classe s7viewers.InteractiveVideoViewer, transmettez toutes les informations de configuration à son constructeur et appelez la méthode init() sur une instance de lecteur. Les informations de configuration sont transmises au constructeur sous la forme d’un objet JSON. Au minimum, cet objet doit comporter un champ containerId contenant le nom de l’identifiant de conteneur de la visionneuse et l’objet JSON params imbriqué avec les paramètres de configuration pris en charge par la visionneuse.

    Dans ce cas, l’objet params doit avoir au moins la propriété Image Serving URL transmise en tant que propriété serverUrl et la ressource initiale en tant que paramètre asset. L’API d’initialisation basée sur JSON vous permet de créer et de début la visionneuse avec une seule ligne de code, l’URL du serveur vidéo transmise en tant que propriété videoserverurl, la ressource initiale en tant que paramètre asset et les données interactives en tant que propriété interactivedata. L’API d’initialisation basée sur JSON vous permet de créer et de début le lecteur avec une seule ligne de code.

    Il est important que le conteneur de la visionneuse soit ajouté au modèle DOM afin que le code de la visionneuse puisse trouver l’élément de conteneur en fonction de son identifiant. Certains navigateurs retardent la création du modèle DOM jusqu’à la fin de la page Web. Pour une compatibilité maximale, appelez la méthode init() juste avant la balise de fermeture BODY ou sur le événement body onload().

    Dans le même temps, l’élément conteneur ne doit pas nécessairement faire partie de la mise en page de la page Web pour le moment. Par exemple, il peut être masqué à l’aide du style display:none qui lui est affecté. Dans ce cas, le lecteur retarde son processus d’initialisation jusqu’au moment où la page Web ramène l’élément de conteneur à la mise en page. Cela se produit lorsque le chargement du lecteur reprend automatiquement.

    Voici un exemple de création d’une instance de visionneuse, de transmission des options de configuration minimales nécessaires au constructeur et d’appel de la méthode init(). Cet exemple suppose les éléments suivants :

    • L’instance de lecteur est interactiveVideoViewer.
    • Le nom de l’espace réservé DIV est s7viewer.
    • L’URL de diffusion d’images est https://aodmarketingna.assetsadobe.com/is/image/.
    • L’URL du serveur vidéo est https://gateway-na.assetsadobe.com/DMGateway/public/aodmarketingna.
    • L’URL de contenu est https://aodmarketingna.assetsadobe.com/.
    • La ressource est /content/dam/mac/aodmarketingna/dm-viewers-content/video/Glacier.mp4.
    • Les données interactives sont is/content/content/dam/mac/aodmarketingna/_VTT/dm-viewers-content/video/Glacier.mp4.svideo.vtt.
    <script type="text/javascript"> 
    var interactiveVideoViewer = new s7viewers.InteractiveVideoViewer({ 
     "containerId":"s7viewer", 
    "params":{ 
     "asset":"/content/dam/mac/aodmarketingna/dm-viewers-content/video/Glacier.mp4", 
    "config":"/etc/dam/presets/viewer/Shoppable_Video_Dark", 
     "serverurl":"https://aodmarketingna.assetsadobe.com/is/image/", 
     "videoserverurl":"https://gateway-na.assetsadobe.com/DMGateway/public/aodmarketingna", 
     "contenturl":"https://aodmarketingna.assetsadobe.com/", 
    "interactivedata":"is/content/content/dam/mac/aodmarketingna/_VTT/dm-viewers-content/video/Glacier.mp4.svideo.vtt" 
    } 
    }).init(); 
    </script>
    

    Le code suivant est un exemple complet d’une page Web triviale qui incorpore la visionneuse de vidéos interactive avec une taille fixe :

    <!DOCTYPE html> 
    <html> 
    <head> 
    <script type="text/javascript" src="https://aodmarketingna.assetsadobe.com/etc/dam/viewers/s7viewers/html5/js/InteractiveVideoViewer.js"></script> 
    <style type="text/css"> 
    #s7viewer.s7interactivevideoviewer { 
     width: 640px; 
     height: 480px; 
    } 
    </style> 
    </head> 
    <body> 
    <div id="s7viewer" style="position:relative;"></div> 
    <script type="text/javascript"> 
    var interactiveVideoViewer = new s7viewers.InteractiveVideoViewer({ 
     "containerId":"s7viewer", 
    "params":{ 
     "asset":"/content/dam/mac/aodmarketingna/dm-viewers-content/video/Glacier.mp4", 
    "config":"/etc/dam/presets/viewer/Shoppable_Video_Dark", 
     "serverurl":"https://aodmarketingna.assetsadobe.com/is/image/", 
     "videoserverurl":"https://gateway-na.assetsadobe.com/DMGateway/public/aodmarketingna", 
     "contenturl":"https://aodmarketingna.assetsadobe.com/", 
    "interactivedata":"is/content/content/dam/mac/aodmarketingna/_VTT/dm-viewers-content/video/Glacier.mp4.svideo.vtt" 
    } 
    }).init(); 
    </script> 
    </body> 
    </html>
    

Incorporation de conception réactive avec une hauteur libre

Avec l’incorporation de conceptions réactives, la page Web dispose normalement d’une sorte de disposition souple qui détermine la taille d’exécution du conteneur DIV du lecteur. Pour l’exemple suivant, supposons que la page Web permette au conteneur DIV du lecteur de prendre 40 % de la taille de la fenêtre du navigateur Web, en laissant sa hauteur libre. Le code HTML de la page Web se présenterait comme suit :

<!DOCTYPE html> 
<html> 
<head> 
<style type="text/css"> 
.holder { 
 width: 40%; 
} 
</style> 
</head> 
<body> 
<div class="holder"></div> 
</body> 
</html>

Ajouter le lecteur à une telle page est similaire à la procédure d’incorporation de taille fixe. La seule différence est que vous n’avez pas besoin de définir explicitement la taille de la visionneuse.

  1. Ajouter le fichier JavaScript de la visionneuse sur votre page Web.
  2. Définition de la balise DIV de conteneur.
  3. Création et initialisation de la visionneuse.

Toutes les étapes ci-dessus sont identiques à celles de l’incorporation de taille fixe. Ajoutez le conteneur DIV sur le "holder" DIV existant. Le code suivant est un exemple complet. Notez comment la taille de la visionneuse change lorsque le navigateur est redimensionné et comment les proportions de la visionneuse correspondent à la ressource.

<!DOCTYPE html> 
<html> 
<head> 
<script type="text/javascript" src="https://aodmarketingna.assetsadobe.com/etc/dam/viewers/s7viewers/html5/js/InteractiveVideoViewer.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 interactiveVideoViewer = new s7viewers.InteractiveVideoViewer({ 
 "containerId":"s7viewer", 
"params":{ 
 "asset":"/content/dam/mac/aodmarketingna/dm-viewers-content/video/Glacier.mp4", 
"config":"/etc/dam/presets/viewer/Shoppable_Video_Dark", 
 "serverurl":"https://aodmarketingna.assetsadobe.com/is/image/", 
 "videoserverurl":"https://gateway-na.assetsadobe.com/DMGateway/public/aodmarketingna", 
 "contenturl":"https://aodmarketingna.assetsadobe.com/", 
"interactivedata":"is/content/content/dam/mac/aodmarketingna/_VTT/dm-viewers-content/video/Glacier.mp4.svideo.vtt" 
} 
}).init(); 
</script> 
</body> 
</html>

La page d’exemples suivante illustre d’autres utilisations réelles de l’incorporation de conceptions réactives avec une hauteur libre :

Démonstrations en direct

Incorporation réactive avec définition de largeur et de hauteur

En cas d’incorporation réactive avec définition de la largeur et de la hauteur, le style de la page Web est différent. Il fournit les deux tailles à la balise "holder" DIV et le centre dans la fenêtre du navigateur. En outre, la page Web définit la taille des éléments HTML et BODY sur 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>

Le reste des étapes d'incorporation est identique aux étapes utilisées pour l'incorporation réactive avec une hauteur libre. L’exemple qui en résulte est le suivant :

<!DOCTYPE html> 
<html> 
<head> 
<script type="text/javascript" src="https://aodmarketingna.assetsadobe.com/etc/dam/viewers/s7viewers/html5/js/InteractiveVideoViewer.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 interactiveVideoViewer = new s7viewers.InteractiveVideoViewer({ 
 "containerId":"s7viewer", 
"params":{ 
 "asset":"/content/dam/mac/aodmarketingna/dm-viewers-content/video/Glacier.mp4", 
"config":"/etc/dam/presets/viewer/Shoppable_Video_Dark", 
 "serverurl":"https://aodmarketingna.assetsadobe.com/is/image/", 
 "videoserverurl":"https://gateway-na.assetsadobe.com/DMGateway/public/aodmarketingna", 
 "contenturl":"https://aodmarketingna.assetsadobe.com/", 
"interactivedata":"is/content/content/dam/mac/aodmarketingna/_VTT/dm-viewers-content/video/Glacier.mp4.svideo.vtt" 
} 
}).init(); 
</script> 
</body> 
</html>

Incorporation à l’aide d’une API basée sur Setter

Au lieu d’utiliser l’initialisation basée sur JSON, il est possible d’utiliser une API basée sur un setter et un constructeur sans args. L'utilisation de ce constructeur d'API ne prend aucun paramètre et les paramètres de configuration sont spécifiés à l'aide des méthodes d'API setContainerId(), setParam() et setAsset() avec des appels JavaScript distincts.

L’exemple suivant illustre l’utilisation de l’incorporation de tailles fixes avec l’API basée sur un setter :

<!DOCTYPE html> 
<html> 
<head> 
<script type="text/javascript" src="https://aodmarketingna.assetsadobe.com/etc/dam/viewers/s7viewers/html5/js/InteractiveVideoViewer.js"></script> 
<style type="text/css"> 
#s7viewer.s7interactivevideoviewer { 
 width: 640px; 
 height: 480px; 
} 
</style> 
</head> 
<body> 
<div id="s7viewer" style="position:relative;width:640px;height:360px;"></div> 
<script type="text/javascript"> 
var interactiveVideoViewer = new s7viewers.InteractiveVideoViewer(); 
interactiveVideoViewer.setContainerId("s7viewer"); 
interactiveVideoViewer.setParam("config", "/etc/dam/presets/viewer/Shoppable_Video_Dark"); 
interactiveVideoViewer.setParam("serverurl", "https://aodmarketingna.assetsadobe.com/is/image/"); 
interactiveVideoViewer.setParam("videoserverurl", "https://gateway-na.assetsadobe.com/DMGateway/public/aodmarketingna"); 
interactiveVideoViewer.setParam("contenturl", "https://aodmarketingna.assetsadobe.com/"); 
interactiveVideoViewer.setParam("interactivedata", "is/content/content/dam/mac/aodmarketingna/_VTT/dm-viewers-content/video/Glacier.mp4.svideo.vtt"); 
interactiveVideoViewer.setAsset("/content/dam/mac/aodmarketingna/dm-viewers-content/video/Glacier.mp4"); 
interactiveVideoViewer.init(); 
</script> 
</body> 
</html>

Sur cette page

Adobe Summit Banner

A virtual event April 27-28.

Expand your skills and get inspired.

Register for free
Adobe Summit Banner

A virtual event April 27-28.

Expand your skills and get inspired.

Register for free