Comment intégrer le code du lecteur vidéo HTML5 DRM dans WordPress pour Xvast ?

Comment intégrer le code du lecteur vidéo HTML5 DRM dans WordPress pour Xvast ?

Pour intégrer le lecteur vidéo HTML5 DRM de Xvast dans WordPress, il vous suffit d'ajouter un peu de code.

Si vous n'avez pas besoin de modifier profondément le lecteur, veuillez utiliser le code ci-dessous pour intégrer la vidéo.

<div id="Xvast_Video_URL" style="display: none;none;">https://www.drm-x.com/download/DRMX4/JesusFilm_cn_P.mp4</div>
<script type="text/javascript" src="https://www.xvast.com/dist/js/embedPlayer.js"></script>
<script type="text/javascript" src="https://www.xvast.com/dist/js/video.js"></script>
<script type="text/javascript" src="https://www.xvast.com/dist/wordpress/XvastVideoJSPlayer.js"></script>

Si vous devez modifier le lecteur, veuillez vous référer à l'introduction suivante.

Note: Pour iOS, veuillez ajouter une balise div avec l'identifiant xvast_ios_media_url, masquer cette balise, puis y insérer l'URL de la vidéo. Xvast reconnaîtra automatiquement la balise et demandera à l'utilisateur s'il souhaite lire la vidéo. Exemple :

<div id="xvast_ios_media_url" style="display: none;">https://www.drm-x.com/download/drmx4/JesusFilm_cn_P.mp4</div>

Notes relatives à l'URL des médias dans la dernière version de Xvast pour iOS :

Pour que vos clients puissent lire vos vidéos sur iOS, votre lien doit comporter les caractéristiques suivantes, précédées de _P. Par exemple, le lien doit contenir _P.mp4, _P.mp3 ou _P.pdf (sans distinction de casse). Il doit également contenir xvast. Vous pouvez inclure l'une de ces caractéristiques à n'importe quel endroit du lien de téléchargement ; Xvast pour iOS reconnaîtra alors et prendra en charge les téléchargements.

Veuillez ajouter un article ou une page dans le panneau de contrôle de votre site web, basculez le mode d'édition sur « Texte » dans l'éditeur, copiez le code et cliquez sur le bouton Publier. Vous pouvez modifier le code CSS selon vos besoins (XvastPlay.css).

1. Video-js.css/video.js est le fichier de bibliothèque VideoJS. XvastPlayer.css est le fichier de style supplémentaire du lecteur vidéo HTML5. 2. Ajoutez le bouton « Lecteur ». Si l'utilisateur ne possède pas encore de licence, ce bouton s'affichera. En cliquant dessus, il sera redirigé vers la page de demande de licence. Vous pouvez modifier le fichier XvastPlayer.css selon vos besoins. 3. Cette partie est une URL vidéo pour une lecture en ligne ou un téléchargement sur iOS. 4. Cette partie correspond au code du lecteur HTML5 (VideoJS), qui utilise JS pour détecter si le navigateur de l'utilisateur est Xvast ; si ce n'est pas le cas, il invitera l'utilisateur à utiliser Xvast pour accéder à l'URL. 5. Cette partie correspond aux boutons de contrôle du lecteur. Grâce au code JS, elle permet de gérer l'avance rapide, le retour en arrière, la lecture, la pause et la relecture. (Vous pouvez les utiliser si nécessaire.) 6. Code relatif à la détection de la licence du joueur en ligne Xvast.

Télécharger un exemple de code : www.xvast.com/XvastPlayer/Xvast-demo.html (Les fichiers JS et CSS peuvent être téléchargés et placés sur votre propre serveur)

<link rel="stylesheet" type="text/css" href="https://www.xvast.com/XvastPlayer/css/video-js.css" />
<link rel="stylesheet" type="text/css" href="https://www.xvast.com/XvastPlayer/css/XvastPlay.css" />
<script src="https://www.xvast.com/XvastPlayer/js/video.js" type="text/javascript" charset="utf-8"></script>
<!--<link rel="stylesheet" type="text/css" href="https://www.xvast.com/XvastPlayer/css/skin/TechSkin-skin.css" />-->
<div id="LoadingText" style="display: none;" align="center">
	Please wait, connecting to obtain license page...'
</div>
<div align="center" style="margin-top: 10px">

    <div id="playerButton" style="display: none;">
        <button onclick="supportType(event,'video/ogg','theora, vorbis')" class="playerButton" type="button">Get License...</button>
    </div>
    
	<p><a href="https://www.drm-x.com/download/drmx4/JesusFilm_en_P.mp4">Play MP4 online in iOS</a></p>
    
  <script type="text/javascript">
        if(navigator.userAgent.indexOf("Xvast") == -1){
            document.write("Please open the protected files in Xvast browser. Download Xvast");
        }else{
            document.write(' <video id="xvast_player" controls="controls" src="https://www.drm-x.com/download/drmx4/JesusFilm_en_P.mp4" class="video-js" data-setup=\{ "autoplay":false, "playbackRates": [0.5, 0.7, 1, 1.5, 2, 3, 4], "width": 856, "height": 480 }\'>');
        }'
    </script>
    
</div>
<div id="buttonbar" align="center">
    <button id="restart" onclick="restart();">[]</button><button id="rew" onclick="skip(-5)"></button><button id="play" onclick="vidplay()"></button><button id="fastFwd" onclick="skip(5)"></button>
</div>
<script src="https://www.xvast.com/XvastPlayer/js/XvastPlay.js" type="text/javascript" charset="utf-8"></script>