close

Como usar o JW Player: incorporar e configurar vídeos

O que é o JW Player?

O JW Player é uma ferramenta poderosa e flexível para reproduzir vídeos no seu site. Este guia fornecerá um passo a passo detalhado sobre como usá-lo, incluindo como obter a biblioteca usando uma CDN ou baixando-a.

Como obter a biblioteca do JW Player

Você tem duas opções para obter a biblioteca do JW Player: usar um CDN ou baixá-la para hospedagem local.

1. Usando um CDN(recomendado)

Usar uma CDN(Rede de Distribuição de Conteúdo) é a maneira mais simples e rápida de integrar o JW Player. Uma CDN ajuda a carregar os arquivos mais rapidamente, pois eles estão hospedados em vários servidores ao redor do mundo.

Para usar a CDN, basta adicionar a seguinte linha de código à <head>seção do seu site. Observação: você precisa substituir <YOUR_LICENSE_KEY>pela sua chave de licença atual.

<script src="https://cdn.jwplayer.com/libraries/<YOUR_LICENSE_KEY>.js"></script>

2. Baixando e hospedando localmente

Se você quiser controle total sobre os arquivos e não quiser depender de uma conexão de rede, você pode baixar o JW Player e hospedá-lo em seu próprio servidor.

  1. Acesse o site oficial do JW Player.

  2. Cadastre-se ou faça login na sua conta(um teste gratuito está disponível).

  3. Encontre e baixe a biblioteca no painel da sua conta.

  4. Descompacte o arquivo e carregue a pasta no seu servidor.

Guia detalhado para usar o JW Player

Depois de ter a biblioteca, você pode começar a incorporar o JW Player no seu site.

1. Crie um arquivo HTML e incorpore o JW Player

Aqui está um exemplo completo em HTML. Se estiver usando o CDN, substitua a <script src="...">linha pelo código CDN mencionado acima. Se estiver usando a biblioteca baixada, certifique-se de que o caminho para o jwplayer.jsarquivo esteja correto.

<!DOCTYPE html>  
<html>  
<head>  
    <title>JW Player Example</title>  
    <script src="js/jwplayer.js"></script>  
</head>  
<body>  
  
    <h1>How to Use JW Player</h1>  
  
    <div id="video-container"></div>  
  
    <script>  
        // Initialize and configure JW Player  
        jwplayer("video-container").setup({  
            // The path to your video file  
            "file": "videos/my-video.mp4",  
              
            // The path to your video's thumbnail image  
            "image": "images/my-video-thumbnail.jpg",  
              
            // The dimensions of the player  
            "width": "640",  
            "height": "360",  
              
            // Autoplay the video when the page loads  
            "autostart": false,  
              
            // Show the player controls  
            "controls": true  
        });  
    </script>  
  
</body>  
</html>

2. Explicação detalhada do código

  • <script src="...">: Esta linha vincula a biblioteca do JW Player ao seu site.

  • <div id="video-container"></div>: É aqui que o vídeo será exibido. Você pode escolher o nome que idquiser, mas certifique-se de que ele corresponda ao nome usado na jwplayer()função.

  • jwplayer("video-container").setup({...}): É aqui que você inicializa e configura o JW Player.

    • "file": O caminho para seu arquivo de vídeo.

    • "image": O caminho para a imagem em miniatura do vídeo.

    • "width"e "height": define as dimensões do player. Você também pode usar "100%"para um player responsivo.

    • "autostart": Defina truese quiser que o vídeo seja reproduzido automaticamente.

    • "controls": Defina falsese quiser ocultar os controles do player.

Com este guia detalhado, você pode facilmente começar a usar o JW Player para exibir vídeos em seu site.