Vídeos em HTML

O elemento HTML <video> é utilizado para incorporar conteúdo de vídeo em um documento HTML ou XHTML. Neste post veja vídeos em HTML.

<video id="meuVideo" width="800" height="450" controls>
<source src="https://www.criandobits.com.br/cachorro-mil-grau.mp4" type="video/mp4">
<video>

Para criar os botões de play e pause:

<!-- Botões -->
  
 <div>
   <button wm-play="meuVideo">Play</button>
   <button wm-pause="meuVideo">Pause</button>
 </div>
 
  <!-- Script para impedir o download do vídeo -->
  
 <script>
   function configurarVideo(id) {
    const video = document.getElementById(id) //pega tag vídeo
    video.oncontextmenu = () => false //impede que seja feito download do vídeo com o botão direito do mouse
	   
    document.querySelector(`[wm-play=${id}]`).onclick = e => video.play()
    document.querySelector(`[wm-pause=${id}]`).onclick = e => video.pause()
   }
   
   configurarVideo('meuVideo')
 </script> 

Para exibir o player:

<video id="meuVideo" width="800" height="450" controls="">
<source src="https://www.meusite.com.br/meuvideo.mp4" type="video/mp4">
<video></video></video>

Dúvidas ou sugestões? Deixem nos comentários! Para mais dicas, acesse o nosso canal no YouTube:
https://youtube.com/criandobits