Streaming vidéo sur un site web depuis Kontainer

Fonctionnalité Enterprise ou en option

Diffusez des vidéos en streaming directement depuis Kontainer vers vos sites web et vos boutiques en ligne. Découvrez-en plus et lancez-vous dès aujourd'hui. Réservez un rendez-vous avec le Customer Success.

Une fois l'outil de streaming vidéo activé, vous pouvez vous lancer. Suivez les étapes simples ci-dessous pour obtenir un lien d'intégration personnalisé ou configurer un modèle de format vidéo.

Activer le CDN vidéo

Repérez votre fichier vidéo et ouvrez-le en mode galerie. Assurez-vous que la barre d'informations, à droite de l'image, est ouverte, ou ouvrez-la avec l'icône « i » dans la barre de menu du haut.

En bas du menu d'informations, vous trouvez l'option permettant d'activer le CDN vidéo.

Une fois la case Activer cochée, Kontainer commence à convertir le fichier vidéo pour le rendre disponible en différentes tailles. Cela peut prendre quelques minutes : vous pouvez poursuivre vos autres tâches et actualiser la fenêtre pour vérifier si la conversion est terminée.
Activation du CDN vidéo pour le streaming vidéo de Kontainer

Paramètres d'intégration

Lorsque la conversion est terminée, vous obtenez une URL à copier et une option Paramètres d'intégration, qui permet de personnaliser votre lien d'intégration IFRAME ou HTML.

Les options comprennent :

  • la lecture automatique
  • la lecture en boucle
  • le son coupé
  • le masquage des commandes
  • les tailles
  • l'activation du téléchargement (à activer avant d'ouvrir les Paramètres d'intégration)

Paramètres d'intégration du streaming vidéo de Kontainer

Pour faciliter et accélérer le travail de vos collègues et des utilisateurs externes, vous pouvez configurer des préréglages.

Préréglages

Sous Ressources et Préréglages vidéo, vous pouvez configurer vos propres formats de sélection rapide, avec les mêmes options que les paramètres d'intégration.
Paramètres de préréglages pour le streaming vidéo de Kontainer

Copier le lien IFRAME ou HTML

Lorsque vos paramètres vous conviennent, il suffit de copier le lien IFRAME ou HTML et de le coller dans votre site web.
Copie du lien final dans les paramètres d'intégration de l'outil de streaming vidéo de Kontainer
C'est aussi simple que cela.

N'hésitez pas à nous dire comment cela se passe pour vous et à nous poser vos questions. Cliquez ici pour écrire au Customer Success.

Types de fichiers pris en charge

Les types de fichiers suivants sont pris en charge par notre outil de streaming vidéo :

'3gp',
'asf',
'avi',
'avs',
'dv',
'dvd',
'f4v',
'flic',
'flv',
'hevc',
'm1v',
'm2ts',
'm2v',
'm4v',
'm4p',
'mjpeg',
'mkv',
'mov',
'mp2',
'mp4',
'mp4v',
'mpeg',
'mpg',
'mpe',
'mpv',
'mts',
'mxf',
'ogv',
'psp',
'rm',
'swf',
'ts',
'vcd',
'vob',
'webm',
'wmv',
'wtv',

Sous-titres automatiques

Kontainer peut transcrire automatiquement les paroles d'une vidéo et générer des sous-titres, sans que vous ayez à les créer à la main ni à recourir à un autre outil.

Pour lancer la transcription, cliquez sur l'option CC, puis sur Ajouter un sous-titre.

Détection de la langue

La langue parlée peut être détectée automatiquement, ou vous pouvez sélectionner vous-même une langue précise avant de lancer la transcription. Le nombre de langues pour lesquelles vous pouvez générer des sous-titres n'est pas limité.

La fenêtre CC

Une fois qu'une transcription existe, elle se gère depuis la fenêtre CC. Vous pouvez y :

  1. traduire la transcription dans d'autres langues
  2. modifier la transcription (texte et minutage)
  3. télécharger la transcription sous forme de fichier .srt
  4. dupliquer une transcription existante
  5. supprimer les sous-titres de n'importe quelle langue sélectionnée

Une fois la transcription terminée, Kontainer génère automatiquement une piste de sous-titres pour la vidéo.

Sous-titres automatiques générés dans l'outil de streaming vidéo de Kontainer DAM

Téléverser des sous-titres existants

Si vous disposez déjà d'un fichier de sous-titres pour une vidéo, vous pouvez le téléverser directement plutôt que d'en générer un nouveau. Seuls les fichiers .srt sont pris en charge pour le téléversement.

Ajout de sous-titres à des vidéos avec l'outil de streaming vidéo de Kontainer DAM

À noter : les sous-titres ne sont pas activés par défaut pendant la lecture ; les spectateurs doivent les activer depuis le menu à trois points, en bas à droite du lecteur vidéo.

Commandes disponibles du lecteur vidéo

Les développeurs peuvent piloter le lecteur vidéo par programmation en lui envoyant des messages avec postMessage. Le lecteur reçoit ces messages et exécute des actions comme lecture, pause, changement de volume ou plein écran, sans que l'utilisateur ait besoin de cliquer sur le lecteur.

Cela fonctionne même si la vidéo est intégrée dans une autre page ou dans un iframe.

Vous trouverez ci-dessous la liste des commandes disponibles pour le lecteur vidéo :

Commandes de lecture

  • Lecture
    window.postMessage({ type: 'kontainer-video-player', action: 'play' });

  • Pause
    window.postMessage({ type: 'kontainer-video-player', action: 'pause' });

  • Arrêt
    window.postMessage({ type: 'kontainer-video-player', action: 'stop' });

Commandes audio

  • Couper le son
    window.postMessage({ type: 'kontainer-video-player', action: 'mute' });

  • Rétablir le son
    window.postMessage({ type: 'kontainer-video-player', action: 'unmute' });

  • Basculer le son
    window.postMessage({ type: 'kontainer-video-player', action: 'toggleMute' });

  • Régler le volume (0,0 – 1,0)
    window.postMessage({ type: 'kontainer-video-player', action: 'setVolume', data: { volume: 0.5 } });

Position de lecture

  • Se positionner (aller à un instant donné, en secondes)
    window.postMessage({ type: 'kontainer-video-player', action: 'seek', data: { time: 60 } });

Commandes du plein écran

  • Plein écran
    window.postMessage({ type: 'kontainer-video-player', action: 'fullscreen' });

  • Quitter le plein écran
    window.postMessage({ type: 'kontainer-video-player', action: 'exitFullscreen' });

  • Basculer le plein écran
    window.postMessage({ type: 'kontainer-video-player', action: 'toggleFullscreen' });

Qualité vidéo

  • Définir la qualité
    window.postMessage({ type: 'kontainer-video-player', action: 'setQuality', data: { quality: 720 } });

    • 0 = automatique

    • Ou des résolutions précises comme 360, 480, 720, etc.

Cibler un lecteur précis par son identifiant

  • Envoyer une action à une instance de lecteur précise
    window.postMessage({ type: 'kontainer-video-player', action: 'play', targetPlayerId: 'player_12345' });

    À noter : le playerId peut être défini avec le paramètre d'URL ?playerId=votre_identifiant_personnalisé, sinon il est généré à partir de la source de la vidéo.

Utilisation dans des iframes

  • Mêmes commandes, mais les messages sont envoyés au contentWindow de l'iframe.

    Exemple :
    const iframe = document.getElementById('your-iframe-id');

    iframe.contentWindow.postMessage({ type: 'kontainer-video-player', action: 'play' });