¿Estás buscando un reproductor de vÃdeo sencillo para embeber un vÃdeo en tu sitio web? Mediante HTML5 puedes implementar de forma sencilla un reproductor de vÃdeo en tu sitio web. No necesitas utilizar ningún plugin de jQuery para ello, ni ningún archivo Flash. El elemento <video> de HTML5 nos proporciona un método estándar de embeber un archivo de vÃdeo en nuestro sitio web.
El siguiente código HTML muestra un reproductor de vÃdeo en una página web:
<video width="520" height="250" controls> <source src="videos/video.mp4" type="video/mp4"> Tu navegador no soporta los vÃdeos de HTML5 </video>
- El atributo controls añade controles a tu vÃdeo como el botón de reproducir, pausar, pantalla completa, volumen, etc.
- Debes incluir el ancho y el alto de tu vÃdeo para especificar el tamaño del vÃdeo
- También es muy buena idea incluir un mensaje para todos aquellos navegadores que no soporten el elemento <video>, como pueden ser los navegadores antiguos. El texto entre los tags <video> y </video> se mostrará cuando el navegador no soporte el vÃdeo de HTML5.
El atributo autoplay se utilizar para que comience el vÃdeo automáticamente. Para que comience el vÃdeo cuando la web haya cargado, pon el atributo autoplay dentro del elemento <video>.
<video width="520" height="250" controls autoplay> <source src="videos/video.mp4" type="video/mp4"> Tu navegador no soporta los vÃdeos de HTML5 </video>
Controles personalizados para el reproductor de vÃdeo de HTML5
HTML5 cuenta con propiedades DOM, eventos y métodos que te permite definir los controles para el reproductor de vÃdeo que estamos creando. Mediante estos controles personalizados, podemos añadir y modificar los botones que acompañarán a nuestro reproductor e incluso agregar una imagen al vÃdeo.
En el siguiente ejemplo, hemos implementado unos cuantos controles personalizados mediante Javascript. Puedes ampliar todas estas funcionalidades mediante tus propios controles.
HTML
<button onclick="playPause()">Reproducir/Pausar</button> <button onclick="reload()">Recargar</button> <button onclick="makeLarge()">Maximizar</button> <button onclick="makeSmall()">Minimizar</button> <button onclick="makeNormal()">Normal</button> <br><br> <video id="videoPlayer" width="500"> <source src="videos/video.mp4" type="video/mp4"> Tu navegador no soporta el vÃdeo de HTML5 </video>
Javascript
<script> var video = document.getElementById("videoPlayer"); function playPause() { if (video.paused) video.play(); else video.pause(); } function reload() { video.load(); } function makeLarge() { video.width = 1000; } function makeSmall() { video.width = 250; } function makeNormal() { video.width = 500; } </script>
Fuente: codexworld.com