0

Quero fazer uma aplicação local que reproduza os vídeos selecionados pelo usuário através do checkbox, e assim que acabar um vídeo, já começa o outro.

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Videos</title>
</head>
<body>

    <input type="checkbox" id="pacotei" name="Pacote" value="Pacote i">
    <label for="pacotei">CAPSULA</label>
    <br>
    <input type="checkbox" id="pacoteii" name="Pacote" value="Pacote ii">
    <label for="pacoteii">CREME</label>
    <br>
    <input type="checkbox" id="pacoteiii" name="Pacote" value="Pacote iii">
    <label for="pacoteiii">SACHE</label>
    <br>
    <button onClick="show()"> Mostrar vídeo </button>   

    <div id="videoDiv" style="display: none">

        <video id="video" width="600" height="auto" autoplay loop>
            <source id="source" src="" type="video/mp4">
        </video>
    </div>


    <script type="text/javascript">
        function show(){   
            let pacote = document.querySelector('[name="Pacote"]:checked')
            let source = document.querySelector('#source')

            if(pacote.value === 'Pacote i')
            {
                source.setAttribute('src', './video1.mp4')


            }
            else if(pacote.value === 'Pacote ii') {
                source.setAttribute('src', './video2.mp4')
            }
            else if(pacote.value === 'Pacote iii') {
                source.setAttribute('src', './video3.mp4')
            }

            document.querySelector('#videoDiv').style.display = 'block'
            document.querySelector('#video').load()
        }
    </script>
</body>
</html>

1 Resposta 1

1

Você precisa do evento onended do elemento video para saber quando o video terminou e poder executar o próximo. São necessárias algumas mudanças no seu código, tais como remoção do atributo loop da tag video, uso da função querySelectorAll em vez de apenas querySelector para selecionar as checkbox marcadas (no primeiro pode ser retornado mais de um match, no segundo apenas um match), e mais algumas adaptações para fazer funcionar. Confira no exemplo:

<html>
<head>
<meta charset="utf8">
<meta content-type="text/html">
</head>
<body>
    <input type="checkbox" id="pacotei" name="Pacote" value="Pacote i">
    <label for="pacotei">CAPSULA</label>
    <br>
    <input type="checkbox" id="pacoteii" name="Pacote" value="Pacote ii">
    <label for="pacoteii">CREME</label>
    <br>
    <input type="checkbox" id="pacoteiii" name="Pacote" value="Pacote iii">
    <label for="pacoteiii">SACHE</label>
    <br>
    <button onClick="show()"> Mostrar vídeo </button>   

    <div id="videoDiv" style="display: none">

        <video id="video" width="600" height="auto" autoplay controls>
            <source id="source" src="" type="video/mp4">
        </video>
    </div>


    <script type="text/javascript">
        function show(){   
            //para selecionar uma ou mais checkboxes, use querySelectAll
            //será retornado um nodelist, similar a um array, com todos
            //os cehckbox que foram selecionados pelo usuario, veja com //console.log(pacotes);
            //pequena mudanca no nome da variavel
            let pacotes = document.querySelectorAll('[name="Pacote"]:checked')
		
            let source = document.querySelector('#source')
	    //nesse array vão ser colocados os videos que devem ser tocados
	    let videos = [];

	    //Nesse trecho você indica quais videos devem ser adicionados ao array
	    //Como deve ser adicionado mais de um, você não deveria usar if/else if
            //pacotes[0] é a sua primeira checkbox, pacotes[1] a segunda, pacotes[i] a enesima checkbox
            if(pacotes[0].value === 'Pacote i')
            {
                videos.push('./video1.mp4');

            }
            if(pacotes[1].value === 'Pacote ii') {
                videos.push('./video2.mp4');
            }
            if(pacotes[2].value === 'Pacote iii') {
                videos.push('./video3.mp4');
            }


            document.querySelector('#videoDiv').style.display = 'block'
	
	    //agora você precisa carregar o primeiro video (se houver)
	    if(videos.length > 0){
                let video_indice = 0;
                let video = document.querySelector('#video');
                //seta o atributo src do video primeiro video video_indice = 0
                source.setAttribute('src', videos[video_indice]);              
	        video.load()

                //nesse ponto você deve usar o evento onended no elemento #video
	        //que é disparado quando o video termina de rodar
                video.addEventListener('ended', function(){
                    video_indice++;
                    //tocara até o ultimo indice do array videos
                    if(video_indice < videos.length){
                        source.setAttribute('src', videos[video_indice]);              
	                video.load();                        
                    }
                });
            }
            
        }
    </script>

</body>
</html>

Uma melhor abordagem seria inserir os sources dos videos no atributo value das checkboxes, evitando ter que indicar posteriormente o que deveria haver no value de cada checkbox. Algo assim:

<html>
<head>
<meta charset="utf8">
<meta content-type="text/html">
</head>
<body>
    <input type="checkbox" id="pacotei" name="Pacote" value="./video1.mp4">
    <label for="pacotei">CAPSULA</label>
    <br>
    <input type="checkbox" id="pacoteii" name="Pacote" value="./video2.mp4">
    <label for="pacoteii">CREME</label>
    <br>
    <input type="checkbox" id="pacoteiii" name="Pacote" value="./video3.mp4">
    <label for="pacoteiii">SACHE</label>
    <br>
    <button onClick="show()"> Mostrar vídeo </button>   

    <div id="videoDiv" style="display: none">

        <video id="video" width="600" height="auto" autoplay controls>
            <source id="source" src="" type="video/mp4">
        </video>
    </div>


    <script type="text/javascript">
        function show(){   
            //para selecionar uma ou mais checkboxes, use querySelectAll
            //será retornado um nodelist, similar a um array, com todos
            //os cehckbox que foram selecionados pelo usuario, veja com //console.log(pacotes);
            //pequena mudanca no nome da variavel
            let pacotes = document.querySelectorAll('[name="Pacote"]:checked')
		
            let source = document.querySelector('#source');


            document.querySelector('#videoDiv').style.display = 'block'
	
	    //agora você precisa carregar o primeiro video (se houver) 
            //a partir do nodelist pacotes
	    if(pacotes.length > 0){
                let pacote_indice = 0;
                let video = document.querySelector('#video');
                //seta o atributo src do primeiro video 
                //primeiro indice do nodelist, obtido a partir do atributo value
                source.setAttribute('src', pacotes[pacote_indice].value);              
	        video.load()

                //nesse ponto você deve usar o evento onended no elemento #video
	        //que é disparado quando o video termina de rodar
                video.addEventListener('ended', function(){
                    pacote_indice++;
                    //tocara até o ultimo indice do array pacotes
                    if(pacote_indice < pacotes.length){
                        source.setAttribute('src', pacotes[pacote_indice].value);              
	                video.load();                        
                    }
                });
            }
            
        }
    </script>

</body>
</html>

2
  • Amigão.. muitoo obrigado.. tu e sinistro.. agora vou trabalhar no style da aplicação..vou ate ganhar uma promoção na empresa.. a ideia e apresentar em um tv o trabalho de produção desses itens farmaceuticos.. 1/10/2018 às 0:39
  • Amigao..juven_v consegue me ajuda em uma coisa ?eu consigo colocar um texto para aparecer antes de cada video ?mas esse texto tem que ser relacionado a escolha do video.. exemplo.. se escolher o video de capsula e creme.. antes de cada video preciso colocar um texto com algumas frases dizendo que a pessoa escolheu capsula e um texto com algumas frases dizendo que escolheu creme.. me ajuda ae.. to enrrolado nao faço ideia de como fazer.. ate vi que o programa cria um nodelist mas nao to sabendo acessar o no do nodelist e passar eventos. 8/10/2018 às 2:33

Você deve fazer log-in para responder a esta pergunta.

Esta não é a resposta que você está procurando? Pesquise outras perguntas com a tag .