Desabilitar ou habilitar a legenda de vídeos dos bootcamps
Muitas vezes, os vídeos dos bootcamps vêm com legendas ativadas por padrão. Se você prefere assistir sem legendas, existe um truque simples usando o DevTools do navegador.
Obs: O exemplo abaixo foi feito no Microsoft Edge, mas o procedimento é praticamente o mesmo em Chrome, Firefox, DuckDuckGo, etc. (com pequenas diferenças nos nomes das ferramentas).
Uma maneira de resolver o problema de remover as legendas do vídeo é a da maneira abaixo:
Obs: Estarei compartilhando como fazer no Edge, mas o procedimento é o mesmo para o Chrome, Firefox, DuckDuckGo, etc... (com algumas diferenças nos nomes das ferramentas).
A base do artigo será o bootcamp Claro - Java com Spring Boot (https://web.dio.me/track/coding-the-future-claro-java-spring-boot/).
O primeiro vídeo servirá de exemplo: Bem vindo ao seu Bootcamp de Java com a Claro
Vamos deixar o Felipão pausado e vamos usar a ferramenta DevTools com a tecla de atalho F12. Clique em "Abrir DevTools".
Agora clique no picker (ícone de seleção)
Com a ferramenta selecionada, leve o cursor do mouse até a área do vídeo e dê um clique simples.
Aparecerá o código da página:
Agora precisaremos fazer algumas alterações neste código:
Na linha que foi selecionada, com o botão de propriedades do mouse, escolha Expandir recursivamente. Pode clicar nos 3 pontos '...' que fica no canto esquerdo da linha selecionada.
Expandindo o código, temos o seguinte código:
O vídeo que aparece na página está dentro de uma tag HTML chamada <iframe>. O <iframe> funciona como se fosse uma “janela” que carrega conteúdo externo (neste caso, o player do YouTube). É dentro dessa tag que ficam os parâmetros que controlam o comportamento do vídeo, como exibir ou não os controles, permitir interação, mostrar legendas, etc. Por isso, ao expandir o código no DevTools, você deve procurar pela linha que contém o <iframe>. É ali que vamos alterar os atributos para liberar os controles e permitir desativar a legenda.
<div style="pointer-events: none; height: 100%;"><iframe id="ytc8" frameborder="0" allowfullscreen="" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture; web-share" referrerpolicy="strict-origin-when-cross-origin" title="Bem vindo ao seu Bootcamp de Java com a Claro" width="100%" height="100%" src="https://www.youtube.com/embed/5bTAQSUW77I?controls=0&disablekb=1&enablejsapi=1&fs=0&iv_load_policy=3&modestbranding=1&showinfo=0&rel=0&html5=1&cc_load_policy=0&origin=https%3A%2F%2Fweb.dio.me&widgetid=1&forigin=https%3A%2F%2Fweb.dio.me%2Ftrack%2Fcoding-the-future-claro-java-spring-boot%2Fcourse%2Fbem-vindo-ao-seu-bootcamp-de-java-com-a-claro%2Flearning%2F212b3700-5a68-4274-8d1b-760a17f1694a%3Fautoplay%3D1&aoriginsup=1&vf=6" data-gtm-yt-inspected-22="true" data-gtm-yt-inspected-34="true"></iframe><style class="clappr-style">.clappr-youtube-plugin[data-youtube-plugin]{position:absolute;height:100%;width:100%;display:block;pointer-events:none</style></div>
Vamos fazer algumas alterações neste trecho acima. Para isso, clique na linha onde está a seta indicada na figura anterior para que possamos editar o HtML.
A primeira alteração será mudar pointer-events: none para pointer-events: auto em <div style="pointer-events: none; height: 100%;">. Esse atributo permite interação com o vídeo, que no caso seria clicar no botão de legenda.
Vamos mudar a exibição de controls=0 para controls=1. Clique com o mouse fora do quadro de edição para salvar as alterações. Esse atributo é responsável por exibir ou não os controles do player.
Na figura acima, o código alterado e a seta indicando onde clicar para salvar as alterações.
O código alterado deverá ficar assim:
<div style="pointer-events: auto; height: 100%;"><iframe id="ytc8" frameborder="0" allowfullscreen="" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture; web-share" referrerpolicy="strict-origin-when-cross-origin" title="Bem vindo ao seu Bootcamp de Java com a Claro" width="100%" height="100%" src="https://www.youtube.com/embed/5bTAQSUW77I?controls=1&disablekb=1&enablejsapi=1&fs=0&iv_load_policy=3&modestbranding=1&showinfo=0&rel=0&html5=1&cc_load_policy=0&origin=https%3A%2F%2Fweb.dio.me&widgetid=1&forigin=https%3A%2F%2Fweb.dio.me%2Ftrack%2Fcoding-the-future-claro-java-spring-boot%2Fcourse%2Fbem-vindo-ao-seu-bootcamp-de-java-com-a-claro%2Flearning%2F212b3700-5a68-4274-8d1b-760a17f1694a%3Fautoplay%3D1&aoriginsup=1&vf=6" data-gtm-yt-inspected-24="true" data-gtm-yt-inspected-36="true"></iframe><style class="clappr-style">.clappr-youtube-plugin[data-youtube-plugin]{position:absolute;height:100%;width:100%;display:block;pointer-events:none</style></div>
Volte para o vídeo e veja a mágica!
Agora você pode habilitar e desabilitar a legenda!
Apos habilitar ou desabilitar, você pode deixar como está ou alterar controls=1 para controls=0 novamente para o valor padrão.
Observações: Lembrando que essas alterações são temporárias e só funcionam enquanto a página está aberta.
Não se preocupe com os erros, se você errar, apenas use a tecla F5 para recarregar o código original.
Dica extra: Assistir direto no YouTube: Se você copiar o conteúdo do atributo src do <iframe>, por exemplo: 'https://www.youtube.com/embed/5bTAQSUW77I' e substituir o 'embed' por 'v' você poderá assistir diretamente no Youtube Exemplo: 'https://www.youtube.com/v/5bTAQSUW77I' . Só lembrando que a visualização não será contabilizada dentro da plataforma da DIO, ou seja, não contará como progresso no curso. Use apenas como recurso complementar.
Bons estudos!
