Unconfigured Ad Widget

Collapse

Anúncio

Collapse
No announcement yet.

Manipulando vídeos HTML5 com JS

Collapse
X
 
  • Filter
  • Tempo
  • Show
Clear All
new posts

  • Font Size
    #1

    Tutorial Manipulando vídeos HTML5 com JS

    Olá, este tutorial mostra como manipular um vídeo HTML5 utilizando JavaScript puro.
    Utilizando Javascript é possivel utilizar botões personalizados, e assim criar o seu próprio player de vídeo.

    Iremos começar criando a tag SRC, que define o caminho do vídeo, como no exemplo:

    Criamos o elemento "video" com a id: meuVideo
    Código HTML:
    <video id="meuVideo"></video>
    E no código Javascript implementamos a tag src usando setAttribute
    Código HTML:
    var vid = document.querySelector('#meuVideo'); // Cria a variável vid para manipular o id meuVideo
    
    function suaFuncao(){ // Cria a função 
     vid.setAttribute('src', '/videos/url_do_video20'); // Cria a tag src com o caminho /videos/url_do_video.mp20
    }

    Após isso o elemento fica assim
    Código HTML:
    <video id="meuVideo" src="url_do_video.mp20"></video>
    Agora que temos um vídeo já disponível, vamos esconder os controles padrões do navegador para que possamos utilizar os controles que vamos criar...
    Código HTML:
    vid.controls = false;
    Pronto, agora podemos criar as funções do nosso player
    Código:
    function PlayPause(){ // Essa função identifica se esta pausado ou não, funciona como play e também como pause.
    
     if(vid.paused == false){ // Cria a condição se vid.paused tem valor false, ou seja se não estiver pausado.
     vid.pause(); // se não estiver pausado, pausa
    }else{
     vid.play(); // Se estiver pausado dá play
    }
    
    }
    
    
    function stop(){ // Essa função pausa o vídeo e retorna a execução para 0
     vid.pause(); // pausa o vídeo
     vid.currentTime = 0; // Volta para o ponto inicial do vídeo
    }
    
    
    // Alterando o volume
    function volMenos(){
     vid.volume = vid.volume - 0.2; // Abaixa o volume em 20%
    }
    
    function volMais(){
     vid.volume = vid.volume + 0.2; // Aumenta o volume em 20%
    }
    
    
    // Alterando a posição atual
    function pula(){
     vid.currentTime = vid.currentTime + 3; // Pula o vídeo 3 segundos à frente
    }
    function volta(){
     vid.currentTime = vid.currentTime - 3; // Volta o vídeo 3 segundos à frente
    }
    Após isso é só criar os elementos que ativarão cada função, exemplo:
    Código HTML:
    <input type="button" value="STOP" onclick="stop();">
    Para dar stop...

    Lembrando que existem outros métodos e eventos para áudio e vídeo, estes são apenas alguns exemplos mais usados!
    Você pode conferir o material completo oficial da Apenas usuários registrados e ativados podem ver os links., Clique aqui para se cadastrar...

    Engenharia Social - Web Design - Programmer
    __________________________________________________ __________

    sigpic
    Similar Threads

  • Font Size
    #2
    muito obrigado

    Comment

    X
    Working...
    X