Video con Boton de Play Personalizado

Hola, hoy les voy a presentar como ejecutar un video en HTML 5 con un texto por encima usando un botón para controlar el video.

Aqui le dejo el video en caso de que deseen seguirlo en vez de leer post.

El contenido HTML

Lo primero para comenzar sera crear el codigo HTML5 que va a incluir el video y un texto por encima. Ademas de un boton que, por medio de javascript, nos permitira controlar el video. Sin mas aqui esta el codigo HTML.

<div class="thevideo">
        <video src="assets/video.mp4" poster="assets/video_Moment.jpg" width="100%" id="myvideo"></video>
        <div class="txt-cont">
            <div class="txt-video">
                <h1>Titulo del Video o Promocion</h1>
                <p>Informacion a promover junto al video.</p>
                <button onclick="vidPlay()">&#9658;</button>
            </div>
        </div>
    </div>

Creando el estilo visual

El estilo visual sera bien sencillo de realizar. El video estara al 100% de ancho y el texto flotara en el centro del contenedor de manera absoluta. Y asi, sin mas, aqui esta el estilo css.

<style>
        .thevideo{margin: 30px 0; position: relative;}
        .thevideo .txt-cont{background-color: rgba(0, 0, 0, .5); width: 100%; height: 98%; display: block; position: absolute; top: 0; left: 0;}
        .thevideo .txt-video{position: absolute; top: 50%; left:50%; transform: translate(-50%, -50%); text-align:center;}
        .thevideo h1, .thevideo p{color:white;}
        .thevideo .txt-video button{background-color: transparent; border:none; color: white; font-size: 30px;; padding: 5px 40px; transition: .5s;}
        .thevideo .txt-video button:hover{background-color: rgba(255, 0, 0, .5); border-radius: 50px; cursor: pointer;}
    </style>

El funcionamiento del boton | Javascript

Lo siguiente a realizar va a hacer el funcionamiento del boton. Para esto vamos a crear una funcion que ejecutaremos al precionar el boton para reproducir el video. Ademas, agregaremos otra funcion para rebobinar el video al principio y volver a mostrar el poster de presentacion del video. Sin mas aqui le dejo el codigo.

<script>
        var theVideo = document.getElementById('myvideo'),
            theTxt = document.querySelector('.txt-cont');
        
        function vidPlay(){
            theVideo.play();
            theVideo.setAttribute('controls', 'controls');
            theTxt.style.opacity = "0";
            theTxt.style.transition = "all .5s";
            the.style.display = "none";
        }
        theVideo.onended = function(){
            theTxt.style.opacity = "1";
            theTxt.style.transition = "all .5s";
            theTxt.style.display = "block";
            theVideo.load();
            theVideo.controls = false;
        };
    </script>

El resultado de todo esto sera un contenedor con video reproducible por medio de un boton flotante. La manera en la que funciona el codigo es bien simple. Primero declaramos dos variable que contendran el video y el text. Luego creamos una funcion «vidPlay()» la cual sera llamada por el boton usando el atributo «onclick». Una vez precionado el boton, la funcion ocultara el texto y el boton, y a su vez, reproducira el video y mostrara la barra de control del reproductor.

Una vez el video termine, la funcion asignada a «onended» permitira que el video sea rebobinado y el texto mostrado de nuevo, asi como el poster del video.

Y hasta aquí este pequeño post de como reproducir un video con un botón por medio de javascript. Espero les haya gustado y nos vemos en la próxima. Chaos.

The Digital Mike