Contacter le support | État du système
Contenu de la page

    Choisir le bon code d'intégration

    Cette rubrique fournit une vue d'ensemble des types de code d'intégration disponibles lors de la publication de vidéos à l'aide de Brightcove Player.

    Lorsque vous publiez des vidéos à l'aide du module Media, vous pouvez utiliser l'URL du lecteur pour prévisualiser la vidéo ou copier le code d'intégration iframe ou In-Page à coller dans votre page Web ou application.

    Le lien Standard affiche le code d'intégration iframe et le lien Avancé affiche le code d'intégration dans la page. Du point de vue de l'API de gestion des lectuers, vous verrez également le Avancée code du lectuer appelé le embed_in_page la mise en oeuvre.

    code d'intégration iFrame (Standard)

    Le code intégré iframe typique apparaîtra comme suit :

    <iframe src="https://players.brightcove.net/1507807800001/BkTGbgSq_default/index.html?videoId=5076962725001"
    allowfullscreen
    webkitallowfullscreen
    mozallowfullscreen></iframe>
    
    

    Quelques avantages de l'utilisation du code d'intégration iframe

    • Aucune collision avec JavaScript et/ou CSS existants
    • Réactif automatiquement
    • L'iframe facilite l'utilisation dans les applications de médias sociaux ou chaque fois que la vidéo devra être utilisée dans un environnement extérieur ; par exemple, Facebook perçoit que la menace de sécurité est beaucoup moins importante lorsque l'iframe est utilisé que la mise en place de l'option <video> balise et JavaScript associé sur leur site (ce que Facebook n'autorise pas)

    Code d'intégration dans la page (Avancé)

    Le code d'intégration typique dans la page apparaîtra comme suit :

    <video data-video-id="5076962725001" 
    data-account="1486906377" 
    data-player="default" 
    data-embed="default" 
    data-application-id 
    class="video-js" 
    controls></video>
    <script src="//players.brightcove.net/1486906377/default_default/index.min.js"></script>
    

    Bien que l'intégration du code de publication dans la page puisse être plus complexe, il est préférable d'utiliser le code In-Page lorsque la page contenant le lecteur doit communiquer avec le lecteur. Voici quelques exemples d'utilisation du code d'intégration In-Page :

    • Le code de la page contenant doit écouter et agir sur les événements du lectuer
    • Le lecteur utilise des styles de la page parent
    • Le code iframe entraînera l'échec de la logique de l'application, comme une redirection à partir de la page parent

    Même si votre implémentation finale n'utilise pas le code intégré iframe, vous pouvez toujours utiliser le code In-Page avec un plugin pour votre JavaScript et un fichier séparé pour votre CSS. Cela encapsule votre logique afin que vous puissiez facilement l'utiliser dans plusieurs lectuers.

    Chrome et icône vidéo HTML « cassée »

    Chrome versions 67+ affichera une icône vidéo cassée momentanément jusqu'à ce que la <video ...> balise soit convertie en un lecteur Brightcove. L'icône apparaît comme suit :

    chrome broken video icon

    Si vous utilisez Brightcove Player version 6.11+, vous modifiez le video tag à <video-js ...> et vous ne verrez PAS l'icône.

    Recommandation

    Il est recommandé d'utiliser l'implémentation iframe (Standard), sauf si une logique d'application nécessite l'utilisation du code sur la page. Si vous utilisez le module Campagne pour suivre l'engagement des spectateurs, le code d'intégration In-Page (Avancé) doit être utilisé.


    Dernière mise à jour de la page le 20 Apr 2021