Cómo crear un reproductor de vídeo en HTML5 con controles personalizados

¿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