Milhares de erros (literalmente rs) aparecendo no console estão atrapalhando o carregamento dos vídeos no navegador e deixando a navegação muito lenta.
Como conserto isso?
Milhares de erros (literalmente rs) aparecendo no console estão atrapalhando o carregamento dos vídeos no navegador e deixando a navegação muito lenta.
Como conserto isso?
Oi Lucas!
Qual é o erro? Consegue mandar print do console, e o seu código?
Outra observação, caso esteja usando adblock erro como esses podem aparecer:
Nesse caso, basta desativar o adblock ou extensão de bloqueios de propagandas para a página e recarregar.
Espero ter ajudado e Reforço que em casos de dúvidas, conte sempre com o fórum da comunidade Alura! Bons estudos!
Sucesso ✨
Um grande abraço e até mais!
Além desse que vc mandou (que não parou mesmo desativando o adblock), tbm tem esse:
[Violation] Permissions policy violation: picture-in-picture is not allowed in this document. Lfb @ base.js:7301
Olá Lucas!
Estranho... Manda seu código completo, e um print do seu console.
MOSTRARVIDEOS.JS
import { conectaApi } from "./conectaApi.js";
// importou a variavel que exportei do conectaApi
const lista = document.querySelector("[data-lista]");
function constroiCard (titulo, descricao, url, imagem) {
const video = document.createElement("li");
video.className = "videos__item";
//por enquanto, um elemento li foi criado e à ele foi adicionado uma classe: "videos__item"
video.innerHTML = `<iframe width="100%" height="72%" src="${url}"
title="${titulo}" frameborder="0"
allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture"
allowfullscreen></iframe>
<div class="descricao-video">
<img src="${imagem}" alt="logo canal alura">
<h3>${titulo}</h3>
<p>${descricao}</p>
</div>` // o innerhtml coloca um trecho de html dentro da li.
return video;
}
// função para consumir as funções do conecta API
async function listaVideos () {
const listaApi = await conectaApi.listaVideos();
listaApi.forEach(elemento => lista.appendChild(constroiCard(elemento.titulo, elemento.descricao, elemento.url, elemento.imagem)));
}
listaVideos();
CONECTAAPI.JS
async function listaVideos () {
const conexao = await fetch ("http://localhost:3000/videos");
const conexaoConvertida = await conexao.json(); //constante que armazena o array e o converte, com o json(), para um novo array que sera posteriormente exibido na tela
return conexaoConvertida;
}
export const conectaApi = {
listaVideos
}
Oi Lucas!
Então... parece que seu código está correto. No entanto, sugiro que não se preocupe com o console neste momento. Por gentileza, teste seu código em outro navegador. Basta copiar o link "http://127.0.0.1:5501/index.html" com o live serve rodando, e colar em outro navegador. Se outro navegador não tiver bloqueador de anúncios, nada deve aparecer. Se houver alguns "warnings" em amarelo, não se preocupe, são apenas avisos e podem variar de um navegador para outro.
ola. perdão pela demora.
troquei o navegador mas o problema persiste.
o primeiro erro: Third-party cookie will be blocked. Learn more in the Issues tab. (esse aparece 1500 vezes)
o secundo erro: Error with Permissions-Policy header: Unrecognized feature: 'ch-ua-form-factor'. (esse aparece 170 vezes)
Olá Lucas!
Nesses casos, esses erros não vão te atrapalhar no teu projeto. Eles podem variar de navegador para navegador, alguns são avisos e outros não. Sei que assusta, mas saiba que é normal. Alguns erros no terminal podem ocorrer por diversas razões, principalmente ao fazer requisições. Por exemplo, abra o YouTube e o console, veja a quantidade de erros, porém tudo tende a funcionar normalmente.
O primeiro aviso, "Third-party cookie will be blocked. Learn more in the Issues tab.", indica que o navegador está bloqueando cookies de terceiros por motivos de privacidade. O segundo aviso, "Error with Permissions-Policy header: Unrecognized feature: 'ch-ua-form-factor'." é um erro de configuração do cabeçalho de segurança do servidor e também não afeta a execução do seu código, ou seja, questões do Json-server. Ambos os avisos podem ser ignorados.
Todas as pessoas que estão fazendo o curso, devido ao uso do Json-server ou ao solicitar vídeos no YouTube, entre outros, podem se deparar com erros como tal, o projeto final do curso, há esses alertas no console, e o mesmo está funcionando tranquilamente.
Reforço que em casos de dúvidas, conte sempre com o fórum da comunidade Alura! Bons estudos!
Sucesso ✨
Um grande abraço e até mais!