SlideShare uma empresa Scribd logo
Legendas na Web
Reinaldo Ferraz
@reinaldoferraz
https://pt.slideshare.net/CentroWeb https://pt.slideshare.net/reinaldoferraz
Legendas na Web
Legendas na Web
Legendas na Web
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.
Legendas na Web
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
Legendas na Web
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;
Legendas na Web
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/
Legendas na Web
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.
Legendas na Web
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/
Legendas na Web
Legendas na Web
Legendas na Web
Formatos de arquivo aceitos pelo YouTube:
• SubRip (.srt)
• WebVTT (.vtt)
• TTML (.ttml)
Legendas na Web
Legendas na Web
Legendas na Web
Legendas na Web
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 Legendas na Web

Webseriados
WebseriadosWebseriados
Webseriados
Monica Rodrigues
 
Videos Digitais
Videos DigitaisVideos Digitais
Videos Digitais
Marcelo Delgado
 
Vídeos Digitais
Vídeos DigitaisVídeos Digitais
Vídeos Digitais
eduardo.samaan
 
Panorama da Acessibilidade nas redes sociais
Panorama da Acessibilidade nas redes sociaisPanorama da Acessibilidade nas redes sociais
Panorama da Acessibilidade nas redes sociais
Reinaldo Ferraz
 
Trabalho Gestão Tec. Web - WEBSERIADOS
Trabalho Gestão Tec. Web - WEBSERIADOSTrabalho Gestão Tec. Web - WEBSERIADOS
Trabalho Gestão Tec. Web - WEBSERIADOS
Bianca Furtado
 
Palestra / SDD / Crossbrowsing
Palestra / SDD / CrossbrowsingPalestra / SDD / Crossbrowsing
Palestra / SDD / Crossbrowsing
hugodiasneto
 
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
Rodrigo Antinarelli
 
Onivaldo Rosa - Padrões tecnológicos
Onivaldo Rosa - Padrões tecnológicosOnivaldo Rosa - Padrões tecnológicos
Onivaldo Rosa - Padrões tecnológicos
Recursos Educacionais Abertos na Fiocruz
 
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
GovBR
 
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
Luciana Viter
 
Campus Party 2011 html 5
Campus Party 2011 html 5Campus Party 2011 html 5
Campus Party 2011 html 5
Danilo Sousa
 
Web 2.0 - CRP - Khouse
Web 2.0 - CRP - KhouseWeb 2.0 - CRP - Khouse
Web 2.0 - CRP - Khouse
atilasilvalima
 
Tutorial sobre Bootstrap
Tutorial sobre BootstrapTutorial sobre Bootstrap
Tutorial sobre Bootstrap
Ivo Calado
 
Acessibilidade web
Acessibilidade webAcessibilidade web
Acessibilidade web
Ubirajara Pelli
 
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 isso
Er 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 2011
Suelybcs .
 
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
Fabio Ricotta
 
Acessibilidade na WEB
Acessibilidade na WEBAcessibilidade na WEB
Acessibilidade na WEB
Ana Carolina Gracioso
 

Semelhante a Legendas 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 Reinaldo Ferraz

Acessibilidade Digital e Realidade Estendida (VR/XR)
Acessibilidade Digital e Realidade Estendida (VR/XR)Acessibilidade Digital e Realidade Estendida (VR/XR)
Acessibilidade Digital e Realidade Estendida (VR/XR)
Reinaldo Ferraz
 
Acessibilidade na Web - Muito além do código
Acessibilidade na Web - Muito além do códigoAcessibilidade na Web - Muito além do código
Acessibilidade na Web - Muito além do código
Reinaldo Ferraz
 
WCAG 2.2 e 3.0
WCAG 2.2 e 3.0WCAG 2.2 e 3.0
WCAG 2.2 e 3.0
Reinaldo Ferraz
 
WCAG 2.2
WCAG 2.2WCAG 2.2
WCAG 2.2
Reinaldo Ferraz
 
Por que re-descentralizar a Web?
Por que re-descentralizar a Web?Por que re-descentralizar a Web?
Por que re-descentralizar a Web?
Reinaldo Ferraz
 
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
Reinaldo Ferraz
 
WCAG 2.1
WCAG 2.1WCAG 2.1
WCAG 2.1
Reinaldo Ferraz
 
The power of ALT and LANG attributes
The power of ALT and LANG attributesThe power of ALT and LANG attributes
The power of ALT and LANG attributes
Reinaldo Ferraz
 
Quando e como usar WAI-ARIA
Quando e como usar WAI-ARIAQuando e como usar WAI-ARIA
Quando e como usar WAI-ARIA
Reinaldo Ferraz
 
Accessibility on SVG and SEO
Accessibility on SVG and SEOAccessibility on SVG and SEO
Accessibility on SVG and SEO
Reinaldo Ferraz
 
Technological study of Brazilian government websites
Technological study of Brazilian government websitesTechnological study of Brazilian government websites
Technological study of Brazilian government websites
Reinaldo Ferraz
 
WCAG 2.1
WCAG 2.1WCAG 2.1
WCAG 2.1
Reinaldo Ferraz
 
Acessibilidade na web
Acessibilidade na webAcessibilidade na web
Acessibilidade na web
Reinaldo Ferraz
 
Aplicações em HTML5 para interação com a TV Digital
Aplicações em HTML5 para interação com a TV DigitalAplicações em HTML5 para interação com a TV Digital
Aplicações em HTML5 para interação com a TV Digital
Reinaldo Ferraz
 
HTML Acessível
HTML AcessívelHTML Acessível
HTML Acessível
Reinaldo Ferraz
 
Alt e Lang: Dois atributos da pesada
Alt e Lang: Dois atributos da pesadaAlt e Lang: Dois atributos da pesada
Alt e Lang: Dois atributos da pesada
Reinaldo Ferraz
 
Acessibilidade na Web: Construíndo páginas para pessoas e não só para máquinas
Acessibilidade na Web: Construíndo páginas para pessoas e não só para máquinasAcessibilidade na Web: Construíndo páginas para pessoas e não só para máquinas
Acessibilidade na Web: Construíndo páginas para pessoas e não só para máquinas
Reinaldo Ferraz
 
Atributos textuais para imagens e SEO
Atributos textuais para imagens e SEOAtributos textuais para imagens e SEO
Atributos textuais para imagens e SEO
Reinaldo Ferraz
 
ALT and TITLE attributes in images and SEO
ALT and TITLE attributes in images and SEOALT and TITLE attributes in images and SEO
ALT and TITLE attributes in images and SEO
Reinaldo Ferraz
 
Web das Coisas - Que tal fazer coisas que sejam realmente úteis?
Web das Coisas - Que tal fazer coisas que sejam realmente úteis?Web das Coisas - Que tal fazer coisas que sejam realmente úteis?
Web das Coisas - Que tal fazer coisas que sejam realmente úteis?
Reinaldo Ferraz
 

Mais de Reinaldo Ferraz (20)

Acessibilidade Digital e Realidade Estendida (VR/XR)
Acessibilidade Digital e Realidade Estendida (VR/XR)Acessibilidade Digital e Realidade Estendida (VR/XR)
Acessibilidade Digital e Realidade Estendida (VR/XR)
 
Acessibilidade na Web - Muito além do código
Acessibilidade na Web - Muito além do códigoAcessibilidade na Web - Muito além do código
Acessibilidade na Web - Muito além do código
 
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
 
Por que re-descentralizar a Web?
Por que re-descentralizar a Web?Por que re-descentralizar a Web?
Por que re-descentralizar a 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 web
 
WCAG 2.1
WCAG 2.1WCAG 2.1
WCAG 2.1
 
The power of ALT and LANG attributes
The power of ALT and LANG attributesThe power of ALT and LANG attributes
The power of ALT and LANG attributes
 
Quando e como usar WAI-ARIA
Quando e como usar WAI-ARIAQuando e como usar WAI-ARIA
Quando e como usar WAI-ARIA
 
Accessibility on SVG and SEO
Accessibility on SVG and SEOAccessibility on SVG and SEO
Accessibility on SVG and SEO
 
Technological study of Brazilian government websites
Technological study of Brazilian government websitesTechnological study of Brazilian government websites
Technological study of Brazilian government websites
 
WCAG 2.1
WCAG 2.1WCAG 2.1
WCAG 2.1
 
Acessibilidade na web
Acessibilidade na webAcessibilidade na web
Acessibilidade na web
 
Aplicações em HTML5 para interação com a TV Digital
Aplicações em HTML5 para interação com a TV DigitalAplicações em HTML5 para interação com a TV Digital
Aplicações em HTML5 para interação com a TV Digital
 
HTML Acessível
HTML AcessívelHTML Acessível
HTML Acessível
 
Alt e Lang: Dois atributos da pesada
Alt e Lang: Dois atributos da pesadaAlt e Lang: Dois atributos da pesada
Alt e Lang: Dois atributos da pesada
 
Acessibilidade na Web: Construíndo páginas para pessoas e não só para máquinas
Acessibilidade na Web: Construíndo páginas para pessoas e não só para máquinasAcessibilidade na Web: Construíndo páginas para pessoas e não só para máquinas
Acessibilidade na Web: Construíndo páginas para pessoas e não só para máquinas
 
Atributos textuais para imagens e SEO
Atributos textuais para imagens e SEOAtributos textuais para imagens e SEO
Atributos textuais para imagens e SEO
 
ALT and TITLE attributes in images and SEO
ALT and TITLE attributes in images and SEOALT and TITLE attributes in images and SEO
ALT and TITLE attributes in images and SEO
 
Web das Coisas - Que tal fazer coisas que sejam realmente úteis?
Web das Coisas - Que tal fazer coisas que sejam realmente úteis?Web das Coisas - Que tal fazer coisas que sejam realmente úteis?
Web das Coisas - Que tal fazer coisas que sejam realmente úteis?
 

Legendas na Web