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 das maneiras de resolver o problema de remover as legendas do vídeo é a apresentada 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&amp;disablekb=1&amp;enablejsapi=1&amp;fs=0&amp;iv_load_policy=3&amp;modestbranding=1&amp;showinfo=0&amp;rel=0&amp;html5=1&amp;cc_load_policy=0&amp;origin=https%3A%2F%2Fweb.dio.me&amp;widgetid=1&amp;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&amp;aoriginsup=1&amp;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&amp;disablekb=1&amp;enablejsapi=1&amp;fs=0&amp;iv_load_policy=3&amp;modestbranding=1&amp;showinfo=0&amp;rel=0&amp;html5=1&amp;cc_load_policy=0&amp;origin=https%3A%2F%2Fweb.dio.me&amp;widgetid=1&amp;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&amp;aoriginsup=1&amp;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!