Como incorporar o código do reprodutor de vídeo HTML5 DRM no WordPress para o Xvast?

Como incorporar o código do reprodutor de vídeo HTML5 DRM no WordPress para o Xvast?

Para incorporar o reprodutor de vídeo HTML5 DRM da Xvast no WordPress, basta adicionar um pouco de código.

Se não for necessário modificar profundamente o reprodutor, utilize o código abaixo para incorporar o vídeo.

<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>

Caso precise modificar o reprodutor, consulte a introdução a seguir.

Observação: Para iOS, adicione uma div com o valor de id xvast_ios_media_url, oculte a div, escreva a URL do vídeo dentro dela e o Xvast reconhecerá automaticamente a tag, perguntando ao usuário se deseja reproduzir o vídeo. Por exemplo:

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

A versão mais recente do Xvast para iOS contém as seguintes observações sobre URLs de mídia:

Se você deseja que seus clientes reproduzam seus vídeos no iOS, o link deve conter as seguintes características, com o prefixo _P. Por exemplo, o link pode conter _P.mp4, _P.mp3 ou _P.pdf (sem distinção entre maiúsculas e minúsculas). Ou então, deve conter "xvast". Você pode incluir uma dessas características em qualquer lugar do link de download, e o Xvast para iOS reconhecerá e dará suporte aos downloads.

Adicione uma postagem ou página no Painel de Controle do seu site, altere a visualização de edição para "Texto" no editor, copie o código para o editor e clique no botão Publicar. Você pode modificar o código CSS de acordo com suas necessidades (XvastPlay.css).

1. Video-js.css/video.js é o arquivo da biblioteca VideoJS. XvastPlayer.css é o arquivo de estilo adicional do reprodutor de vídeo HTML5. 2. Adicione o botão do player. Se o usuário ainda não tiver obtido uma licença, o botão do player será exibido. Ao clicar nele, o evento JS será executado, redirecionando o usuário para a página de obtenção da licença. Você pode modificar o arquivo XvastPlayer.css de acordo com suas necessidades. 3. Esta parte é um URL de vídeo para reprodução online ou download no iOS. 4. Esta parte é o código do reprodutor HTML5 (VideoJS), que usa JS para detectar se o navegador do usuário é o Xvast; caso contrário, o usuário será solicitado a usar o Xvast para acessar a URL. 5. Esta parte é o botão de controle do player, que, através do código JS, controla o avanço rápido, retrocesso, reprodução, pausa e repetição. (Você pode usá-los se precisar) 6. Código relacionado à detecção da licença do player online Xvast.

Baixe o código de exemplo: www.xvast.com/XvastPlayer/Xvast-demo.html (Os arquivos JS e CSS podem ser baixados e colocados em seu próprio servidor)

<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>