SlideShare uma empresa Scribd logo
1 de 55
Baixar para ler offline
Legendas na Web
Reinaldo Ferraz
@reinaldoferraz
https://pt.slideshare.net/CentroWeb https://pt.slideshare.net/reinaldoferraz
Vídeo Web Accessibility Perspectives – Video Captions
https://www.youtube.com/watch?v=iWO5N3n1DXU
https://agenciabrasil.ebc.com.br/geral/noticia/2019-10/brasil-tem-107-milhoes-de-deficientes-auditivos-diz-estudo
Censo IBGE 2010
- 5,1% da população com deficiência auditiva
- Representa 9.717.318 brasileiros em 2010
https://biblioteca.ibge.gov.br/visualizacao/periodicos/94/cd_2010_religiao_deficiencia.pdf
https://www.forbes.com/sites/tjmccue/2019/07/31/verizon-media-says-69-percent-of-consumers-watching-video-with-sound-off
O estudo publicado em julho de 2019 entrevistou 5.616 americanos:
• 69% assistem vídeo com som desligado em locais públicos e 25%
assistem com som desligado em locais privados
• 80% dos consumidores têm mais probabilidade de assistir a um vídeo
inteiro quando as legendas estão disponíveis
• 50% dos consumidores dizem que as legendas são importantes porque
assistem ao vídeo sem som
https://blog.hubspot.com/marketing/instagram-story-sound-preferences
• Open Caption
• Closed Caption
• Transcrição
• Janela de Libras
Open Caption
Legendas permanentemente visíveis
Usadas principalmente em redes sociais
http://reinaldoferraz.com.br/servicos-para-adicionar-legendas-em-videos/
https://www.veed.io/
Prós:
• Não é necessário criar conta para usar;
• Permite ajustes no vídeo;
• O reconhecimento do áudio em português foi quase perfeito.
Contras:
• Limite de 10 minutos e 50MB no plano gratuito
• Não permite retirar a marca d’água no plano gratuito.
https://www.getsubly.com/
Prós:
• Permite a retirada da marca d’água do logo.
Contras:
• Necessita de login para uso;
• Reconhecimento do áudio em português ainda em fase beta
https://www.kapwing.com/subtitles
Prós:
• Permite armazenamento do vídeo e compartilhamento de link da aplicação
(por sete dias na versão gratuita);
• Versão gratuita permite vídeo sem marca d’agua;
• Limite de vídeo de 7 minutos e 250 MB na versão gratuita.
Contras:
• Necessita de login com redes sociais para uso. Não há opção de criação de
conta por e-mail;
Transcrição de áudio
https://docs.google.com/
https://webcaptioner.com/captioner
Closed Caption
Podem ser habilitadas ou desabilitadas pelo usuário
Usadas em aplicações Web
Closed Caption vs Subtitle
Tradução:
• Closed Caption: Legenda oculta
• Subtitle: Legenda
Diferença:
• Subtitle oferece texto alternativo para o diálogo
• Closed Caption também oferece texto alternativo para o diálogo mas
também para outras partes do áudio, como sons de fundo, ruídos,
telefones tocando, etc.
Formatos de arquivo para Closed Caption
• Formato Texto (TXT)
• Formato WebVTT
• Formato TTML
https://www.w3.org/TR/webvtt1/
https://www.w3.org/TR/webvtt1/
WEBVTT
1
00:00:00.000 --> 00:00:05.000
Neste momento há diversas iniciativas no âmbito do W3C
2
00:00:05.050 --> 00:00:08.000
que dizem respeito a publicações, a publicação de livros,
3
00:00:08.050 --> 00:00:12.000
de revistas, e-books, etc.
https://www.w3.org/TR/webvtt1/
<video controls>
<source src="MOV_2279.mp4" type="video/mp4">
<track
label="Português"
kind="subtitles"
srclang="pt"
src="legenda-bert-pt.vtt"
default>
<track label="English" kind="subtitles" srclang="en"
src="legenda-bert-en.vtt">
</video>
Valores do atributo kind
• subtitles
Tradução do áudio falado para quem não está escutando
• captions
Tradução do áudio falado e de outros sons, como toques de telefones
• descriptions
Descrição textual do conteúdo em vídeo
• chapters
Apresentar os capítulos quando o usuário navega pela mídia
• metadata
Quando utilizar scripts. Não é visível ao usuário
https://www.w3.org/TR/webvtt1/
<style>
video::cue {
background-color;blue;
color: white;
}
video::cue(b) {
color: yellow;
}
</style>
https://www.w3.org/TR/webvtt1/
WEBVTT
1
00:00:00.000 --> 00:00:05.000
Neste momento há diversas iniciativas no âmbito do W3C
2
00:00:05.050 --> 00:00:08.000 line:10.00%
<b>que dizem respeito a publicações, a publicação de livros,
</b>
3
00:00:08.050 --> 00:00:12.000 size:10%
de revistas, e-books, etc.
https://www.w3.org/TR/2018/REC-ttml1-20181108/
https://w3c.github.io/ttml2/
https://www.w3.org/TR/2018/REC-ttml1-20181108/
<body region="subtitleArea">
<div>
<p xml:id="subtitle1" begin="0.76s" end="3.45s">
It seems a paradox, does it not,
</p>
<p xml:id="subtitle2" begin="5.0s" end="10.0s">
that the image formed on<br/>
the Retina should be inverted?
</p>
<p xml:id="subtitle3" begin="10.0s" end="16.0s"
style="s2">
It is puzzling, why is it<br/>
we do not see things upside-down?
</p>
https://www.w3.org/TR/2018/REC-ttml1-20181108/
• YouTube
• Netflix
• Amazon Video
• Yahoo
• AOL
• Vimeo
• Dailymotion
• YouView
• Metacafe
• Brightcove
• Ooyala
• Kaltura (MediaSpace)
• Limelight Networks
• Adobe Media Server
• Adobe Connect
• Adobe TV
• Adobe Premiere Pro
• Adobe Flash
• Open Source Media
Framework (OSMF)
• Adobe Presenter
• Panopto
• VLC
• Flowplayer
• JW Player
• Subtitle Edit
https://www.bbc.co.uk/rd/blog/2020-07-streamable-subtitles-ip-production
https://partnerhelp.netflixstudios.com/hc/en-us/articles/215758617-Timed-Text-Style-Guide-General-Requirements
https://www.w3.org/2016/01/emmyawardttml.html
Serviços que ajudam na geração de legendas
Veed
Formatos .srt, .txt e .vtt (versão paga)
Subly
Formatos .srt e .txt
Kapwing
Formato .srt (versão paga)
https://www.vtt-creator.com/
https://www.happyscribe.com/
Formatos de arquivo aceitos pelo YouTube:
• SubRip (.srt)
• WebVTT (.vtt)
• TTML (.ttml)
WEBVTT
Kind: captions
Language: pt
00:00:00.300 --> 00:00:02.959 align:start position:0%
oi<00:00:00.330><c> oi</c><00:00:01.010><c>
pessoal</c><00:00:02.010><c> eu</c><00:00:02.220><c>
tô</c><00:00:02.340><c> fazendo</c><00:00:02.399><c>
esse</c><00:00:02.790><c> vídeo</c>
00:00:02.959 --> 00:00:02.969 align:start position:0%
oi oi pessoal eu tô fazendo esse vídeo
https://gotranscript.com/subtitle-converter
Por que não colocar legendas em seus vídeos na Web?
Obrigado
reinaldo@nic.br @reinaldoferraz
Crédito das ilustrações: Freepik.com

Mais conteúdo relacionado

Semelhante a Importância das legendas em vídeos na web

Panorama da Acessibilidade nas redes sociais
Panorama da Acessibilidade nas redes sociaisPanorama da Acessibilidade nas redes sociais
Panorama da Acessibilidade nas redes sociaisReinaldo Ferraz
 
Trabalho Gestão Tec. Web - WEBSERIADOS
Trabalho Gestão Tec. Web - WEBSERIADOSTrabalho Gestão Tec. Web - WEBSERIADOS
Trabalho Gestão Tec. Web - WEBSERIADOSBianca Furtado
 
Palestra / SDD / Crossbrowsing
Palestra / SDD / CrossbrowsingPalestra / SDD / Crossbrowsing
Palestra / SDD / Crossbrowsinghugodiasneto
 
Desenvolvimento Web multi-devices com Google Web Starter Kit
Desenvolvimento Web multi-devices com Google Web Starter KitDesenvolvimento Web multi-devices com Google Web Starter Kit
Desenvolvimento Web multi-devices com Google Web Starter KitRodrigo Antinarelli
 
Padrões em Governo Eletrônico - acessibilidade e e-MAG
Padrões em Governo Eletrônico - acessibilidade e e-MAGPadrões em Governo Eletrônico - acessibilidade e e-MAG
Padrões em Governo Eletrônico - acessibilidade e e-MAGGovBR
 
Workshop recursos da web 2.0 para pesquisadores
Workshop   recursos da web 2.0 para pesquisadoresWorkshop   recursos da web 2.0 para pesquisadores
Workshop recursos da web 2.0 para pesquisadoresLuciana Viter
 
Campus Party 2011 html 5
Campus Party 2011 html 5Campus Party 2011 html 5
Campus Party 2011 html 5Danilo Sousa
 
Web 2.0 - CRP - Khouse
Web 2.0 - CRP - KhouseWeb 2.0 - CRP - Khouse
Web 2.0 - CRP - Khouseatilasilvalima
 
Tutorial sobre Bootstrap
Tutorial sobre BootstrapTutorial sobre Bootstrap
Tutorial sobre BootstrapIvo Calado
 
Pentaho: Inteligência de Negócios utilizando Software Livre - FliSOL São Paul...
Pentaho: Inteligência de Negócios utilizando Software Livre - FliSOL São Paul...Pentaho: Inteligência de Negócios utilizando Software Livre - FliSOL São Paul...
Pentaho: Inteligência de Negócios utilizando Software Livre - FliSOL São Paul...Caio Moreno
 
Pentaho: Inteligência de Negócios utilizando Software Livre - FliSOL São Paul...
Pentaho: Inteligência de Negócios utilizando Software Livre - FliSOL São Paul...Pentaho: Inteligência de Negócios utilizando Software Livre - FliSOL São Paul...
Pentaho: Inteligência de Negócios utilizando Software Livre - FliSOL São Paul...IT4biz IT Solutions
 
OSS, Comunidade, Eventos e como sua empresa ganha com isso
OSS, Comunidade, Eventos e como sua empresa ganha com issoOSS, Comunidade, Eventos e como sua empresa ganha com isso
OSS, Comunidade, Eventos e como sua empresa ganha com issoEr Galvão Abbott
 
Semana do Livro e da Biblioteca 2011
Semana do Livro e da Biblioteca 2011Semana do Livro e da Biblioteca 2011
Semana do Livro e da Biblioteca 2011Suelybcs .
 
Link Building - Relatórios e automação
Link Building - Relatórios e automaçãoLink Building - Relatórios e automação
Link Building - Relatórios e automaçãoFabio Ricotta
 

Semelhante a Importância das legendas em vídeos na web (20)

Webseriados
WebseriadosWebseriados
Webseriados
 
Videos Digitais
Videos DigitaisVideos Digitais
Videos Digitais
 
Vídeos Digitais
Vídeos DigitaisVídeos Digitais
Vídeos Digitais
 
Panorama da Acessibilidade nas redes sociais
Panorama da Acessibilidade nas redes sociaisPanorama da Acessibilidade nas redes sociais
Panorama da Acessibilidade nas redes sociais
 
Trabalho Gestão Tec. Web - WEBSERIADOS
Trabalho Gestão Tec. Web - WEBSERIADOSTrabalho Gestão Tec. Web - WEBSERIADOS
Trabalho Gestão Tec. Web - WEBSERIADOS
 
Palestra / SDD / Crossbrowsing
Palestra / SDD / CrossbrowsingPalestra / SDD / Crossbrowsing
Palestra / SDD / Crossbrowsing
 
Desenvolvimento Web multi-devices com Google Web Starter Kit
Desenvolvimento Web multi-devices com Google Web Starter KitDesenvolvimento Web multi-devices com Google Web Starter Kit
Desenvolvimento Web multi-devices com Google Web Starter Kit
 
Onivaldo Rosa - Padrões tecnológicos
Onivaldo Rosa - Padrões tecnológicosOnivaldo Rosa - Padrões tecnológicos
Onivaldo Rosa - Padrões tecnológicos
 
Padrões em Governo Eletrônico - acessibilidade e e-MAG
Padrões em Governo Eletrônico - acessibilidade e e-MAGPadrões em Governo Eletrônico - acessibilidade e e-MAG
Padrões em Governo Eletrônico - acessibilidade e e-MAG
 
Workshop recursos da web 2.0 para pesquisadores
Workshop   recursos da web 2.0 para pesquisadoresWorkshop   recursos da web 2.0 para pesquisadores
Workshop recursos da web 2.0 para pesquisadores
 
Campus Party 2011 html 5
Campus Party 2011 html 5Campus Party 2011 html 5
Campus Party 2011 html 5
 
Web 2.0 - CRP - Khouse
Web 2.0 - CRP - KhouseWeb 2.0 - CRP - Khouse
Web 2.0 - CRP - Khouse
 
Tutorial sobre Bootstrap
Tutorial sobre BootstrapTutorial sobre Bootstrap
Tutorial sobre Bootstrap
 
Acessibilidade web
Acessibilidade webAcessibilidade web
Acessibilidade web
 
Pentaho: Inteligência de Negócios utilizando Software Livre - FliSOL São Paul...
Pentaho: Inteligência de Negócios utilizando Software Livre - FliSOL São Paul...Pentaho: Inteligência de Negócios utilizando Software Livre - FliSOL São Paul...
Pentaho: Inteligência de Negócios utilizando Software Livre - FliSOL São Paul...
 
Pentaho: Inteligência de Negócios utilizando Software Livre - FliSOL São Paul...
Pentaho: Inteligência de Negócios utilizando Software Livre - FliSOL São Paul...Pentaho: Inteligência de Negócios utilizando Software Livre - FliSOL São Paul...
Pentaho: Inteligência de Negócios utilizando Software Livre - FliSOL São Paul...
 
OSS, Comunidade, Eventos e como sua empresa ganha com isso
OSS, Comunidade, Eventos e como sua empresa ganha com issoOSS, Comunidade, Eventos e como sua empresa ganha com isso
OSS, Comunidade, Eventos e como sua empresa ganha com isso
 
Semana do Livro e da Biblioteca 2011
Semana do Livro e da Biblioteca 2011Semana do Livro e da Biblioteca 2011
Semana do Livro e da Biblioteca 2011
 
Link Building - Relatórios e automação
Link Building - Relatórios e automaçãoLink Building - Relatórios e automação
Link Building - Relatórios e automação
 
Acessibilidade na WEB
Acessibilidade na WEBAcessibilidade na WEB
Acessibilidade na WEB
 

Mais de Centro Web

Acessibilidade e Realidade Estendida
Acessibilidade e Realidade EstendidaAcessibilidade e Realidade Estendida
Acessibilidade e Realidade EstendidaCentro Web
 
Por dentro do W3C e as novidades nos padrões de acessibilidade na
Por dentro do W3C e as novidades nos padrões de acessibilidade na Por dentro do W3C e as novidades nos padrões de acessibilidade na
Por dentro do W3C e as novidades nos padrões de acessibilidade na Centro Web
 
WCAG 2.2 e 3.0
WCAG 2.2 e 3.0WCAG 2.2 e 3.0
WCAG 2.2 e 3.0Centro Web
 
Passado, presente e futuro da acessibilidade na web
Passado, presente e futuro da acessibilidade na webPassado, presente e futuro da acessibilidade na web
Passado, presente e futuro da acessibilidade na webCentro Web
 
Accessibility on SVG and SEO
Accessibility on SVG and SEOAccessibility on SVG and SEO
Accessibility on SVG and SEOCentro Web
 
Quando e como usar WAI-ARIA
Quando e como usar WAI-ARIAQuando e como usar WAI-ARIA
Quando e como usar WAI-ARIACentro Web
 
Re descentralizar a Web
Re descentralizar a WebRe descentralizar a Web
Re descentralizar a WebCentro Web
 
Web das coisas
Web das coisasWeb das coisas
Web das coisasCentro Web
 
Quando e como usar WAI-ARIA
Quando e como usar WAI-ARIAQuando e como usar WAI-ARIA
Quando e como usar WAI-ARIACentro Web
 
Boas Práticas para Dados na Web: Desafios e Benefícios
Boas Práticas para Dados na Web: Desafios e BenefíciosBoas Práticas para Dados na Web: Desafios e Benefícios
Boas Práticas para Dados na Web: Desafios e BenefíciosCentro Web
 
Interação, Imersão e Inclusão
Interação, Imersão e InclusãoInteração, Imersão e Inclusão
Interação, Imersão e InclusãoCentro Web
 
Empatia e respeito para garantir os direitos da pessoa com deficiência na Web
Empatia e respeito para garantir os direitos da pessoa com deficiência na WebEmpatia e respeito para garantir os direitos da pessoa com deficiência na Web
Empatia e respeito para garantir os direitos da pessoa com deficiência na WebCentro Web
 
Buenas Prácticas para Datos en la Web y el Caso de Costa Rica
Buenas Prácticas para Datos en la Web y el Caso de Costa RicaBuenas Prácticas para Datos en la Web y el Caso de Costa Rica
Buenas Prácticas para Datos en la Web y el Caso de Costa RicaCentro Web
 
Encontros com a Web: Fake News
Encontros com a Web: Fake NewsEncontros com a Web: Fake News
Encontros com a Web: Fake NewsCentro Web
 
Mixed Reality e o seu impacto cognitivo
Mixed Reality e o seu impacto cognitivoMixed Reality e o seu impacto cognitivo
Mixed Reality e o seu impacto cognitivoCentro Web
 
Technological study of Brazilian government websites
Technological study of Brazilian government websitesTechnological study of Brazilian government websites
Technological study of Brazilian government websitesCentro Web
 
EPUB and the Open Web Platform
EPUB and the Open Web PlatformEPUB and the Open Web Platform
EPUB and the Open Web PlatformCentro Web
 

Mais de Centro Web (20)

Acessibilidade e Realidade Estendida
Acessibilidade e Realidade EstendidaAcessibilidade e Realidade Estendida
Acessibilidade e Realidade Estendida
 
Por dentro do W3C e as novidades nos padrões de acessibilidade na
Por dentro do W3C e as novidades nos padrões de acessibilidade na Por dentro do W3C e as novidades nos padrões de acessibilidade na
Por dentro do W3C e as novidades nos padrões de acessibilidade na
 
WCAG 2.2 e 3.0
WCAG 2.2 e 3.0WCAG 2.2 e 3.0
WCAG 2.2 e 3.0
 
WCAG 2.2
WCAG 2.2WCAG 2.2
WCAG 2.2
 
Passado, presente e futuro da acessibilidade na web
Passado, presente e futuro da acessibilidade na webPassado, presente e futuro da acessibilidade na web
Passado, presente e futuro da acessibilidade na web
 
Accessibility on SVG and SEO
Accessibility on SVG and SEOAccessibility on SVG and SEO
Accessibility on SVG and SEO
 
Quando e como usar WAI-ARIA
Quando e como usar WAI-ARIAQuando e como usar WAI-ARIA
Quando e como usar WAI-ARIA
 
Re descentralizar a Web
Re descentralizar a WebRe descentralizar a Web
Re descentralizar a Web
 
Web das coisas
Web das coisasWeb das coisas
Web das coisas
 
WCAG 2.1
WCAG 2.1WCAG 2.1
WCAG 2.1
 
Quando e como usar WAI-ARIA
Quando e como usar WAI-ARIAQuando e como usar WAI-ARIA
Quando e como usar WAI-ARIA
 
WCAG 2.1
WCAG 2.1WCAG 2.1
WCAG 2.1
 
Boas Práticas para Dados na Web: Desafios e Benefícios
Boas Práticas para Dados na Web: Desafios e BenefíciosBoas Práticas para Dados na Web: Desafios e Benefícios
Boas Práticas para Dados na Web: Desafios e Benefícios
 
Interação, Imersão e Inclusão
Interação, Imersão e InclusãoInteração, Imersão e Inclusão
Interação, Imersão e Inclusão
 
Empatia e respeito para garantir os direitos da pessoa com deficiência na Web
Empatia e respeito para garantir os direitos da pessoa com deficiência na WebEmpatia e respeito para garantir os direitos da pessoa com deficiência na Web
Empatia e respeito para garantir os direitos da pessoa com deficiência na Web
 
Buenas Prácticas para Datos en la Web y el Caso de Costa Rica
Buenas Prácticas para Datos en la Web y el Caso de Costa RicaBuenas Prácticas para Datos en la Web y el Caso de Costa Rica
Buenas Prácticas para Datos en la Web y el Caso de Costa Rica
 
Encontros com a Web: Fake News
Encontros com a Web: Fake NewsEncontros com a Web: Fake News
Encontros com a Web: Fake News
 
Mixed Reality e o seu impacto cognitivo
Mixed Reality e o seu impacto cognitivoMixed Reality e o seu impacto cognitivo
Mixed Reality e o seu impacto cognitivo
 
Technological study of Brazilian government websites
Technological study of Brazilian government websitesTechnological study of Brazilian government websites
Technological study of Brazilian government websites
 
EPUB and the Open Web Platform
EPUB and the Open Web PlatformEPUB and the Open Web Platform
EPUB and the Open Web Platform
 

Importância das legendas em vídeos na web