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 MUSICASif(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><sectionid="start"class="mx-auto py-5 col-2 float-start"><divclass="row"><labelclass="col-12 text-center text-white fs-4 my-3">Enter with Code</label></div><divclass="row"><divclass="col-10 mx-auto text-center"><inputid="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"><buttonid="btn_cantar"class="p-3 fs-4 btn btn-primary my-5 rounded-5"type="buttom">PLAY</button></div></div><divclass="row"><!-- SHOWS THE NAME OF THE CHOSEN VIDEO --><divid="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 --><sectionid="player-on"class="col-10 float-end bg-primary"></section>
PÁGINA QUE SERÁ CARREGADA:
<divclass="row"><divclass=""><divid="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 prontofunction 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>
Pergunta
Marcio Marins
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
PÁGINA QUE SERÁ CARREGADA:
LAYOUT BÁSICO:
Link para o comentário
Compartilhar em outros sites
0 respostass a esta questão
Posts Recomendados
Participe da discussão
Você pode postar agora e se registrar depois. Se você já tem uma conta, acesse agora para postar com sua conta.