Déploiement de vidéos sur vos sites Web et sites mobiles

Les sites Web, les sites mobiles et les applications de bureau accèdent au contenu des serveurs Scene7, notamment aux vidéos, au moyen de chaînes d’URL ou du code intégré. Scene7 active ces chaînes URL pendant le processus de publication. Pour placer la chaîne d’URL ou le code intégré de la vidéo dans vos pages Web, pages mobiles et applications de bureau, copiez-les depuis Scene7 Publishing System.

Important : l’URL ou le code intégré n’est actif(ve) qu’une fois le fichier publié.

Publication des vidéos

La publication d’une vidéo permet aux serveurs Scene7 de diffuser cette vidéo sur votre site Web, site mobile ou application.

Deux méthodes peuvent être utilisées pour publier la vidéo :

  • Publication de vidéos automatiquement et immédiatement lors du transfert

    Dans le cadre du processus de transfert vidéo, Scene7 peut automatiquement publier des vidéos lorsqu’elles sont transférées et codées. Cette capacité de publication instantanée signifie qu’il n’est pas nécessaire de publier les vidéos séparément après coup.

  • Publication d’une vidéo manuellement après le transfert

    Si vous ne souhaitez pas publier les vidéos immédiatement, vous pouvez les publier manuellement à tout moment.

Une fois que vous avez publié des vidéos, Scene7 Publishing System active les chaînes URL du code HTML de vos pages ou de votre application.

Publication d’une vidéo

Effectuez l’une des opérations suivantes :

  • Pour publier des vidéos automatiquement et immédiatement lors du transfert, dans l’écran de téléchargement, cliquez sur Publier après le téléchargement . Vous avez terminé ; il ne reste plus aucune étape à exécuter.

  • Pour publier manuellement les vidéos après le téléchargement, dans le panneau de navigation, sélectionnez-les, puis sur la barre de navigation globale, cliquez sur Publier .

Liaison d’une URL de vidéo à un site Web ou un site mobile

Après avoir publié une vidéo, vous pouvez obtenir son URL en vue de l’utiliser sur un site Web, un site mobile ou dans une application de bureau. Utilisez l’URL de la vidéo lorsque vous souhaitez afficher la vidéo dans une fenêtre contextuelle ou modale au haut de la page Web.

Lorsqu’un utilisateur clique sur le lien, son périphérique, sa bande passante et la taille de son écran sont automatiquement détectés. S’il s’agit d’un ordinateur, la vidéo adéquate s’affiche dans une visionneuse prédéfinie ; dans le cas d’un smartphone ou d’une tablette, elle s’affiche dans le lecteur vidéo natif du périphérique en question.

Voir aussi Intégration de la visionneuse de vidéos sur une page Web .

Liaison d’une URL de vidéo à un site Web ou à un site mobile

  1. Dans la liste déroulante Afficher du panneau de navigation des fichiers, cliquez sur Vidéo ou sur Visionneuse de vidéos adaptative .

  2. Dans le panneau Bibliothèque de fichiers sur la gauche, accédez au dossier Fichiers qui contient la vidéo ou la vidéo adaptative que vous souhaitez lier.

  3. Au-dessus du panneau de navigation dans les fichiers, à droite de la barre d’outils, effectuez l’une des opérations suivantes :

    • Cliquez sur Affichage de la grille ou Affichage par liste . Dans le panneau de navigation des fichiers, cliquez deux fois sur la miniature vidéo d’un fichier pour l’ouvrir en mode Affichage des détails. Dans le panneau des URL et du code intégré sur la droite, sous Diffusion en flux continu HTTP, cliquez sur Copier l’URL à droite de la visionneuse appropriée. En règle générale, il est recommandé de copier l’URL associée à la visionneuse Universal_HTML5_Video .

    • Cliquez sur Affichage de la grille . Dans le panneau de navigation dans les fichiers, sélectionnez un fichier, puis sous l’image miniature, cliquez sur Prévisualiser > Liste des visionneuses .

      Dans la page Liste des visionneuses, dans la colonne Actions du tableau, cliquez sur Copier l’URL . En règle générale, il est recommandé de copier l’URL associée à la visionneuse Universal_HTML5_Video .

    • Cliquez sur Affichage par liste . Dans le panneau de navigation dans les fichiers, sélectionnez un fichier, puis à droite de l’image miniature, cliquez sur Prévisualiser > Liste des visionneuses .

      Dans la page Liste des visionneuses, dans la colonne Actions du tableau, cliquez sur Copier l’URL . En règle générale, il est recommandé de copier l’URL associée à la visionneuse Universal_HTML5_Video .

    • Cliquez sur Affichage de la grille , Affichage par liste ou Affichage des détails . Dans la même barre d’outils, cliquez sur Prévisualiser > Liste des visionneuses .

      Dans la page Liste des visionneuses, dans la colonne Actions du tableau, cliquez sur Copier l’URL . En règle générale, il est recommandé de copier l’URL associée à la visionneuse Universal_HTML5_Video .

  4. Collez l’URL de vidéo HTML5 sur vos sites Web et mobile.

Intégration de la visionneuse de vidéos sur une page Web

Utilisez la fonction Intégrer le code lorsque vous souhaitez lire la vidéo incorporée sur une page Web. Vous copiez le code intégré dans le Presse-papiers afin de pouvoir le coller dans vos pages Web. Vous ne pouvez pas modifier le code dans la boîte de dialogue Code intégré.

Voir aussi Liaison d’une URL de vidéo à un site Web ou un site mobile .

Incorporation de la visionneuse de vidéos sur une page Web

  1. Dans la liste déroulante Afficher du panneau de navigation des fichiers, cliquez sur Vidéo ou sur Visionneuse de vidéos adaptative .

  2. Dans le panneau Bibliothèque de fichiers sur la gauche, accédez au dossier Fichiers qui contient la vidéo ou la visionneuse de vidéos adaptative dont vous voulez copier le code intégré.

  3. Au-dessus du panneau de navigation dans les fichiers, à droite de la barre d’outils, effectuez l’une des opérations suivantes :

    • Cliquez sur Affichage de la grille ou Affichage par liste . Dans le panneau de navigation des fichiers, cliquez deux fois sur la miniature vidéo d’un fichier pour l’ouvrir en mode Affichage des détails. Dans le panneau des URL et du code intégré sur la droite, sous Diffusion en flux continu HTTP, cliquez sur Intégrer le code à droite de la visionneuse appropriée. En règle générale, il est recommandé de cliquer sur Intégrer le code associé à la visionneuse Universal_HTML5_Video .

    • Cliquez sur Affichage de la grille . Dans le panneau de navigation dans les fichiers, sélectionnez un fichier, puis sous l’image miniature de vidéo, cliquez sur Prévisualiser > Liste des visionneuses .

      Dans la page Liste des visionneuses, dans la colonne Actions du tableau, cliquez sur Code intégré . En règle générale, il est recommandé de cliquer sur Intégrer le code associé à la visionneuse Universal_HTML5_Video .

    • Cliquez sur Affichage par liste . Dans le panneau de navigation dans les fichiers, sélectionnez un fichier, puis à droite de l’image miniature, cliquez sur Prévisualiser > Liste des visionneuses .

      Dans la page Liste des visionneuses, dans la colonne Actions du tableau, cliquez sur Code intégré . En règle générale, il est recommandé de cliquer sur Intégrer le code associé à la visionneuse Universal_HTML5_Video .

    • Cliquez sur Affichage de la grille , Affichage par liste ou Affichage des détails . Dans la même barre d’outils, cliquez sur Prévisualiser > Liste des visionneuses .

      Dans la page Liste des visionneuses, dans la colonne Actions du tableau, cliquez sur Code intégré . En règle générale, il est recommandé de cliquer sur Intégrer le code associé à la visionneuse Universal_HTML5_Video .

  4. Dans la boîte de dialogue Code intégré, cliquez sur Copier dans le Presse-papiers .

    Vous ne pouvez pas modifier le code dans la boîte de dialogue Code intégré.

  5. Cliquez sur Fermer .

  6. Collez le code intégré dans vos pages Web.

Mise en œuvre du code intégré pour utiliser une vidéo HTML5 avec des ressources vidéo MP4 et OGG

Si vous n’utilisez pas le lecteur vidéo HTML5 de Scene7, mais souhaitez plutôt utiliser la balise <video> HTML5 native avec des fichiers vidéo MP4 et OGG, vous pouvez utiliser l’exemple de code intégré suivant : 

<video poster="S7 video thumbnail URL" controls> 
        <source src="S7 OGG video asset URL (no player)" type='video/ogg; codecs="theora, vorbis"'/> 
        <source src="S7 MP4 mobile progressive video asset URL (no player)" type='video/mp4; codecs="avc1.4D401E, mp4a.40.2"'/> 
        <p>This is fallback content</p> 
</video>

Déploiement d’une vidéo à l’aide d’un lecteur vidéo tiers

Si vous utilisez un lecteur vidéo tiers ou un lecteur vidéo intégré personnalisé au lieu d’une visionneuse Scene7, vous pouvez obtenir l’URL directe de la vidéo pour le téléchargement progressif ou en flux continu de vidéos à débit multiple HTTP et iOS.

Déploiement d’une vidéo à l’aide d’un lecteur vidéo tiers

  1. Dans SPS (Scene7 Publishing System), sur la barre de navigation générale, cliquez sur Configuration > Configuration de l’application > Paramètres généraux .

  2. Selon le type d’URL à utiliser, effectuez l’une des opérations suivantes :

Génération d’une URL directe de vidéo en flux continu HTTP pour ordinateur de bureau (débit multiple)

  1. Sur la page Paramètres généraux de l’application , dans le groupe Serveurs , dans le champ Nom du serveur publié , générez l’URL directe selon la syntaxe suivante :

    serveur/is/content/société/dossier/nom_fichier.f4m

    Supposons, par exemple, que le nom du serveur publié est http://s7d9.scene7.com/ . En utilisant la syntaxe de l’étape 2, l’URL directe ressemblerait à ce qui suit :

  2. http://s7d9.scene7.com/is/content/GeoRetail/AdobeRIA-AVS.f4m

Génération d’une URL directe de vidéo en flux continu iOS (débit multiple)

Sur la page Paramètres généraux de l’application , dans le groupe Serveurs , dans le champ Nom du serveur publié , générez l’URL directe selon la syntaxe suivante :

serveur/is/content/société/dossier/nom_fichier.m3u8

Supposons, par exemple, que le nom du serveur publié est http://s7d9.scene7.com/ . En utilisant la syntaxe de l’étape 2, l’URL directe ressemblerait à ce qui suit :

http://s7d9.scene7.com/is/content/GeoRetail/AdobeRIA-AVS.m3u8

Génération d’une URL directe de vidéo en flux continu HTTP pour ordinateur de bureau (débit unique)

  1. Sur la page Paramètres généraux de l’application , dans le groupe Serveurs , dans le champ Nom du serveur de flux continu iOS , remplacez hls/vod par hds/vod dans le nom du serveur.

  2. Générez l’URL eVideo directe selon la syntaxe suivante :

    serveur/société/dossier/nom_fichier.ext.f4m

    Par exemple, avec la syntaxe ci-dessus, une URL eVideo directe ressemblerait à ce qui suit :

    http://s7mbrstream.scene7.com/hds-vod/eVideoQA/MBR/ToyStory3_Teaser1_High_iPad_768x432_1296K.mp4.f4m

Génération d’une URL directe de vidéo en flux continu iOS (débit unique)

Sur la page Paramètres généraux de l’application , dans le groupe Serveurs , dans le champ Nom du serveur de flux continu iOS , combinez serveur/société/dossier/nom_fichier.ext.m3u8 au nom du serveur de flux continu iOS.

Supposons par exemple que le nom du serveur de flux continu iOS est http://s7mbrstream.scene7.com/hls-vod/ . En utilisant la syntaxe de l’étape 2, l’URL eVideo directe ressemblerait à ce qui suit :

http://s7mbrstream.scene7.com/hls-vod/eVideoQA/MBR/ToyStory3_Teaser1_High_iPad_768x432_1296K.mp4.m3u8

Génération d’une URL de vidéo progressive directe

Sur la page Paramètres généraux de l’application , dans le groupe Serveurs , dans le champ Nom du serveur de vidéo progressive , générez l’URL eVideo directe selon la syntaxe suivante :

serveur/société/dossier/nom_fichier

Supposons, par exemple, que le nom du serveur de vidéo progressif est http://s7d9.scene7.com/e2/ . En utilisant la syntaxe de l’étape 2, l’URL eVideo directe ressemblerait à ce qui suit :

http://s7d9.scene7.com/e2/GeoRetail/SourceVideo/outdoors.mp4

Utilisation de miniatures de vidéo

Scene7 crée des miniatures pour les découpes vidéo, les vidéos codées et les vidéos précodées. Vous pouvez utiliser des miniatures vidéo comme n’importe quelle autre image. Vous pouvez par ailleurs obtenir des URL pour les miniatures vidéo créées par Scene7 et les déployer en dehors de SPS. Vous pouvez, par exemple, déployer les miniatures dans des résultats de recherche, des listes de vidéos correspondantes et des listes de lecture vidéo sur un site Web.

Les miniatures sont générées en fonction de la première image hétérogène (pas une image toute noire, toute blanche, etc.) de la vidéo.

Voir aussi Découpe vidéo .

Obtention d’URL de miniatures vidéo

Scene7 crée automatiquement des miniatures vidéo pendant le processus de téléchargement. Ces miniatures apparaissent dans le panneau de navigation en mode Affichage de la liste et Affichage de la grille.

Pour générer des URL de miniatures vidéo, effectuez une opération de publication.

Voir Publication des vidéos .

Une fois la publication terminée, vous pouvez obtenir des URL de miniatures vidéo en mode Affichage des détails dans le panneau URL et Code intégré. Cliquez sur Copier l’URL à droite de la miniature vidéo pour copier son URL.

Modification de cadres d’affiche dans des visionneuses de vidéos

Le cadre d’affiche est la première image qui apparaît dans les visionneuses de vidéos avant que ne commence la lecture de la vidéo. Scene7 utilise des miniatures vidéo en tant que cadres d’affiche.

Vous pouvez appliquer des modificateurs d’image au cadre d’affiche. Vous pouvez, par exemple, rogner le cadre d’affiche ou le rendre transparent. Pour modifier le cadre d’affiche, ouvrez l’écran de configuration de la visionneuse de vidéos et saisissez les modificateurs dans la section Poster Image Modifiers (Modificateurs de l’image d’affiche).

Voir Ajout ou modification d’un paramètre prédéfini de visionneuse de vidéos .

Voir www.adobe.com/go/learn_s7_image_server_guide_fr .

Vous pouvez également modifier des miniatures vidéo en ajoutant des modificateurs aux URL de miniature vidéo.