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
E no código Javascript implementamos a tag src usando setAttribute
Após isso o elemento fica assim
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...
Pronto, agora podemos criar as funções do nosso player
Após isso é só criar os elementos que ativarão cada função, exemplo:
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...
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>
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>
Código HTML:
vid.controls = false;
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 }
Código HTML:
<input type="button" value="STOP" onclick="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...
Comment