Como hacer play y pause a vídeo en html5

Ejemplo de como hacer play y pause a un vídeo insertado en html5. Como vemos a continuación cargamos un vídeo con la etiqueta audio de html5 y mediante unos botones hacemos play y pause, para ello utilizamos un par de funciones javascript super sencillas.

Estas son las funciones y el selector del elemento vídeo:

<script> 
var vid = document.getElementById("myVideo"); 

function playVid() { 
    myVideo.play(); 
} 

function pauseVid() { 
    myVideo.pause(); 
} 
</script>

Ahora el ejemplo completo, copia y pega para probarlo:

<!DOCTYPE html> 
<html> 
<body> 

<button onclick="playVid()" type="button">Play Video</button>
<button onclick="pauseVid()" type="button">Pause Video</button><br> 

<video id="myVideo" width="320" height="176">
  <source src="http://www.w3schools.com/tags/mov_bbb.mp4" type="video/mp4">
  <source src="http://www.w3schools.com/tags/mov_bbb.ogg" type="video/ogg">
  Your browser does not support HTML5 video.
</video>

<script> 
var vid = document.getElementById("myVideo"); 

function playVid() { 
    myVideo.play(); 
} 

function pauseVid() { 
    myVideo.pause(); 
} 
</script> 

</body> 
</html>

Demo
Editado

5
Puntos

8592
Visitas

2
Resp

Por alber hace 10 años

Admin

Respuesta #1

Ya que creas la variable "vid" sería mejor usarla ¿no?.

Con vid.play() y vid.pause().

Es solo un pequeño apunte. Como está funciona bien.

Saludos

0
Puntos

Por alberz hace 10 años

Novice

Respuesta #2

alberz dijo:
Ya que creas la variable "vid" sería mejor usarla ¿no?.

Con vid.play() y vid.pause().

Es solo un pequeño apunte. Como está funciona bien.

Saludos

Eso mismo eh pensado yo xd, pero bueno es un tema traducido a español de w3schools.com, supongo que si lo publicaron así es para tener mas de una opción para ejecutar los eventos.

Tu comentario servirá como aporte extra, saludos tocayo..

0
Puntos

Por alber hace 10 años

Admin