Criando um pop-up modal para executar vídeo

Download disponível no final do artigo, bons estudos!

Aqui no blogson você pode ver uma aula sobre como vídeos em suas páginas HTML, acesse aqui.

Em dos meus projetos na AppWinner Criação de Sites em WordPress precisei criar uma janela modal para executar um vídeo. No entanto, o grande problema não era apenas criar a janela modal, eu tinha que controlar o vídeo na medida em que a janela era aberta ou fechada.

O que acontecia é que, quando o pop-up modal abria o vídeo deveria ser executado de forma automática, mas ele continuava em execução com o áudio em andamento mesmo com a janela modal fechada.

Pois bem, então vamos recorrer ao DOM do JavaScript para conseguir criar estes controles. Optei pelo DOM pois este é um código que eu poderia aproveitar facilmente em um aplicativo. Para minhas pesquisas usei a referência de áudio e vídeo do DOM, veja aqui na W3 Schools.

Métodos HTML para Áudio e Vídeo

Os métodos a seguir podem ser utilizados com o JavaScript para controlar o elemento video e audio do HTML.

• addTextTrack() Adiciona um novo intervalo de texto ao áudio / vídeo
• canPlayType() Verifica se o navegador pode reproduzir o tipo de áudio / vídeo especificado
• load() Re-carrega o elemento de áudio / vídeo
• play() Começa a reproduzir o áudio / vídeo
• pause() Pausa o áudio / vídeo atual

Criando a página que irá abrir o pop-up modal

Abaixo temos uma prévia da página;

CSS para estilizar uma DIV para criar um pop-up, janela modal

O CSS a seguir é uma adaptação do código disponibilizado na W3Schools, veja o material aqui.

<style>
/* The Modal (background) */
.modal {
    display: none; /* Hidden by default */
    position: fixed; /* Stay in place */
    z-index: 1; /* Sit on top */
    padding-top: 5%; /* Location of the box */
    left: 0;
    top: 0;
    width: 100%; /* Full width */
    height: 100%; /* Full height */
    overflow: auto; /* Enable scroll if needed */
    background-color: rgb(0,0,0); /* Fallback color */
    background-color: rgba(0,0,0,1); /* Black w/ opacity */
}

/* Modal Content */
.modal-content {
    position: relative;
    /*background-color: #fefefe;*/
    margin: auto;
    padding: 0;
    width: 80%;
    box-shadow: 0 4px 8px 0 rgba(0,0,0,0.2),0 6px 20px 0 rgba(0,0,0,0.19);
    -webkit-animation-name: animatetop;
    -webkit-animation-duration: 0.4s;
    animation-name: animatetop;
    animation-duration: 0.6s
}

/* Add Animation */
@-webkit-keyframes animatetop {
    from {top:-300px; opacity:0} 
    to {top:0; opacity:1}
}

@keyframes animatetop {
    from {top:-300px; opacity:0}
    to {top:0; opacity:1}
}

/* The Close Button */
.close {
    color: white;
    float: right;
    font-size: 28px;
    font-weight: bold;
}

.close:hover,
.close:focus {
    color: #000;
    text-decoration: none;
    cursor: pointer;
}
.modal-body {padding: 2px 16px;}
</style>

Controlando o pop-up, janela modal com JavaScript, DOM

Agora vamos usar o código, acrescentando nele o controle de vídeo;

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

	function AbreVideo(){
		modal.style.display = "block";
		vid.play();
	}
	
	function FechaVideo()
	{
		vid.pause();
		modal.style.display = "none";
	
	}
</script>

Exemplo para download

Você pode ver esta página funcionando aqui no Blogson, acesse aqui
Faça o download dos arquivos aqui.