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>