Estou tentando criar uma aplicação online com PHP e JavaScript (Ajax) e a API do YouTube.
Basicamente, quero que os vídeos do meu canal rodem em uma "SECTION" da minha aplicação.
Quando digito o código, previamente cadastrado em banco de dados com as informações do vídeo, e clico em um PLAY o vídeo é carregado na "SECTION" (id=player-on). Na primeira vez, o vídeo aparece e roda perfeitamente, mas se eu digitar outro código, o próximo vídeo não carrega.
Tentei retirar "window.addEventListener("load", (event) => {" do JavaScript e criar uma função e chamá-la diretamente no input "PLAY", mas também não funcionou.
Ou seja, eu teria que atualizar a pagina toda para poder rodar outro vídeo e isso não é interessante.
Alguém poderia ajudar?
PÁGINA QUE EU ESCOLHERIA VÍDEO: index.php
<script>
window.addEventListener("load", (event) => {
var botao = document.querySelector("#btn_cantar");
var codigo_musica = document.querySelector("#codigo_musica");
codigoLength = codigo_musica.value.length;
botao.addEventListener("click", (event) => {
if (codigoLength < 4) {
$("#player-on").html("");
console.log("menor");
}
if (codigoLength == 4) {
primary = {
codigo: codigo_musica.value,
};
$.ajax({
type: 'post',
url: "player.php",
data: primary
}).done(function(retorno) {
$("#player-on").html(retorno);
});
} else {
alert("É necessário escolhe uma música!");
}
});
});
function buscaVideo(input) {
codigoLength = input.value.length;
primary = {
codigo: input.value,
};
//SE O TAMANHO DO CODIGO FOR MENOR QUE 4 CARACTARES LIMPA O BOX DE LISTAGEM DE MUSICAS
if (codigoLength < 4) {
$("#lista_videos").html("");
console.log("menor");
}
//SE O TAMANHO DO CODIGO FOR = A 4 CARACTARES CARREGA A PAGINA DE LISTAGEM DE MUSICAS
if (codigoLength == 4) {
$.ajax({
type: 'post',
url: "busca_videos.php",
data: primary
}).done(function(retorno) {
$("#lista_videos").html(retorno);
});
}
}
</script>
<section id="start" class="mx-auto py-5 col-2 float-start">
<div class="row">
<label class="col-12 text-center text-white fs-4 my-3">Enter with Code</label>
</div>
<div class="row">
<div class="col-10 mx-auto text-center">
<input id="codigo_musica" onkeyup="buscaVideo(this)" class="form-control text-center py-1 fs-4 border-5 rounded-5 " maxlength="4" type="text" id="codigo" value="" name="codigo" placeholder="Digite o código da música" autocomplete="off">
<button id="btn_cantar" class="p-3 fs-4 btn btn-primary my-5 rounded-5" type="buttom">PLAY</button>
</div>
</div>
<div class="row">
<!-- SHOWS THE NAME OF THE CHOSEN VIDEO -->
<div id="lista_videos" class="col-10 rounded-5 fs-3 bg-white mx-auto border-5 text-center p-2 text-center">
</div>
</div>
</section>
<!-- SHOW THE CHOSEN VIDEO -->
<section id="player-on" class="col-10 float-end bg-primary">
</section>
PÁGINA QUE SERÁ CARREGADA:
<div class="row">
<div class="">
<div id="player"></div>
</div>
</div>
<script>
(function() {
var player;
var height = window.screen.height;
var width = window.screen.width;
window.onYouTubeIframeAPIReady = function() {
player = new YT.Player('player', {
height: height,
width: width,
videoId: '<?= $video["id_video"] ?>',
events: {
'onReady': onPlayerReady
},
playerVars: {
'playsinline': 1
},
});
// player.getPlayerState();
};
// 4. Executa o play quando o video estiver pronto
function onPlayerReady(event) {
event.target.playVideo();
}
var tag = document.createElement('script');
tag.src = "https://www.youtube.com/iframe_api";
var firstScriptTag = document.getElementsByTagName('script')[0];
firstScriptTag.parentNode.insertBefore(tag, firstScriptTag);
})();
</script>
LAYOUT BÁSICO: