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?
Você está vendo a versão anterior da nova experiência da Alura que estamos preparando para você. Em breve, ela ganha uma identidade visual novinha totalmente pensada em potencializar seus estudos!
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!