-
Notifications
You must be signed in to change notification settings - Fork 85
/
Copy pathvideo.html
837 lines (581 loc) · 91.5 KB
/
video.html
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178
179
180
181
182
183
184
185
186
187
188
189
190
191
192
193
194
195
196
197
198
199
200
201
202
203
204
205
206
207
208
209
210
211
212
213
214
215
216
217
218
219
220
221
222
223
224
225
226
227
228
229
230
231
232
233
234
235
236
237
238
239
240
241
242
243
244
245
246
247
248
249
250
251
252
253
254
255
256
257
258
259
260
261
262
263
264
265
266
267
268
269
270
271
272
273
274
275
276
277
278
279
280
281
282
283
284
285
286
287
288
289
290
291
292
293
294
295
296
297
298
299
300
301
302
303
304
305
306
307
308
309
310
311
312
313
314
315
316
317
318
319
320
321
322
323
324
325
326
327
328
329
330
331
332
333
334
335
336
337
338
339
340
341
342
343
344
345
346
347
348
349
350
351
352
353
354
355
356
357
358
359
360
361
362
363
364
365
366
367
368
369
370
371
372
373
374
375
376
377
378
379
380
381
382
383
384
385
386
387
388
389
390
391
392
393
394
395
396
397
398
399
400
401
402
403
404
405
406
407
408
409
410
411
412
413
414
415
416
417
418
419
420
421
422
423
424
425
426
427
428
429
430
431
432
433
434
435
436
437
438
439
440
441
442
443
444
445
446
447
448
449
450
451
452
453
454
455
456
457
458
459
460
461
462
463
464
465
466
467
468
469
470
471
472
473
474
475
476
477
478
479
480
481
482
483
484
485
486
487
488
489
490
491
492
493
494
495
496
497
498
499
500
501
502
503
504
505
506
507
508
509
510
511
512
513
514
515
516
517
518
519
520
521
522
523
524
525
526
527
528
529
530
531
532
533
534
535
536
537
538
539
540
541
542
543
544
545
546
547
548
549
550
551
552
553
554
555
556
557
558
559
560
561
562
563
564
565
566
567
568
569
570
571
572
573
574
575
576
577
578
579
580
581
582
583
584
585
586
587
588
589
590
591
592
593
594
595
596
597
598
599
600
601
602
603
604
605
606
607
608
609
610
611
612
613
614
615
616
617
618
619
620
621
622
623
624
625
626
627
628
629
630
631
632
633
634
635
636
637
638
639
640
641
642
643
644
645
646
647
648
649
650
651
652
653
654
655
656
657
658
659
660
661
662
663
664
665
666
667
668
669
670
671
672
673
674
675
676
677
678
679
680
681
682
683
684
685
686
687
688
689
690
691
692
693
694
695
696
697
698
699
700
701
702
703
704
705
706
707
708
709
710
711
712
713
714
715
716
717
718
719
720
721
722
723
724
725
726
727
728
729
730
731
732
733
734
735
736
737
738
739
740
741
742
743
744
745
746
747
748
749
750
751
752
753
754
755
756
757
758
759
760
761
762
763
764
765
766
767
768
769
770
771
772
773
774
775
776
777
778
779
780
781
782
783
784
785
786
787
788
789
790
791
792
793
794
795
796
797
798
799
800
801
802
803
804
805
806
807
808
809
810
811
812
813
814
815
816
817
818
819
820
821
822
823
824
825
826
827
828
829
830
831
832
833
834
835
836
837
<!DOCTYPE html>
<html lang=pt-br>
<meta charset=utf-8>
<title>Video - Dive Into HTML5</title>
<!--[if lt IE 9]><script src=j/html5.js></script><![endif]-->
<link rel=alternate type=application/atom+xml href=https://github.com/zenorocha/diveintohtml5/commits/gh-pages.atom>
<link rel=alternate href=http://diveintohtml5.info/video.html hreflang=en>
<link rel=stylesheet href=screen.css>
<style>
body{counter-reset:h1 5}
</style>
<link rel=stylesheet media='only screen and (max-device-width: 480px)' href=mobile.css>
<link rel=prefetch href=index.html>
<a href="https://github.com/zenorocha/diveintohtml5"><img style="position: absolute; top: 0; right: 0; border: 0;" src="https://s3.amazonaws.com/github/ribbons/forkme_right_darkblue_121621.png" alt="Fork me on GitHub"></a>
<p>Você está aqui: <a href=index.html>Home</a> <span class=u>‣</span> <a href=table-of-contents.html#video>Dive Into <abbr>HTML5</abbr></a> <span class=u>‣</span>
<h1><br>Vídeo na Web</h1>
<p id=toc>
<p class=a>❧
<h2 id=divingin>Mergulhando</h2>
<p class=f><img src=i/aoc-q.png alt=Q width=105 height=105>ualquer um que tenha visitado o Youtube.com nos últimos quatro anos sabe que você pode incorporar um vídeo em uma página web. Mas antes do <abbr>HTML5</abbr>, não havia nenhuma maneira baseada nos padrões para fazer isso. Virtualmente todos os vídeos já assistidos “na web” eram afunilados por um plugin de terceiros — talvez QuickTime, talvez RealPlayer, talvez Flash. (YouTube usa Flash.) Esses plugins se integram com seu browser o suficiente que você nem é avisado quando está utilizando eles. Isso é, até o momento em que você tentar assistir um vídeo em uma plataforma que não suporta esse plugin.
<p><abbr>HTML5</abbr> define uma maneira padrão de incorporar vídeo em uma página web, usando o elemento <code><video></code>. O suporte para o elemento <code><video></code> ainda está evoluindo, o que é um modo educado de dizer que ainda não está funcionando. Pelo menos, ele não funciona em todos os lugares. Mas não se desespere! Existem alternativas, fallbacks e uma abundância de opções.
<table class=bc>
<caption>Suporte ao elemento <video></caption>
<thead>
<tr><th title="Internet Explorer">IE<th title="Mozilla Firefox">Firefox<th title="Apple Safari">Safari<th title="Google Chrome">Chrome<th>Opera<th>iPhone<th>Android
<tbody>
<tr><td>9.0+<td>3.5+<td>3.0+<td>3.0+<td>10.5+<td>1.0+<td>2.0+
</table>
<p>Mas o suporte para o elemento <code><video></code> em si é realmente uma pequena parte da história. Antes de falarmos sobre o vídeo da <abbr>HTML5</abbr>, você precisa entender primeiro um pouco sobre vídeo em si. (Se você já sabe sobre vídeo, você pode pular para <a href=#what-works>O Que Funciona na Web</a>.)
<p class=a>❧
<h2 id=video-containers>Embalagens de Vídeo</h2>
<p>Você pode pensar em arquivos de vídeo como “arquivos AVI” ou “arquivos MP4.” Na realidade, “AVI” e “MP4″ são apenas os formatos das embalagens de vídeo. Assim como um arquivo ZIP pode conter qualquer tipo de arquivo dentro dele, os formatos das embalagens de vídeo definem apenas <em>como</em> armazenar as coisas dentro dele, e não <em>quais</em> tipos de dados são armazenados. (É um pouco mais complicado que isso, porque nem todos os fluxos de vídeo são compatíveis com todos os formatos de embalagens, mas esqueça isso por enquanto.)
<p>Um arquivo de vídeo usualmente contém múltiplas <em>faixas</em> — uma faixa de vídeo (sem áudio), além de uma ou mais faixas de áudio (sem vídeo). As faixas usualmente se interlaçam. Uma faixa de áudio contém marcações dentro dela para ajudar na sincronização entre áudio e vídeo. Faixas individuais podem ter metadados, como relações de aspectos de uma faixa de vídeo, ou a linguagem de uma faixa de áudio. Essas embalagens também podem ter metadados, como o título do próprio vídeo, uma capa para o vídeo, números de episódios (para programas de televisão), e por aí vai.
<p>Existem <em>vários</em> formatos para embalagens de vídeo. Os mais populares incluem
<ul>
<li><a href=http://en.wikipedia.org/wiki/MPEG-4_Part_14>MPEG 4</a>, usualmente com a extensão <code>.mp4</code> ou <code>.m4v</code>. A embalagem MPEG 4 é <a href=http://www.chiariglione.org/mpeg/technologies/mp04-ff/index.htm>baseada na antiga embalagem QuickTime da Apple</a> (<code>.mov</code>). <a href=http://www.apple.com/trailers/>Trailers de filmes no site da Apple</a> ainda utilizam a antiga embalagem QuickTime, mas filmes que você aluga no iTunes são entregues na embalagem MPEG 4.</li>
<li><a href=http://en.wikipedia.org/wiki/Flash_Video>Flash</a>, usualmente com a extensão <code>.flv</code>. Vídeos em Flash são, sem surpresa, usados pelo Adobe Flash. Antes do Flash 9.0.60.184 (a.k.a. Flash Player 9 Update 3), esse era o único formato de embalagem que o Flash suportava. Versões mais recentes do Flash também suportam a embalagem MPEG 4.</li>
<li><a href=http://en.wikipedia.org/wiki/Ogg>Ogg</a>, usualmente com a extensão <code>.ogv</code>. Ogg é um padrão aberto, de código livre, e descoberto de quaisquer patentes conhecidas. Firefox 3.5, Chrome 4, e Opera 10.5 suportam — nativamente, sem qualquer plataforma específica de plugins — o formato de embalagem Ogg, Ogg vídeo (chamado “Theora”), e Ogg áudio (chamado “Vorbis”). No desktop, Ogg é suportado fora-da-caixa por todas as principais distribuições Linux, e você pode usá-lo no Mac e Windows ao instalar os <a href=http://www.xiph.org/quicktime/>componentes QuickTime</a> ou <a href=http://www.xiph.org/dshow/>filtros DirectShow</a>, respectivamente. É ainda executado pelo excelente <a href=http://www.videolan.org/vlc/>VLC</a> em todas as plataformas.</li>
<li><a href=http://www.webmproject.org/>WebM</a> é um novo formato de embalagem. É tecnicamente similar a outro formato, chamado <a href=http://en.wikipedia.org/wiki/Matroska>Matroska</a>. WebM foi anunciado em Maio de 2010. Foi projetado para ser usado exclusivamente com o codec de vídeo VP8 e pelo codec de áudio Vorbis. (Mais obre isso em um minuto.) É formato nativamente, sem qualquer plataforma específica de plugins, nas últimas versões do Chromium, Google Chrome, Mozilla Firefox, e Opera. Adobe também anunciou que uma futura versão do Flash irá suportar vídeos em WebM.</li>
<li><a href=http://en.wikipedia.org/wiki/AVI>Audio Video Interleave</a>, usualmente com a extensão <code>.avi</code>. O formato de embalagem AVI foi inventado pela Microsoft em um tempo mais simples, quando o fato de que computadores podiam tocar vídeos já era considerado incrível. Oficialmente não suporta funcionalidades dos mais recentes formatos de embalagens como metadados incorporados. Oficialmente não suporta até mesmo os mais modernos codecs de áudio e vídeo utilizados hoje em dia. Com o tempo, companhias tentaram extendê-lo de forma incompatível para suportar isso ou aquilo, e ainda é o formato de embalagem padrão para encoders como <a href=http://www.mplayerhq.hu/DOCS/HTML/en/encoding-guide.html>MEncoder</a>.</li>
</ul>
<p class=a>❧
<h2 id=video-codecs>Codecs de Vídeo</h2>
<p>Quando você fala sobre “assistir um vídeo,” você está provavelmente falando da combinação de um fluxo de vídeo e um fluxo de áudio. Mas você não tem dois arquivos diferentes; você tem apenas “um vídeo.” Talvez possa ser um arquivo AVI, ou um arquivo MP4. Esses são <a href=#video-containers>apenas formatos de embalagem</a>, como um arquivo ZIP que contém múltiplos tipos de arquivos dentro dele. O formato de embalagem define como serão armazenados os fluxos de vídeo e áudio em um único arquivo.
<p>Quando você “assiste um vídeo,” seu video player está fazendo pelo menos três coisas ao mesmo tempo:
<ol>
<li>Interpretando o formato de embalagem para descobrir quais faixas de vídeo e áudio estão disponíveis, e como elas são armazenadas dentro do arquivo para que possa encontrar os dados que necessitam ser decodificados depois</li>
<li>Decodificando o fluxo de vídeo e exibindo uma série de imagens na tela</li>
<li>Decodificando o fluxo de áudio e enviando o som para as caixas de som</li>
</ol>
<p>Um <i>codec de vídeo</i> é um algoritmo que será encodificado em um fluxo de vídeo, i.e. ele especifica como fazer a seguir. (A palavra “codec” é um <a href=http://en.wikipedia.org/wiki/Portmanteau>portmanteau</a>, a combinação das palavras “codificar” e “decodificar.”) Seu video player <i>decodifica</i> o fluxo de vídeo de acordo com o <i>codec de vídeo</i>, depois exibe uma série de imagens, ou “frames,” na tela. A maioria dos codecs de vídeo modernos usam diversas formas para minimizar a quantidade de informação necessária para exibir um frame atrás do outro. Por exeplo, ao invés de armazenar cada frame individualmente (como um screenshot), eles irão armazenar apenas as diferenças entre os frames. A maioria dos vídeos na realidade não mudam completamente entre um frame e o outro, então isso permite alto grau de compressão, resultando em menores tamanhos de arquivo.
<p>Existem codecs de vídeo <i>com perdas</i> e <i>sem perdas</i>. Vídeos sem perdas são muito grandes para serem usados na web, então irei me concentrar em codecs com perdas. Um <i>codec com perdas</i> significa que informação será irremediavelmente perdida durante o processo de encodificação. Como a cópia do áudio de uma fita cassete, você está perdendo informação sobre a fonte do vídeo, e degradando a qualidade, cada vez que você codifica. Ao invés do “assobio” de uma fita cassete de áudio, uma re-re-re-encodificação de vídeo pode parecer bloqueada, especialmente durante cenas com muita ação. (Na verdade, isso pode acontecer até se você codificar direto da fonte original, se você escolher um codec de vídeo pobre ou passar para ele o conjunto errado de parâmetros.) O lado bom é que codecs de vídeo com perdas podem oferecer taxas de compressão incríveis através da suavização sem bloqueios durante a reprodução, para fazer a perda menos perceptível ao olho humano.
<p>Existe uma <a href=http://samples.mplayerhq.hu/V-codecs/><em>porção</em> de codecs de vídeo</a>. Os três codecs mais relevantes são <a href=#h264>H.264</a>, <a href=#theora>Theora</a>, e <a href=#vp8>VP8</a>.
<h3 id=h264>H.264</h3>
<p><a href=http://en.wikipedia.org/wiki/H.264>H.264</a> mais conhecido como “MPEG-4 part 10,” a.k.a. “MPEG-4 AVC,” a.k.a. “MPEG-4 Advanced Video Coding.” H.264 foi desenvolvido pelo <a href=http://en.wikipedia.org/wiki/Moving_Picture_Experts_Group>MPEG group</a> e padronizado em 2003. Tem por objetivo oferecer um único codec para banda-larga pobre, CPU de dispositivos pobres (celulares); alta banda-larga, alta CPU de dispositivos (computadores modernos); e qualquer coisa no meio disso. Para realizar isso, o padrão H.264 é dividido em “<a href=http://en.wikipedia.org/wiki/H.264#Profiles>perfis</a>,” onde cada um define um conjunto de funcionalidades opcionais que negocia a complexidade pelo tamanho do arquivo. Altos perfis usam mais funcionalidades opcionais, oferecem melhor qualidade visual para tamanhos de arquivo menores, levam mais tempo para codificar, e requerem mais poder da CPU para codificar em tempo real.
<p>Para lhe dar uma ideia da variedade dos perfis, o <a href=http://www.apple.com/iphone/specs.html>iPhone da Apple suporta o perfil Baseline</a>, a <a href=http://www.apple.com/appletv/specs.html>AppleTV suporta os perfis Baseline e Main</a>, e <a href=http://www.kaourantin.net/2007/08/what-just-happened-to-video-on-web_20.html>Adobe Flash em um PC suporta os perfis Baseline, Main, e High</a>. YouTube usa agora o H.264 para codificar <a href=http://blog.wired.com/business/2008/12/youtube-adds-hd.html>vídeos de alta definição</a>, tocados a partir do Adobe Flash; YouTube também provê vídeo codificado com H.264 para dispositivos móveis, incluindo iPhone e telefones rodando o <a href=http://code.google.com/android/>sistema operacional móvel Android</a>. Além do H.264 ser um dos codecs de vídeo mandatários pela especificação do Blu-Ray; discos Blu-Ray que usam ele geralmente utilizam no perfil High.
<p>A maioria dos dispositivos, que não são PCs, tocam vídeo em H.264 (incluindo iPhones e reprodutores de Blu-Ray)
Most non-PC devices that play H.264 video (including iPhones and standalone Blu-Ray players) na verdade realizam a decodificação em um chip dedicado, uma vez que suas CPUs principais estão longe de ter poder o suficiente para decodificar em tempo real. Atualmente, até mesmo placas gráficas de baixo nível suportam decodificação H.264 no hardware. Existem <a href=http://compression.ru/video/codec_comparison/mpeg-4_avc_h264_2007_en.html>codificadores H.264 concorrentes</a>, incluindo o open source <a href=http://www.videolan.org/developers/x264.html>x264</a>. <b>O padrão H.264 está coberto por patentes</b>; licenciamento é intermediado pelo <a href=http://www.mpegla.com/>MPEG LA group</a>. Vídeo H.264 pode ser incorporado nos mais populares <a href=#video-containers>formatos de contêiner</a>, incluindo MP4 (usado primeiramente pela <a href=http://www.apple.com/itunes/whatson/movies.html> iTunes Store da Apple</a>) e MKV (usado primeiramente por entusiastas de vídeo não-comerciais).
<h3 id=theora>Theora</h3>
<p><a href=http://en.wikipedia.org/wiki/Theora>Theora</a> evoluiu do <a href=http://en.wikipedia.org/wiki/Theora#History>VP3 codec</a> e tem sido subseqüentemente desenvolvido pela <a href=http://xiph.org/>Xiph.org Foundation</a>. <b>Theora é um codec livre de royalties e não é onerado por qualquer patente conhecida</b> a não ser a patente original VP3, que foi licenciada livre de royalties. Embora o padrão tenha sido “congelado” desde 2004, o projeto Theora (que inclui um referente codificador e decodificador open source) <a href=http://lists.xiph.org/pipermail/theora-dev/2008-November/003736.html>apenas lançou a versão 1.0 em novembro de 2008</a> e a <a href=http://lists.xiph.org/pipermail/theora-dev/2009-September/003985.html>versão 1.1 em setembro de 2009</a>.
<p>Vídeos em Theora podem ser incorporados em qualquer formato contêiner, embora seja mais visto em Ogg. A maioria das distribuições Linux suportam Theora fora-da-caixa, e o Mozilla Firefox 3.5 <a href=https://developer.mozilla.org/En/Using_audio_and_video_in_Firefox>inclui suporte nativo a vídeos Theora</a> no contêiner Ogg. E por “nativo”, eu digo “disponível em qualquer plataforma sem plugins específicos daquela plataforma.” Você pode também reproduzir vídeos Theora <a href=http://www.xiph.org/dshow/>no Windows</a> ou <a href=http://xiph.org/quicktime/>no Mac OS X</a> após instalar o software open source decodificador Xiph.org’.
<h3 id=vp8>VP8</h3>
<p><a href=http://en.wikipedia.org/wiki/VP8>VP8</a> é outro codec de vídeo da On2, mesma compania que originalmente desenvolveu o VP3 (mais tarde Theora). Técnicamente, ele produz saída em par com o perfil H.264 High, enquanto mantém uma baixa complexidade de decodificação em par com o perfil H.264 Baseline.
<p>Em 2010, a Google adquiriu a On2 e publicou a especificação do codec de vídeo e uma amostra open source do codificador e decodificador. Como parte disso, a Google também “abriu” todas as patentes que a On2 mantinha sobre o VP8, ao licenciar livre de royalties. (Esse é o melhor que você pode esperar para patentes. Na verdade você não pode “lançar” ou anular elas uma vez emitidas. Para torná-las open source, você as licencia livre de royalties, e então qualquer um pode usar a tecnologia que a patente cobre sem pagar qualquer coisa ou negociar as licenças.) A partir de 19 de maio de 2010, <b>VP8 se tornou livre de royalties, um codec moderno e não onerado por qualquer patente conhecida</b>, diferente das patentes que a On2 (agora Google) já licenciou livre de royalties.
<p class=a>❧
<h2 id=audio-codecs>Codecs de Áudio</h2>
<p>A não ser que você ainda esteja parado nos filmes feitos antes de <a href=http://www.filmsite.org/jazz.html>1927</a>, você irá querer uma trilha de som no seu vídeo. Como <a href=#video-codecs>codecs de vídeo</a>, <i>codecs de áudio</i> são algoritmos nos quais fluxos de áudio são codificados. Como codecs de vídeo, os codecs de áudio são <i>com perda</i> e <i>sem perda</i>. E como os codecs de vídeo sem perda, áudios sem perda são realmente muito grandes para colocar na web. Então irei me concentrar em codecs de áudio com perda.
<p>Na verdade, é ainda mais estreito que isso, porque eles estão em diferentes categorias de codecs de áudio com perda. Áudio é usado em lugares onde o vídeo não é (telefonia, por exemplo) e existe toda uma categoria de <a href=http://www.voip-info.org/wiki-Codecs>codecs de áudio otimizados para codificar voz</a>. Você não iria utilizar um desses codecs para um CD de música, porque o resultado seria como uma criança de 4 anos de idade cantando em um viva-voz. Mas você <em>iria</em> usar eles em um <a href=http://www.asterisk.org/>Asterisk</a> PBX, porque a banda é preciosa, e esses codecs podem comprimir a voz humana em uma fração do tamanho que codecs gerais. Entretanto, graças a falta de suporte em ambos navegadores nativos ou plugins terceiros, codecs de áudio otimizados para voz nunca chegaram realmente na web. Então irei concentrar em <i>codecs de áudio com propósito geral</i>.
<p><a href=#video-codecs>Eu mencionei mais cedo</a>, quando você “assiste um vídeo,” seu computador está fazendo ao menos três coisas ao mesmo tempo:
<ol>
<li>Interpretando o contêiner do formato</li>
<li>Decodificando o fluxo de vídeo</li>
<li>Decodificando o fluxo de áudio e enviando o som para os alto-faltantes</li>
</ol>
<p>O <i>codec de áudio</i> especifica como #3 — decodificar o fluxo de áudio e torná-lo em ondas digitais que depois seus alto-falantes transformam em som. Assim como os codecs de vídeo, existem todos os tipos de truques para minimizar a quantidade de informação armazenada em um fluxo de áudio. E já que estamos falando sobre codecs de áudio <i>com perda</i>, a informação está sendo perdida durante a gravação <span class=u>→</span> codificação <span class=u>→</span> decodificação <span class=u>→</span> ciclo de vida da escuta. Diferentes codecs de áudio jogam fora diferentes coisas, mas eles tem o mesmo objetivo: enganar seus ouvidos para não notar as partes que estão faltando.
<p>Um conceito que o áudio tem que o vídeo não tem são os <i>canais</i>. Nós estamos enviando som para os alto-falantes, certo? Bom, quantos alto-falantes você tem? Se você está sentado em um computador, você deve ter apenas dois: um na esquerda e um na direita. Meu desktop tem três: esquerda, direita e mais um no chão. Chamado “<a href=http://en.wikipedia.org/wiki/Surround_sound>surround sound</a>” sistemas podem ter seis ou mais alto-falantes, estratégicamente colocados pelo lugar. Cada alto-falante alimenta um <i>canal</i> em particular da gravação original. A teoria é que você pode sentar no meio dos seis alto-falantes, literalmente cercado por seis diferentes canais do som, e seu cérebro sintetiza eles e parece que você está no meio da ação. Isso funciona? Uma indústria multi-bilionária parece acreditar que sim.
<p>Codecs de áudio com propósito geral podem lidar com dois canais de som. Durante a gravação, o som é dividido no canal da esquerda e da direita; durante a codificação, ambos canais armazenam o mesmo fluxo de áudio; durante a decodificação, ambos canais estão decodificados e cada um é enviado para o alto-falante apropriado. Alguns codecs de áudio podem lidar com mais de dois canais, e irão controlar qual canal é qual e então seu reprodutor de áudio pode enviar para o som da direita para o alto-falante da direita.
<p>Existem <em>muitos</em> codecs de áudio. Eu disse que haviam muitos codecs de vídeo? Esqueça isso. Existem <a href="http://wiki.multimedia.cx/index.php?title=Category:Audio_Codecs">dezenas e dezenas de codecs de áudio</a>, mas na web, existem apenas que você deveria conhecer mais sobre: <abbr>MP3</abbr>, <abbr>AAC</abbr>, e Vorbis.
<h3 id=mp3>MPEG-1 Audio Layer 3</h3>
<p><a href=http://en.wikipedia.org/wiki/MPEG-1_Audio_Layer_3>MPEG-1 Audio Layer 3</a> é coloquialmente conhecido como “MP3.” Se você nunca ouviu falar de MP3s, eu não sei o que fazer com você. <a href="http://www.walmart.com/catalog/catalog.gsp?cat=96469">Walmart vende reprodutores de música portáveis</a> e os chama de “MP3 players.” <em>Walmart.</em> Em todo caso…
<p>MP3s podem conter <strong>até dois canais</strong> de som. Eles podem ser codificados em diferentes <i>taxas de bits</i>: 64 kbps, 128 kbps, 192 kbps, e uma varidade de outros de 32 à 320. Altas taxas de bits significam tamanhos de arquivos maiores e melhor qualidade no áudio, embora a relação da taxa da qualidade com a taxa de bits não seja linear. (128 kbps soa duas vezes melhor que 64 kbps, mas 256 kbps não soa o dobro melhor que 128 kbps.) Além disso, o formato MP3 permite <i>codificação variável na taxa de bits</i>, o que significa que algumas partes do fluxo de codificação são mais comprimidas que outras. Por exemplo, silêncio entre as notas podem ser codificadas em uma baixa taxa de bits, então a taxa de bits pode aumentar um momento mais tarde quando múltiplos instrumentos começam a tocar um acorde complexo. MP3s também podem ser codificados em uma taxa de bits constante, que, sem surpresas, é chamado de <i>codificação a taxas de bits constantes</i>.
<p>O padrão MP3 não define exatamente como codificar MP3s (embora defina exatamente como devemos decodificá-los); diferentes codificadores usam diferentes modelos psicoacústicos que produzem resultados descontroladamente diferentes, mas são todos decodificados pelos mesmos players. O projeto open source <a href=http://lame.sourceforge.net/>LAME</a> é o melhor codificador gratuito, e sem dúvida o melhor codificador, ponto final, para todos menos para baixas taxas de bits.
<p>O formato MP3 (padronizado em 1991) <strong>é coberto de patentes</strong>, que explicam porque Linux não pode̵ tocar arquivos MP3 fora da caixa. Praticamente todos os players de música portáveis suportam arquivos MP3s, e os fluxos de áudio MP3 podem ser embutidos em qualquer <a href=http://diveintomark.org/archives/2008/12/18/give-part-1-container-formats>container de vídeo</a>. Adobe Flash pode ambos, arquivos MP3 e fluxo de áudio MP3 com um container de vídeo MP4.
<h3 id=aac>Codificação de Áudio Avançada</h3>
<p><a href=http://en.wikipedia.org/wiki/Advanced_Audio_Coding>Codificação de Áudio Avançada</a> é efetivamente conhecida como "AAC" (Advanced Audio Coding). Padronizada em 1997, deu uma "levantada" proeminente quando a Apple escolheu o MP3 como formato padrão para a iTunes Store. Originalmente, todos os arquivos "AAC" “comprados” pela loja do iTunes eram criptografados com um esquema DRM proprietário da Apple, chamado <a href=http://en.wikipedia.org/wiki/FairPlay>FairPlay</a>. Músicas selecionadas na loja iTunes agora estão disponíveis como arquivos desprotegidos AAC, que a Apple chama de “iTunes Plus” pois soa muito melhor do que chamar todo o resto de “iTunes Minus.” <strong>O formato AAC é coberto de patentes</strong>; <a href=http://www.vialicensing.com/Licensing/AAC_fees.cfm> taxas de licença são disponibilizadas online</a>.
<p>AAC foi desenvolvido para promover uma qualidade de som melhor que MP3 na mesma <i>taxa de bits</i>, e pode codificar áudio em qualquer taxa de bits. (MP3 é limitado a um número fixo de taxa de bits, com um limite superior de 320 kbps.) AAC pode codificar <strong>até 48 canais de som</strong>, embora na prática ninguém faça isso. O formato AAC também difere do MP3 na definição de múltiplos <i>perfis</i>, na maioria das vezes como <a href=http://diveintomark.org/archives/2008/12/19/give-part-2-lossy-video-codecs#h264>H.264</a>, e pelas mesmas razões. O perfil de “baixa complexidade” é desenvolvido para ser reproduzido em tempo real em dispositivos com poder de CPU limitado, enquanto perfis altos oferecem melhor qualidade na mesma taxa de bits ao preço de lentidão na codificação ou decodificação.
<p>Todos os atuais produtos da Apple, incluindo iPods, AppleTV, e QuickTime suportam alguns perfis de AAC tanto em arquivos de áudio e em fluxos de áudio dentro um container de vídeo MP4. Adobe Flash suporta todos os perfis de AAC em MP4, como fazem os reprodutores de vídeo MPlayer e VLC. Para codificação, a biblioteca FAAC é a opção open source; o suporte é uma opção em tempo de compilação em mencoder e ffmpeg.
<h3 id=vorbis>Vorbis</h3>
<p><a href=http://en.wikipedia.org/wiki/Vorbis>Vorbis</a> também chamado de “Ogg Vorbis,” embora esteja técnicamente incorreto. (“Ogg” e apenas um<a href=#video-containers>formato de container </a>, e fluxos de áudio Vorbis podem ser embutido em outros containers.) <strong>Vorbis não é coberto por nenhuma patente conhecida</strong> e portanto é suportado fora da caixa pela maioria das distribuições Linux e dispositivos portáteis rodando o open source <a href=http://www.rockbox.org/>Rockbox</a> firmware. Mozilla Firefox 3.5 suporta arquivos de áudio Vorbis em um container Ogg, ou Ogg vídeos com uma faixa de áudio Vorbis. <a href=http://code.google.com/android/>Android</a> celulares também podem reproduzir arquivos de audio Vorbis. streams de audio Vorbis geralmente sao embutidas em um Ogg ou em WebM contêiner, mas ele também podem ser<a href=http://samples.mplayerhq.hu/MPEG-4/vorbis-in-mp4/>embutidos em um MP4</a> ou <a href=http://en.wikipedia.org/wiki/Matroska>MKV</a> container (ou, com algum hacking, <a href=http://www.alexander-noe.com/video/amg/>em AVI</a>). Vorbis suporta <strong>um numero arbitrário de canais de som</strong>.
<p>Existem codificadores e decodificadores Vorbis open source, incluindo <a href=http://oggconvert.tristanb.net/>OggConvert</a> (codificador), <a href=http://www.ffmpeg.org/>ffmpeg</a> (decodificador), <a href=http://www.geocities.jp/aoyoume/aotuv/>aoTuV</a> (codificador), e <a href=http://downloads.xiph.org/releases/vorbis/>libvorbis</a> (decodificador). Também existem <a href=http://www.xiph.org/quicktime/>Componentes QuickTime para Mac OS X</a> e <a href=http://www.xiph.org/dshow/>Filtros DirectShow para Windows</a>.
<p class=a>❧
<h2 id=what-works>O que funciona na Web</h2>
<p>Se os seus olhos não estão vidrados ainda, você está melhor que a maioria. Como você pode dizer, vídeo (e áudio) é um assunto complicado e esta foi a versão abreviada! Eu tenho certeza que você está se perguntando como tudo isso se relaciona com <abbr>HTML5</abbr>. Bem, <abbr>HTML5</abbr> inclue um elemento <code><video></code> para embutir vídeos em uma página web. Não há restrição no codec do vídeo, codec do áudio ou no formato de container que você pode usar para seu vídeo. Um elemento <code><video></code> pode ter um link para múltiplos arquivos de vídeos, e o navegador escolhe qual o primeiro vídeo que irá reproduzir. <strong>Cabe a você saber qual navegador suporta qual containers e codecs.</strong>
<p>Como está escrito, está é a paisagem do vídeo <abbr>HTML5</abbr>:
<ul>
<li>Mozilla Firefox (3.5 e superior) suporta vídeo Theora e áudio Vorbis em container Ogg. Firefox 4 também suporta WebM.
<li>Opera (10.5 e superior) suporta vídeo Theora e áudio Vorbis em um container Ogg. Opera 10.60 também suporta WebM.
<li>Google Chrome (3.0 e superior) suporta vídeo Theora e áudio Vorbis em um container Ogg. Google Chrome 6.0 também suporta WebM.
<li>Safari no Macs e PCs Windows (3.0 e superior) irão suportar tudo que o QuickTime suporta. Em teoria, você não pode requerer que seus usuários instalem plugins QuickTime de terceiros. Na prática, alguns usuários estão fazendo isto. Então você é deixado com os formatos que o QuickTime suporta "fora da caixa." Esta é uma lista longa, mas não inclue WebM, Theora, Vorbis, ou o container Ogg. Contudo, QuickTime <em>fornece</em> suporte para vídeo H.264 (perfil principal) e áudio AAC em um container MP4.
<li>Celulares como iPhone da Apple e celulares com Android da Google suportam vídeo H.264 (perfil de base) e áudio AAC (perfis de "baixa complexidade") em um container de MP4.
<li>Adobe Flash (9.0.60.184 e superior) suporta vídeos H.264 (todos os perfis) e áudio AAC (todos os perfis) em um container MP4.
<li>Internet Explorer 9 suporta todos os perfis de vídeos H.264 ou AAC ou áudio MP3 em um container MP4. Também irá reproduzir vídeo WebM se você instalar algum codec de terceiro, que por padrão não é instalado por nenhuma versão do Windows. IE9 não suporta outros codecs de terceiros (ao contrário do Safari, que vai reproduzir tudo que o QuickTime pode reproduzir).
<li>Internet Explorer 8 não tem suporte de vídeo <abbr>HTML5</abbr> em geral, mas praticamente todos os usuários de Internet Explorer terão o plugin Adobe Flash. Mais adiante neste capítulo, Eu vou mostrar para você como usar vídeo <abbr>HTML5</abbr> e gerar um fallback em Flash.
</ul>
<p>Isto deve ser mais fácil de digerir em forma de tabela.
<table class=bc>
<caption>Suporte de codecs de vídeo nos navegadores atualmente</caption>
<thead>
<tr><th style="text-align:left">Codecs/container<th title="Internet Explorer">IE<th title="Mozilla Firefox">Firefox<th title="Apple Safari">Safari<th title="Google Chrome">Chrome<th>Opera<th>iPhone<th>Android
<tbody>
<tr><th>Theora+Vorbis+Ogg<td>·<td>3.5+<td>†<td>5.0+<td>10.5+<td>·<td>·
<tr><th>H.264+AAC+MP4<td>·<td>·<td>3.0+<td>5.0–?‡<td>·<td>3.0+<td>2.0+
<tr><th>WebM<td>·<td>·<td>†<td>6.0+<td>10.6+<td>·<td>·
<tfoot>
<tr><td colspan=8 style="text-align:left">† Safari irá reproduzir tudo que o QuickTime reproduz. QuickTime vem pre-instalado com suporte H.264/AAC/MP4. Existem plugins de terceiros instalaveis que provém suporte para Theora e WebM, mas cada usuário precisa instalar esses plugins antes do Safari reconhecer os formatos dos vídeos.
<tr><td colspan=8 style="text-align:left">‡ Google Chrome irá <a href=http://blog.chromium.org/2011/01/html-video-codec-support-in-chrome.html>perder o suporte a H.264</a> em breve. <a href=http://blog.chromium.org/2011/01/more-about-chrome-html-video-codec.html>Ler sobre o por que</a>.
</table>
<p>Daqui há um ano, a paisagem vai parecer significativamente diferente com WebM implementado em múltiplos navegadores, estes navegadores habilitarão versões não-experimentais do WebM, e atualizações dos usuários para as novas versões.
<table class=bc>
<caption>Suporte de codecs de vídeo nos navegadores futuramente</caption>
<thead>
<tr><th style="text-align:left">Codecs/container<th title="Internet Explorer">IE<th title="Mozilla Firefox">Firefox<th title="Apple Safari">Safari<th title="Google Chrome">Chrome<th>Opera<th>iPhone<th>Android
<tbody>
<tr><th>Theora+Vorbis+Ogg<td>·<td>3.5+<td>†<td>5.0+<td>10.5+<td>·<td>·
<tr><th>H.264+AAC+MP4<td>9.0+<td>·<td>3.0+<td>·<td>·<td>3.0+<td>2.0+
<tr><th>WebM<td> 9.0+<sup>*</sup><td>4.0+<td>†<td>6.0+<td>10.6+<td>·<td>2.3‡<sup>
<tfoot>
<tr><td colspan=8 style="text-align:left">* Internet Explorer 9 vai suportar apenas WebM “<a href="http://windowsteamblog.com/windows/b/bloggingwindows/archive/2010/05/19/another-follow-up-on-html5-video-in-ie9.aspx">quando o usuario tiver instalado um codec VP8</a>, "o que implica que a Microsoft não enviará o codec deles mesmos.
<tr><td colspan=8 style="text-align:left">* Safari irá reproduzir tudo que o QuickTime pode reproduzir, mas QuickTime vem apenas com suporte H.264/AAC/MP4 pré-instalado.
<tr><td colspan=8 style="text-align:left">* Embora o Android 2.3 suporte WebM, ainda não existem decodificadores de hardwares, dessa forma a vida da bateria é uma preocupação.
</table>
<p>E agora para o soco de nocaute:
<div class=pf>
<h4>Professor Marcação Diz</h4>
<div class=inner>
<blockquote><p>Não existem únicas combinações de contêiners e codecs que funcionem em todos os navegadores <abbr>HTML5</abbr>.
<p>E isso não vai mudar em um futuro tão próximo.
<p>Para fazer seu vídeo assistível em todos esses dispositivos e plataformas, você precisará codificar seu vídeo mais de uma vez.
</blockquote>
</div>
</div>
<p>Para máxima compatibilidade, aqui está o fluxo de trabalho com o que seu vídeo deve parecer.
<ol>
<li>Fazer uma versão que usa WebM (VP8 + Vorbis).
<li>Fazer outra versão que use linhas de bases de vídeo H.264 e audio AAC "baixa complexidade" em um contêiner MP4.
<li>Fazer outra versão que use vídeo Theora e audio Vorbis em um contêiner Ogg.
<li>Linkar todos os três arquivos de vídeo apartir de um único elemento <code><video></code>, e um "fallback" para um reprodutor de vídeo flash.
</ol>
<p class=a>❧
<h2 id=licensing>Problemas de Licenciamento com vídeo H.264</h2>
<p>Antes de nós continuarmos, eu preciso salientar que há um custo em codificar seu vídeo duas vezes. Bem, existe um custo óbvio, que você tem que codificar seu vídeo duas vezes, o que consome mais computador e mais tempo do que se fosse feito apenas uma vez. Mas há outro custo real associado com vídeo H.264: custos de licenciamento.
<p>Se lembram quando eu expliquei <a href=#h264>vídeo H.264</a>, e eu mencionei que o codec de vídeo tem patentes-embutidas e o licenciamento foi quebrado pelo consórcio MPEG LA. Isso acaba sendo importante. Para entender porque isso é importante, eu te direciono para <a href="http://www.streamingmedia.com/Articles/Editorial/Featured-Articles/The-H.264-Licensing-Labyrinth-65403.aspx">O labirinto do licenciamento H.264</a>:
<blockquote>
<p>MPEG LA Divide a licença de portifólio H.264 em duas sub-licenças: uma para manufaturas de codificadores e decodificadores e a outra para distribuidores de conteúdo. …
<p>A sub-licença do lado dos distribuidores fica ainda mais dividida em quatro sub-categorias chaves, duas delas (assinaturas e aquisição título-por-título ou uso remunerado) são ligados ao fato de que o usuário final paga diretamente pelo serviço de vídeos, e dois deles (televisão "gratuita" e broadcast de internet) são ligados a remuneração por outras fontes que não seja o espectador final. …
<p>A taxa de licenciamento para televisão "gratuita" é baseada em uma das duas opções de royalties. A primeiro é um pagamento único de $2,500 por transmissão codificada AVC, que cobre um codificador AVC "usado por ou a favor da licença de transmissão de vídeo AVC para o úsuario final" que é quem irá decodificar e visualizá-lo. Se você está se perguntando se isso é um encargo duplo, a resposta é sim: A taxa da licença já foi cobrada do codificador manufaturado, e o broadcast vai em turnos pagar uma das duas opções de royalties.
<p>A segunda taxa de licenciamento é anual. [A] taxa anual de broadcast é dividida pelo tamanho da audiência:
<ul>
<li>$2,500 por ano por mercado de broadcasts de 100,000–499,999 famílias de televisão
<li>$5,000 por ano por mercado de broadcasts de 500,000–999,999 famílias de televisão
<li>$10,000 por ano por mercado de broadcasts de 1,000,000 ou mais famílias de televisão
</ul>
<p> Com toda a questão da televisão "livre" por que alguém envolvido em entregas não-broadcast se importaria? Como eu mencionei antes, as taxas de participação são aplicáveis para cada entrega de conteúdo. Depois de definir que televisão "livre" significa mais do que apenas "over-the-air", MPEG LA passou a definir as taxas de licenciamento para transferencia na internet via "vídeo AVC que é entregue em todo mundo para um usuário final para que o usuário final não pague pelo direito de receber ou ver". Em outras palavras, qualquer transmissão pública, seja "over-the-air", cabo, satélite, ou internet estão sujeitas a taxas de participação. …
<p>As taxas são potencialmente mais íngrimes para transmissões pela internet, talvez sabendo que a entrega na internet irá crescer muito mais rápido do que OTA ou televisão "livre" via cabo ou satélite. Adicionando a televisão "livre" as taxas do mercado da transmissão juntas com a taxa adicional. MPEG LA garantirá um indulto durante o tempo da primeira licença, que acaba em 31 de Dez de 2010, e note que "após a primeira licença o royalties não será mais do que equivalente econômico dos royalties pagos durante o mesmo tempo de televisão livre.”
</blockquote>
<p>A última parte - Sobre a estrutura das taxas para transmissão pela internet - já foi alterada. A <abbr>MPEG-LA</abbr> recentemente <a href="http://www.mpegla.com/Lists/MPEG%20LA%20News%20List/Attachments/226/n-10-02-02.pdf" title="warning: PDF">anunciou</a> que o streaming de internet não seria cobrado. Que <em>não</em> significa que H.264 é livre de royalties para todos os usuários. Em particular, codificadores ( Como o que processa o upload de vídeo do YouTube ) e codificadores (como o que esta incluso no Microsoft Internet Explorer 9) ainda são assuntos de taxas de licenciamento. Veja <a href=http://shaver.off.net/diary/2010/08/27/free-as-in-smokescreen/>Livre como em uma tema de fumaça</a> para maiores informações.
<p class=a>❧
<h2 id=miro>Codificando Vídeo com <br>Miro Video Converter</h2>
<p>Existem muitas ferramentas para codificar vídeo, e há muitas opções de codificação de vídeo que afetam sua qualidade. Se você não deseja tomar o tempo para entender nada sobre codificação de vídeo, esta seção é para você.
<p><dfn>Miro Video Converter</dfn> é programa de código aberto para codificação de vídeo em múltiplos formatos com licença GPL. <a href=http://www.mirovideoconverter.com/>Faça aqui o download para Mac OS X ou Windows</a>. Ele suporta todos os formatos de saída mencionados neste capítulo. Não oferece opções além de escolher um arquivo de vídeo e escolher um formato de saída. Pode receber virtualmente qualquer arquivo de vídeo como entrada, incluindo vídeo DV produzidos por filmadoras. Produz uma saída com qualidade razoável com a maioria dos vídeos. Devido a sua falta de opções, se você estiver descontente com a saída, você não tem mais recursos além de tentar outro programa.
<p>Para começar, Apenas inicie a aplicação Miro Video Converter.
<div class=c>
<p class="legend top">Tela principal do Miro Video Converter<span class=arrow>↷</span><br></p>
<p><img src=i/miro-01.png alt="Tela principal do Miro Video Converter" width=365 height=445>
</div>
<p>Clique em "Escolher arquivo" e selecione o vídeo que você quer codificar.
<div class=c>
<p class="legend top"> "Escolher arquivo" <span class=arrow>↷</span><br></p>
<p><img src=i/miro-02.png alt="Conversor Miro Video depois de escolher um arquivo" width=365 height=445>
</div>
<p>O menu dropdown "Escolha um dispositivo ou um formato de vídeo" lista uma variedade de dispositivos e formatos. Para o propósito deste capítulo, nós estamos interessados em três deles.
<ol>
<li><em>WebM (vp8)</em> é video WebM (<a href=#vp8>video VP8</a> e <a href=#vorbis>audio Vorbis </a> em um contêiner WebM).
<li><em>Theora</em> é <a href=#theora>vídeo Theora</a> e <a href=#vorbis>audio Vorbis</a> em um contêiner Ogg.
<li><em>iPhone</em> é <a href=#h264>Perfil de Linha de base de video H.264</a> e <a href=#aac>AAC audio de baixa-complexidade</a> em um contêiner MP4.
</ol>
<p>Primeiro selecione "WebM".
<div class=c>
<p class="legend top">Escolha a saída WebM<span class=arrow>↷</span><br></p>
<p><img src=i/miro-03.png alt="Conversor Miro Video: escolhendo formato de saída WebM" width=365 height=445>
</div>
<p>Click no botão "Converter" e o conversor Miro Video vai imediatamente começar a codificar seu vídeo. O arquivo de saida será nomeado <code>ARQUIVOFONTE.webm</code> e vai ser salvo no mesmo diretório do vídeo de origem.
<div class=c>
<p class="legend top">Você ficará olhando para esta tela<br>por um bom tempo <span class=arrow>↷</span><br></p>
<p><img src=i/miro-04.png alt="Conversor Miro Video: Processo de codificação WebM" width=365 height=445>
</div>
<p>Uma vez que a codificação for completada, você será mandado de volta para a tela principal. Desta vez, selecione "Theora" na lista de dispositivos e formatos.
<div class=c>
<p class="legend top">Hora do Theora <span class=arrow>↷</span><br></p>
<p><img src=i/miro-08.png alt="Conversor Miro Video: escolhendo formato de saída Theora" width=365 height=445>
</div>
<p>É isto; aperte o botão de "Converter" novamente para codificar seu vídeo Theora. O vídeo vai ser nomeado <code>ARQUIVOFONTE.theora.ogv</code> e será salvo no mesmo diretório do arquivo de origem.
<div class=c>
<p class="legend top">Hora de tomar um cafézinho<span class=arrow>↷</span><br></p>
<p><img src=i/miro-09.png alt="Conversor Miro Video: Processo de codificação Theora" width=365 height=445>
</div>
<p>Finalmente, codifique seu vídeo H.264 compatível com iPhone selecionando "iPhone" na lista de dispositivos e formatos.
<div class=c>
<p class="legend top">iPhone, não iPhone 4 <span class=arrow>↷</span><br></p>
<p><img src=i/miro-05.png alt="Conversor Miro Video: escolhendo formato de saida compativel com Iphone" width=365 height=445>
</div>
<p>Para vídeo compativel com iPhone, o Conversor Miro Video dará a você uma opção de enviar o arquivo codificado para sua biblioteca iTunes. Eu não tenho uma opinião formada se você gostaria de fazer isto, mas isto não é necessário para publicar vídeo na web.
<div class=c>
<p class="legend top">Não envie para o iTunes<span class=arrow>↷</span><br></p>
<p><img src=i/miro-06.png alt="Conversor Miro Video: Checkbox Envie para o iTunes" width=365 height=445>
</div>
<p>Aperte o botão mágico "Converter" e aguarde. O arquivo codificado será nomeado <code>ARQUIVOFONTE.iphone.mp4</code> e vai ser salvo no mesmo diretório do arquivo de origem.
<div class=c>
<p class="legend top">Faça yoga ou algo parecido<span class=arrow>↷</span><br></p>
<p><img src=i/miro-07.png alt="Conversor Miro Video: Progresso de codificação H.264" width=365 height=445>
</div>
<p>Você deverá ter três arquivos de vídeo ao lado do seu arquivo de vídeo fonte. Se você estiver satisfeito com a qualidade do vídeo, avance para <a href=#markup>Enfim, a Marcação</a> para ver como montar eles em um único elemento <code><vídeo></code> que funcione cross-browsers. Se você gostaria de aprender mais sobre outras ferramentas ou codificação de vídeo, leia.
<p class=a>❧
<h2 id=firefogg>Codificando Vídeo Ogg com Firefogg</h2>
<p>(Nesta seção, eu vou usar "Video Ogg" como abreviação para "Vídeo Theora e Áudio Vorbis em um contêiner Ogg". Esta é a combinação de codecs+contêiners que funcionam nativamente no Mozilla Firefox e Google Chrome.)
<p><dfn>Firefogg</dfn> é uma extensão do Firefox open source, com licença GPL para codificar vídeo Ogg. Para usar isto, você vai precisar instalar <a href=http://www.getfirefox.com/>Mozilla Firefox</a> 3.5 ou mais recente, e visitar <a href=http://firefogg.org/>firefogg.org</a>.
<p class="legend top">Página inicial do Firefogg <span class=arrow>↷</span><br></p>
<p><img src=i/firefogg-01.png alt="Página inicial do Firefogg" width=800 height=600>
<p>Clique "Instalar Firefogg." Firefox irá perguntar se você realmente quer autorizar o site a instalar uma extensão. Clique "Permitir" para continuar.
<p class="legend top" style="text-align:right"><span class=arrow>↶</span> Permitir instalação do Firefogg
<p><img src=i/firefogg-02.png alt="Instalação do software: Firefogg" width=800 height=600>
<p>Firefox vai apresentar a janela de instalação do software padrão. Clique "Instalar" para continuar.
<p class="legend top" style="text-align:center">Instalar Firefogg<span class=arrow>↷</span><br></p>
<p class=c><img src=i/firefogg-03.png alt="Janela de instalação de software do Firefox" width=547 height=367>
<p>Clique "Reiniciar Firefox" para completar a instalação.
<p class="legend top" style="text-align:center"><span class=arrow>↶</span> Reiniciar Firefox
<p class=c><img src=i/firefogg-04.png alt="Janelas de notificações do Firefox após a instalação" width=520 height=380>
<p>Depois de reiniciar o Firefox, <code>firefogg.org</code> vai confirmar que o Firefogg foi instalado com sucesso.
<p class="legend top">Instalação completada com sucesso <span class=arrow>↷</span><br></p>
<p><img src=i/firefogg-05.png alt="Página inicial do Firefogg após instalação" width=800 height=600>
<p>Clique "Criar vídeo Ogg" para iniciar o processo de codificação.
<p class="legend top" style="text-align:right"><span class=arrow>↶</span> Vamos criar um vídeo!
<p><img src=i/firefogg-06.png alt="Firefogg: Criando Video Ogg" width=800 height=600>
<p>Clique "Selecione o arquivo" para selecionar seu vídeo de origem.
<p class="legend top">Selecione seu arquivo de vídeo<span class=arrow>↷</span><br></p>
<p><img src=i/firefogg-07.png alt="Firefogg: Selecione o arquivo" width=800 height=600>
<p>Firefogg tem seis "abas":
<ol>
<li>Predefinições. A predefinição padrão é "vídeo web," o que é bom para nosso propósito.
<li>Limite de Codificação. Codificar vídeo pode levar um bom tempo. Quando você estiver começando, talvez você queira codificar apenas partes do seu vídeo (como, os primeiros 30 segundos) até que você encontre uma combinação de configurações que você goste.
<li>Qualidade básica e controle de resolução. Esta é onde estão a maioria das opções importantes.
<li>Metadata. Eu não vou cobrir isto aqui, mas você pode adicionar metadata ao seu codificador de vídeo como título e autor. Provavelmente você tem adicionado metadata a sua coleção de música com iTunes ou algum outro gerenciador de musicas. É a mesma idéia.
<li>Controle avançado de codificação de vídeo. Não mecha com este a menos que saiba o que está fazendo. (Firefogg oferece ajuda interativa na maioria destas opções. Clique no simbolo "i" próximo a cada opção para aprender mais a respeito.)
<li>Controle avançado de codificação de áudio. Novamente, Não mecha com este a menos que saiba o que está fazendo.
</ol>
<p><img src=i/firefogg-08.png alt="Interface principal do Firefogg" width=800 height=600>
<p id=firefogg-options>A única opção que eu vou cobrir estão na tabela "Qualidade básica e controle de resolução". Ela contém todas as opções importantes:
<ul>
<li>Qualidade de Vídeo. É mensurada em uma escala de 0 (menor qualidade) a 10 (maior qualidade). Números altos significam tamanhos de arquivos maiores, então você terá de experimentar para determinar qual a melhor relação tamanho/qualidade para sua necessidade.
<li>Qualidade de Áudio. É mensurada em uma escala de -1 (menor qualidade) a 10 (maior qualidade). Números altos significam tamanhos de arquivos maiores, assim como as configurações de qualidade de vídeo.
<li>Vídeo Codec. Sempre deve ser "Theora"
<li>Áudio Codec. Sempre deve ser "Vorbis"
<li>Largura e comprimento de vídeo. Este é o padrão atual de largura e comprimento do seu vídeo fonte. Se você deseja redimensionar o vídeo durante a codificação, você pode trocar a largura (ou comprimento) aqui. Firefogg vai automaticamente ajustar as outras dimensões para manter as proporções originais (então seu vídeo não terminará esticado ou amassado).
</ul>
<p><img src=i/firefogg-09.png alt="Firefogg Qualidade básica e controle de resolução" width=800 height=600>
<p>Neste exemplo, vou redimensionar o vídeo para metade do tamanho original de largura. Note como o Firefogg automaticamente ajusta o comprimento.
<p class="legend top">Ajustando largura e comprimento de vídeo<span class=arrow>↷</span><br></p>
<p><img src=i/firefogg-10.png alt="Firefogg: setando largura e comprimento do vídeo" width=800 height=600>
<p>Uma vez expandido com todos os botões, clique em "Save Ogg" para inicar o processo de codificação atual. Firefogg vai perguntar para você um nome de arquivo para o vídeo codificado.
<p class="legend top">"Salvar Ogg"<span class=arrow>↷</span><br></p>
<p><img src=i/firefogg-12.png alt="Firefogg: Salvar Ogg" width=800 height=600>
<p>Firefogg vai mostrar uma bela barra de progresso enquanto ele codifica seu vídeo. Tudo que você tem que fazer é aguardar ( e aguardar, e aguardar)!
<p class="legend top" style="text-align:right"><span class=arrow>↶</span> Processo de codificação
<p><img src=i/firefogg-13.png alt="Firefogg: Processo de Codificação" width=800 height=600>
<p class=a>❧
<h2 id=ffmpeg2theora>Codificação em Lotes de Vídeos Ogg com ffmpeg2theora</h2>
<p>(Como na seção anterior, nesta eu vou usar "Video Ogg", como encurtamento de "Theora vídeo e áudio Vorbis em um contêiner Ogg". Esta é a combinação de codecs+contêiners que funciona nativamente no Mozilla Firefox e Google Chrome.)
<p>Se você está procurando por uma codificação em lotes de diversos arquivos de vídeo Ogg e você quer automatizar o processo, você definitivamente deveria dar uma olhada no <a href=http://v2v.cc/~j/ffmpeg2theora/>ffmpeg2theora</a>.
<p>O ffmpeg2theora é uma aplicação para codificação de vídeos Ogg de código livre e licença GPL. Binários pré-compilados estão disponíveis<a href=http://v2v.cc/~j/ffmpeg2theora/download.html> para Mac OS X, Windows, e distribuições Linux modernas</a>. Ele pode pegar virtualmente qualquer tipo de arquivo como entrada, incluindo vídeos DV produzidos por câmeras simples, não profissionais.
<p>Para usar o ffmpeg2theora, você precisará chamá-lo pela linha de comando. (No Mac OS X, abra Aplicações <span class=u>→</span> Utilitários <span class=u>→</span> Terminal. No Windows, abra o seu menu Iniciar <span class=u>→</span> Programas <span class=u>→</span> Acessórios <span class=u>→</span> Prompt de Comando.)
<p>O ffmpeg2theora tem diversos parâmetros de linha de comando. (Escreva <code>ffmpeg2theora --help</code> para ler sobre todos eles.) Eu irei focar em apenas três deles.
<ul>
<li><code>--video-quality Q</code>, onde “Q” é um número entre 0–10.
<li><code>--audio-quality Q</code>, onde “Q” é um número entre -2–10.
<li><code>--max_size=WxH</code>, onde “W” e “H” são a largura e altura máximos que você deseja para o vídeo (o "x" entre eles é realmente apenas a letra "x"). O ffmpeg2theora irá redimensionar o vídeo proporcionalmente para ajustar a estas dimensões, então o vídeo codificado deverá ser menor que <code>W×H</code>. Por exemplo, realizar a codificação de um vídeo 720×480 com tamanho máximo <code>--max_size 320x240</code> irá produzir um arquivo que será <code>230×213</code>.
</ul>
<p>Assim, aqui está como você deve codificar um vídeo com as mesmas configurações que nós usamos na seção anterior (<a href=#firefogg>codificação com Firefogg</a>).
<pre><samp class=p>you@localhost$ </samp><kbd>ffmpeg2theora --videoquality 5</kbd>
<samp class=p> </samp><kbd> --audioquality 1</kbd>
<samp class=p> </samp><kbd> --max_size 320x240</kbd>
<samp class=p> </samp><kbd> pr6.dv</kbd></pre>
<p>O vídeo codificado será salvo no mesmo diretório do arquivo de vídeo original, com a extensão <code>.ogv</code> adicionada. Você pode especificar um lugar diferente e/ou um nome diferente passando os seguintes parâmetros <code>--output=/path/to/encoded/video</code> para o ffmpeg2theora.
<p class=a>❧
<h2 id=handbrake-gui>Codificando Vídeos H.264 com o HandBrake</h2>
<p>(Nesta seção, eu irei usar "vídeo H.264" como uma abreviação para "Conjunto de especificações e perfis de vídeo H.264 e Perfil de áudio de baixa complexidade AAC em um container MPEG-4". Esta é a combinação de codificadores+containers que funcionam nativamente no Safari, no Adobe Flash, no iPhone e nos aparelhos que utilizam Google Android.)
<p>Tirando as <a href=#licensing>questões de licenciamento</a>, o jeito mais fácil de codificar um vídeo H.264 é usar o <a href=http://handbrake.fr/>HandBrake</a>. O HandBrake é uma aplicação para codificação de vídeos H.264 open source, com licença GPL (as versões anteriores realizavam codificações para outros formatos de vídeo também, mas na última versão os desenvolvedores resolveram retirar o suporte para a maioria dos outros formatos e estão focando todos seus esforços nos vídeos H.264). Os <a href=http://handbrake.fr/downloads.php>binários pré-compilados estão disponíveis</a> para Windows, Mac OS X e distribuições Linux modernas.
<p>O HandBrake possui duas versões: gráfica e linha de comando. Eu irei fazer um passo-a-passo da interface gráfica primeiro, então veremos quais são as configurações recomendadas traduzidas para a versão de linha de comando.
<p>Depois de abrir a aplicação HandBrake a primeira coisa a fazer é selecionar o seu vídeo de origem. Clique em "Origem" no menu dropdown e escolha "Arquivo de Vídeo" para selecionar um arquivo. O HandBrake teoricamente pode pegar qualquer arquivo de vídeo como origem, incluindo vídeos DV produzidos por câmeras simples.
<p class="legend top">Selecione seu vídeo de Origem <span class=arrow>↷</span><br></p>
<p><img src=i/handbrake-01.png alt="HandBrake: selecione o arquivo de origem" width=800 height=600>
<p>O HandBrake irá reclamar que você não configurou um diretório padrão para salvar os arquivos codificados. Você pode ignorar esse alerta com segurança ou, então, abrir a janela de opções (dentro do menu "Tools") e configurar o diretório padrão de saída.
<p class="legend top" style="text-align:right"><span class=arrow>↶</span> Ignore isso
<p><img src=i/handbrake-02.png alt="HandBrake: alerta de diretório padrão" width=800 height=600>
<p>No lado direito há uma lista de predefinições. Selecionando a opção "iPhone & iPod Touch" irá configurar a maioria das opções que você precisa.
<p class="legend top">Selecione a predefinição iPhone <span class=arrow>↷</span><br></p>
<p><img src=i/handbrake-03.png alt="HandBrake: selecione a predefinição iPhone" width=800 height=600>
<p>Uma importante opção, e que está desativada por padrão, é a de "Otimizar para Web". Selecionando esta opção os metadados do vídeo codificado serão reordenados, para que você possa assistir o início do vídeo enquanto o resto está sendo baixado em segundo plano. Eu recomendo fortemente sempre conferir esta opção. Ela não afeta a qualidade ou tamanho do arquivo do vídeo codificado, portanto, não há razão para não utilizá-la.
<p class="legend top" style="text-align:right"><span class=arrow>↶</span> Sempre otimizar para web
<p><img src=i/handbrake-04.png alt="HandBrake: selecione a opção Otimizar para Web" width=800 height=600>
<p>Na aba de "Imagem" você pode configurar a altura e largura máxima do vídeo codificado. Você também deve selecionar a opção "Manter a proporção" para assegurar que o HandBrake não irá alargar ou esticar o seu vídeo enquanto o redimensiona.
<p class="legend top">Confiure a largura e altura <span class=arrow>↷</span><br></p>
<p><img src=i/handbrake-05.png alt="HandBrake: configure a largura, altura e proporção" width=800 height=600>
<p>Na aba "Vídeo" você pode configurar quatro opções importantes.
<ul>
<li>Codec de Vídeo. Tenha certeza que é "H.264 (x264)"
<li id=two-pass-encoding>Codificação em dois passos. Se esta opção estiver selecionada, o HandBrake irá rodar duas vezes a codificação de vídeo. Na primeira vez, ela apenas analizará o vídeo, procurando por coisas como composição de cores, movimento e paradas de cena. Na segunda vez é que realmente será codificado o vídeo utilizando a informação obtida durante a primeira vez. Como você pode esperar, isto toma duas vezes o tempo do que a codificação em um passo, mas o resultado é um vídeo melhor sem aumentar o tamanho do arquivo. Eu sempre habilito a codificação em dois passos para vídeos H.264. A menos que você esteja fazendo o próximo YouTube e codificando vídeos 24 horas por dia, você provavelmente deveria utilizar a codificação em dois passos também.
<li>Primeira passagem turbo. Uma vez que você tenha habilitado a codificação em dois passos, você pode recuperar algum tempo habilitando a "primeira passagem turbo." Isto reduzirá a quantidade de trabalho feita durante a primeira passagem (análise do vídeo), enquanto degrada levemente a qualidade. Eu usualmente habilito esta opção, mas se a qualidade é a coisa mais importante para você, você deveria deixar isto desabilitado.
<li>Qualidade. Existem diferentes modos de especificar a "qualidade" dos seus vídeos codificados. Você pode configurar o tamanho final do arquivo e o HandBrake irá fazer o melhor para que o vídeo codificado não seja maior do que o definido. Você pode configurar a média da "taxa de bits" o que é literalmente o número de bits requeridos para armazenar um segundo valor do vídeo codificado (isto é chamado de "média" da taxa de bits porque alguns segundos irão precisar de mais bits que outros). Ou você pode especificar uma qualidade constante numa escada de 0 à 100%. Números maiores irão resultar em uma melhor qualidade, mas em arquivos maiores. Não há apenas uma resposta certa para qual qualidade que você deve usar.
</ul>
<div class=pf>
<h4>Pergunte ao Professor Marcação</h4>
<div class=inner>
<blockquote class=note>
<p><span>☞</span>P: Posso usar codecs em dois passos na codificação de vídeo Ogg?<br>
R: Sim, sim mas devido as diferenças fundamentais em como o codificador funciona, <a href=http://en.flossmanuals.net/TheoraCookbook/FFMPEG2Theora>você provavelmente não precisa fazê-lo</a>. Codecs em dois passos H.264 quase sempre resultam em vídeos de qualidade mais altas. Codecs Ogg em dois passos de vídeos Ogg só é útil se você está tentando fazer com que seu vídeo codificado tenha um tamanho específico. (Talvez isto é algo em que você esteja interessado, mas não é o que é mostrado nestes exemplos, e provavelmente não vale o tempo extra, codificando o vídeo.) Para a melhor qualidade de vídeo Ogg, <a href=http://hacks.mozilla.org/2009/09/theora-1-1-released/>use as configurações de qualidade de vídeo, e não se preocupe com codecs em dois passos</a>.
</blockquote>
</div>
</div>
<p>Neste exemplo, Eu escolhi uma taxa de bit médio de 600 kbps, que é bastante alta para um vídeo codificado de 320x240. (Mais tarde neste capitulo, eu vou mostrar um exemplo de vídeo codificado a 200 kbps.) Eu escolhi também codecs em dois passos com um primeiro passo "Turbo".
<p class="legend top" style="text-align:right"><span class=arrow>↶</span> Opções de qualidade de vídeo
<p><img src=i/handbrake-07.png alt="HandBrake: Opções de configurações de codecs em dois passos" width=800 height=600>
<p>Na aba "Audio", você provavelmente não precisará mudar nada. Se o seu vídeo fonte tiver várias faixas de áudio, você pode precisar selecionar qual delas você deseja no vídeo. Se seu vídeo é na maior parte um discurso pessoal (ao contrário de músicas ou sons ambientes genéricos), você provavelmente pode reduzir a taxa de bit de áudio para 96 kbps or algo parecido. Por outro lado, o padrão predefinido que você herda do "iPhone" deve ser bom.
<p class="legend top">Opções na qualidade de Áudio <span class=arrow>↷</span><br></p>
<p><img src=i/handbrake-08.png alt="HandBrake: codec de áudio" width=800 height=600>
<p>Próximo, clique no botão do "Browse" a escolha o diretório e o nome do arquivo para salvar seu vídeo codificado.
<p class="legend top" style="text-align:right"><span class=arrow>↶</span> Defina o destino e o nome do arquivo
<p><img src=i/handbrake-09.png alt="HandBrake: Defina o destido do arquivo" width=800 height=600>
<p>Finalmente, clique "Start" para começar a codificar.
<p class="legend top">Vamos fazer alguns vídeos! <span class=arrow>↷</span><br></p>
<p><img src=i/handbrake-10.png alt="HandBrake: começo da codificação" width=800 height=600>
<p>HandBrake irá mostrar a estatística do progresso enquanto codifica seu vídeo.
<p class="legend top" style="text-align:right"><span class=arrow>↶</span> Paciência, Gafanhoto
<p><img src=i/handbrake-11.png alt="HandBrake: progresso da codificação" width=800 height=100>
<p class=a>❧
<h2 id=handbrake-cli>Codificação Batch de vídeos H.264 com HandBrake</h2>
<p>(Assim como na seção anterior, nesta seção eu vou usar "Vídeo H.264" como abreviação para "Perfil de Linha de base de vídeo H.264 e AAC áudio de baixa-complexidade em um container MP4". Esta é a combinação de codecs + container que funcionam nativamente no Safari, Adobe Flash, iPhone, e nos dispositivos Android.)
<p><a href=http://www.handbrake.fr>HandBrake</a> também vem em uma edição na linha de comandos. Tal como <a href=#ffmpeg2theora>ffmpeg2theora</a>, a edição da linha de comando do HandBrake oferece uma vertiginoso matriz de opções. (Digite <code>HandBrakeCLI --help</code> para ler a respeito.) Eu irei focar em apenas alguns:
<ul>
<li><code>--preset "X"</code>, onde "X"; é o nome do padrão HandBrake. A predefinição que você quer para vídeo web H.264 é chamada "iPhone" & "iPhone Touch", e é importante colocar o nome inteiro entre aspas.
<li><code>--width W</code>, onde "W" é a largura do seu vídeo codificado. HandBrake irá automaticamente ajustar a altura para manter a proporção original do vídeo.
<li><code>--vb Q</code>, onde "Q" é a taxa de bit média (mensurada em kilobits por segundo).
<li><code>--two-pass</code>, que habilita a codificação em dois passos.
<li><code>--turbo</code>, que habilita primeiro passo turbo durante a codificação em dois passos.
<li><code>--input F</code>, onde "F" é o nome do seu vídeo fonte.
<li><code>--output E</code>, onde "E" é o destino para seu vídeo codificado.
</ul>
<p>Aqui tem um exemplo da chamada do HandBrake na linha de comando, com marcas na linha de comando que acertam as configurações que escolhemos <a href=#handbrake-gui>Com a versão gráfica do HandBrake</a>.
<pre><samp class=p>you@localhost$ </samp><kbd>HandBrakeCLI --preset "iPhone & iPod Touch"</kbd>
<samp class=p> </samp><kbd> --width 320</kbd>
<samp class=p> </samp><kbd> --vb 600</kbd>
<samp class=p> </samp><kbd> --two-pass</kbd>
<samp class=p> </samp><kbd> --turbo</kbd>
<samp class=p> </samp><kbd> --input pr6.dv</kbd>
<samp class=p> </samp><kbd> --output pr6.mp4</kbd>
</pre>
<p>De cima para baixo, estes comandos rodam HandBrake com predefinições "iPhone & iPhone Touch", redimensiona o vídeo para 320x240, define a taxa de bit média para 600 kbps, habilita a codificação em dois passos com primeiro passo turbo, lê o arquivo <code>pr6.dv</code>, e codifica como <code>pr6.mp4</code>. Ufa!
<p class=a>❧
<h2 id=webm-cli>Codificando vídeos WebM com ffmpeg</h2>
<p>WebM é completamente suportado por <a href=http://www.ffmpeg.org/><code>ffmpeg</code> 0.6+</a>. Na linha de comando, rode <code>ffmpeg</code> sem parâmetros e verifique que foi compilado com suporte VP8:
<pre><samp class=p>you@localhost$ </samp><kbd>ffmpeg</kbd>
<samp>FFmpeg version SVN-r23197, Copyright (c) 2000-2010 the FFmpeg developers
built on May 19 2010 22:32:20 with gcc 4.4.3
configuration: --enable-gpl --enable-version3 --enable-nonfree --enable-postproc --enable-pthreads --enable-libfaac --enable-libfaad --enable-libmp3lame --enable-libopencore-amrnb --enable-libopencore-amrwb --enable-libtheora --enable-libx264 --enable-libxvid --enable-x11grab <mark>--enable-libvorbis</mark> <mark>--enable-libvpx</mark></samp></pre>
<p>Se você não ver as palavras mágicas “<code>--enable-libvorbis</code>” e “<code>--enable-libvpx</code>,” você não tem a versão certa do <code>ffmpeg</code>. (Se você mesmo compilou <code>ffmpeg</code>, verifique se não há duas versões instaladas. Isso é tranquilo, eles não irão conflitar entre si. Você precisará apenas usar o caminho completo da versão VP8 do <code>ffmpeg</code>.)
<p>Eu vou fazer uma <a href=#two-pass-encoding>codificação de dois passos</a>. Passo 1 apenas para verificar o arquivo de vídeo inserido (<code>-i pr6.dv</code>) e escrever algumas estatísticas no arquivo de log (que será auto-nomeado de <code>pr6.dv-0.log</code>). Eu especifico o codec de vídeo com o parâmetro <code>-vcodec</code>:
<pre><samp class=p>you@localhost$ </samp><kbd>ffmpeg -pass 1 -passlogfile pr6.dv -threads 16 -keyint_min 0 -g 250 -skip_threshold 0 -qmin 1 -qmax 51 -i pr6.dv <mark>-vcodec libvpx</mark> -b 614400 -s 320x240 -aspect 4:3 -an -y NUL</kbd></pre>
<p>A maioria da linha de comando do <code>ffmpeg</code> tem nada a ver com VP8 ou WebM. <code>libvpx</code> suporta um número específico de opções VP8 que você pode passar para o <code>ffmpeg</code>, mas eu não sei ainda como trabalhar com elas. Assim que encontrar uma boa explicação sobre elas, irei colocar o link aqui e incorporá-la na narrativa se valer a pena.
<p>Para o segundo passo, <code>ffmpeg</code> irá ler as estatísticas que foram escritas durante o primeiro passoe realmente codificar o vídeo e áudio. Irá escrever um arquivo <code>.webm</code>.
<pre><samp class=p>you@localhost$ </samp><kbd>ffmpeg -pass 2 -passlogfile pr6.dv -threads 16 -keyint_min 0 -g 250 -skip_threshold 0 -qmin 1 -qmax 51 -i pr6.dv -vcodec libvpx -b 614400 -s 320x240 -aspect 4:3 -acodec libvorbis -y pr6.webm</kbd></pre>
<p>Existem cinco parâmetros importantes aqui:
<ul>
<li><code>-vcodec libvpx</code> especifica que nós estamos codificando com o codec de vídeo VP8. WebM sempre usa vídeo VP8.
<li><code>-b 614400</code> especifica a taxa de bits. Diferente de outros formatos, <code>libvpx</code> espera que a taxa de bits seja mesmo em bits, e não kilobits. Se você quer um vídeo de 600 kbps, multiplique 600 por 1024 e tenha 614400.
<li><code>-s 320x240</code> especifica o tamanho desejado, largura por altura.
<li><code>-aspect 4:3</code> especifica a proporção do vídeo. A definição padrão de vídeo normalmente é 4:3, mas a maioria dos vídeos de alta definição são 16:9 ou 16:10. Nos meus testes, encontrei que preciso especificar de forma explícita isso na linha de comando, ao invés de recorrer ao <code>ffmpeg</code> para auto-detectar isso.
<li><code>-acodec libvorbis</code> especifica que nós estamos codificando com codec de áudio Vorbis. WebM sempre usa áudio Vorbis.
</ul>
<p class=a>❧
<h2 id=markup>Enfim, A Marcação</h2>
<p>Eu tenho certeza que esse era pra ser um livro sobre <abbr>HTML</abbr>. Então cadê a marcação?
<p><abbr>HTML5</abbr> lhe dá duas formas de incluir vídeos na sua página web. Ambas envolvem o elemento <code><video></code>. Se você tem apenas um arquivo de vídeo, você pode simplesmente criar link para ele com o atributo <code>src</code>. Isso é muito similar a incluir um vídeo com uma tag <code><img src="..."></code>.
<p class="legend top" style="margin-left:2em">Um arquivo de vídeo <span class=arrow>↷</span><br></p>
<pre><code><video <mark>src="pr6.webm"</mark>></video></code></pre>
<p>Tecnicamente, isso é tudo que você precisa. Mas assim como uma tag <code><img></code>, você sempre pode incluir atributos <code>width</code> e <code>height</code> nas suas tags de <code><video></code>. Os atributos <code>width</code> e <code>height</code> podem ser os mesmos que os atributos de largura e altura máxima que você especificou durante o processo de codificação. Não se preocupe se uma dimensão do vídeo é um pouco menor que isso. Seu navegador irá centralizar o vídeo dentro da caixa definida pela tag <code><video></code>. Nunca será esticado ou achatado fora da proporção.
<pre><code><video src="pr6.webm" <mark>width="320" height="240"</mark>></video></code></pre>
<p>Por padrão, o elemento <code><video></code> não irá expor quaisquer controles do player. Você pode criar seus próprios controles com os bons e velhos <abbr>HTML</abbr>, <abbr>CSS</abbr>, e JavaScript. O elemento <code><video></code> possui métodos como <a href=http://www.whatwg.org/specs/web-apps/current-work/multipage/video.html#playing-the-media-resource><code>play()</code> e <code>pause()</code></a> e propriedades de leitura/escrita chamados <a href=http://www.whatwg.org/specs/web-apps/current-work/multipage/video.html#dom-media-currenttime><code>currentTime</code></a>. Também há propriedades de leitura/escrita como <a href=http://www.whatwg.org/specs/web-apps/current-work/multipage/video.html#dom-media-volume><code>volume</code></a> e <a href=http://www.whatwg.org/specs/web-apps/current-work/multipage/video.html#dom-media-muted><code>muted</code></a>. Então você realmente tem tudo o que precisa para criar sua própria interface.
<p>Se você não quer construir sua própria interface, você pode dizer ao navegador para exibir os controles pré-definidos. Para isso, apenas inclua o atributo <code>controls</code> na sua tag <code><video></code>.
<pre><code><video src="pr6.webm" width="320" height="240" <mark>controls</mark>></video></code></pre>
<p>Há outros dois atributos opcionais que eu quero mencionar antes de ir além: <code>preload</code> e <code>autoplay</code>. Não dispare o mensageiro; deixe-me explicar porque eles são úteis. O atributo <code>preload</code> diz ao navegador que você gostaria de começar o download do arquivo de vídeo assim que a página carregar. Isso faz sentido se o único objetivo da página é visualizar um vídeo. Por outro lado, se é apenas um material suplementar que apenas alguns visitantes irão assistir, então você pode definir o <code>preload</code> como <code>none</code> para dizer ao navegador que minimize o tráfico de rede.
<p>Aqui está um exemplo de um vídeo que irá começar a fazer o download (mas não tocar) assim que a página carregar:
<pre><code><video src="pr6.webm" width="320" height="240" <mark>preload</mark>></video></code></pre>
<p>E aqui está um exemplo de um vídeo que <em>não</em> irá começar o download assim que a página carregar:
<pre><code><video src="pr6.webm" width="320" height="240" <mark>preload="none"</mark>></video></code></pre>
<p>O atributo <code>autoplay</code> faz exatamente o que parece: diz ao navegador que você gostaria de começar o download do vídeo assim que a página carregar, <em>e</em> que você gostaria de começar a tocar o vídeo assim que possível. Algumas pessoas amam isso; outras odeiam. Mas deixe-me explicar por que é importante ter um atributo como esse na <abbr>HTML5</abbr>. Algumas pessoas irão querer que seus vídeos toquem automaticamente, mesmo que isso irrite seus visitantes. Se a <abbr>HTML5</abbr> <em>não</em> definisse como padrão um modo de tocar automaticamente um vídeo, as pessoas iriam recorrer ao JavaScript com hacks para fazer isso de qualquer forma. (Por exemplo, chamando o método video’s <code>play()</code> durante o evento da janela de <code>load</code>.) Isso poderia ser muito difícil para os usuários contra-atacarem. Por outro lado, basta adicionar uma extensão no seu navegador (ou escrever uma, se necessário) para dizer “ignore o atributo <code>autoplay</code>, não quero nunca ver tocar vídeos automaticamente.”
<p>Aqui está um exemplo de vídeo que irá começar o download e tocar assim que for possível, depois de carregar a página:
<pre><code><video src="pr6.webm" width="320" height="240" <mark>autoplay</mark>></video></code></pre>
<p>E aqui está um script <a href=http://www.greasespot.net/>Greasemonkey</a> que você pode instalar localmente no seu Firefox para prever que o vídeo da <abbr>HTML5</abbr> toque automaticamente. Ele usa o atributo <code>autoplay</code> do <abbr>DOM</abbr> definido na <abbr>HTML5</abbr>, que é equivalente ao atributo <code>autoplay</code> da sua marcação <abbr>HTML</abbr>. [<a href=examples/disable_video_autoplay.user.js>disable_video_autoplay.user.js</a>]
<pre><code>// ==UserScript==
// @name Disable video autoplay
// @namespace http://diveintomark.org/projects/greasemonkey/
// @description Ensures that HTML5 video elements do not autoplay
// @include *
// ==/UserScript==
var arVideos = document.getElementsByTagName('video');
for (var i = arVideos.length - 1; i >= 0; i--) {
var elmVideo = arVideos[i];
<mark>elmVideo.autoplay = false;</mark>
}</code></pre>
<p>Mas espere um segundo… Você tem seguido por todo esse capítulo, você não tem apenas um arquivo de vídeo; você tem três. Um é um arquivo <code>.ogv</code> criado com <a href=#firefogg>Firefogg</a> ou <a href=#ffmpeg2theora>ffmpeg2theora</a>. O segundo é um arquivo <code>.mp4</code> criado com <a href=#handbrake-gui>HandBrake</a>. O terceiro é um arquivo <code>.webm</code> que você criou com <a href=#webm-cli>ffmpeg</a>. <abbr>HTML5</abbr> provê um modo de criar links para três deles: o elemento <code><source></code>. Cada elemento <code><video></code> pode conter mais que um elemento <code><source></code>. Seu navegador irá atrás de uma lista de vídeos, em ordem, e tocar apenas o primeiro que estiver habilitado para isso.
<p>Isso levanta outra questão: como o navegador sabe qual vídeo tocar? Bom, no pior cenário, ele carrega cada um dos vídeos e tenta tocar eles. Porém, isso é uma tremenda perda de banda. Você irá economizar muito tráfico de rede se disser primeiro ao navegador sobre cada vídeo. Você diz isso com o atributo <code>type</code> no elemento <code><source></code>.
<p>Aqui está a coisa toda:
<p class="legend top" style="margin-left:2em">Três (!) arquivos de vídeo <span class=arrow>↷</span><br></p>
<pre><code><video width="320" height="240" controls>
<<mark>source src="pr6.mp4"</mark> type='video/mp4; codecs="avc1.42E01E, mp4a.40.2"'>
<<mark>source src="pr6.webm"</mark> type='video/webm; codecs="vp8, vorbis"'>
<<mark>source src="pr6.ogv"</mark> type='video/ogg; codecs="theora, vorbis"'>
</video></code></pre>
<p>Vamos quebrar isso. O elemento <code><video></code> especifica a largura e altura do vídeo, mas isso não linka para um arquivo de vídeo. Dentro do elemento <code><video></code> existem três elementos <code><source></code>. Cada elemento <code><source></code> linka para um único arquivo de vídeo (com o atributo <code>src</code>), e ainda dá informações sobre o formato de vídeo (no atributo <code>type</code>).
<p>O atributo <code>type</code> parece complicado — droga, e <em>é</em> mesmo complicado. É uma combinação de três pedaços de informações: o <a href=#video-containers>formato de container</a>, o <a href=#video-codecs>codec de vídeo</a>, e o <a href=#audio-codecs>codec de áudio</a>. Vamos começar por baixo. Para o arquivo de vídeo <code>.ogv</code>, o formato de container format é Ogg, representado por <code>video/ogg</code>. (Tecnicamente falando, isso é o <abbr>MIME</abbr> type para arquivos de vídeo Ogg.) O codec de vídeo é Theora, e o codec de áudio é Vorbis. Isso é simples o suficiente, exceto pelo formato do valor do atributo parecer meio estranho. O valor por si precisa incluir marcações por aspas, que significa que você precisa usar um tipo diferente de marcação por aspas para todo valor.
<pre><code> <source src="pr6.ogv" <mark>type='video/ogg; codecs="theora, vorbis"'</mark>></code></pre>
<p>WebM é praticamente a mesma coisa, mas com um diferente MIME type (<code>video/webm</code> ao invés de <code>video/ogg</code>) e um diferente codec de vídeo (<code>vp8</code> ao invés de <code>theora</code>) listados no parâmetro de <code>codecs</code>.
<pre><code> <source src="pr6.webm" <mark>type='video/webm; codecs="vp8, vorbis"'</mark>></code></pre>
<p>O vídeo H.264 é ainda mais complicado. Lembra quando eu disse que ambos <a href=#h264>vídeo H.264</a> e <a href=#aac>áudio AAC</a> podem vir com diferentes “perfis”? Nós codificamos com o perfil “baseline” H.264 e com o perfil “low-complexity” AAC, quando envolvidos em um container MPEG-4. Toda sua informação está inclusa no atributo <code>type</code>.
<pre><code> <source src="pr6.mp4" <mark>type='video/mp4; codecs="avc1.42E01E, mp4a.40.2"'</mark>></code></pre>
<p>O benefício de passar por todos esses problemas é que o navegador irá checar o atributo <code>type</code> primeiro para poder tocar um arquivo de vídeo em particular. Se um navegador decide que não pode tocar um vídeo em particular, <em>ele não irá realizar o download do arquivo</em>. Nem mesmo uma parte dele. Você irá economizar banda, e seus visitantes irão ver o vídeo que eles vieram pra ver, mais rápido.
<p>Se você seguir as instruções nesse capítulo para codificar seus vídeos, você pode apenas copiar e colar os valores dos atributos <code>type</code> desse exemplo. Ou então, você terá que <a href=http://wiki.whatwg.org/wiki/Video_type_parameters>lidar com parâmetros <code>type</code> você mesmo</a>.
<div class=pf>
<h4>Professor Marcação Diz</h4>
<div class=inner>
<blockquote><p>iPads rodando iOS 3.x tem um bug que previnem eles de notificar qualquer coisa menos a primeira origem do vídeo listado. iOS 4 (um upgrade gratuito para todos iPads) corrige esse bug. Se você quer entregar vídeo para usuários de iPad que ainda não tenham atualizado para iOS 4, você terá que listar seu arquivo MP4 primeiro, seguido dos formatos de vídeo gratuitos. <em>Sigh.</em>
</blockquote>
</div>
</div>
<p class=a>❧
<h3 id=video-mime-types>MIME Types Encontram Seu Monstro</h3>
<p>Existem tantas peças no quebra-cabeça do vídeo, eu até mesmo hesitado em trazer isso à tona. Mas é importante, porque uma configuração mal feita no web server pode levar a incontáveis frustrações quando você tenta debugar o porquê do seu vídeo tocar localmente no seu computador mas falhar ao tentar tocar quando você realiza o deploy para o site em produção. Se você se deparar com esse problema, a principal causa é provavelmente <abbr>MIME</abbr> types.
<p>Eu mencionei <abbr>MIME</abbr> types <a href=past.html#mime-types>na história desse capítulo</a>, mas você provavelmente passou por aquilo sem dar a importância devida. Então aqui está em:
<div class=pf>
<h4>Professor Marcação Grita</h4>
<div class=inner>
<blockquote>
<p>ARQUIVOS DE VÍDEO DEVEM SER SERVIDOS COM O <abbr>MIME</abbr> TYPE CORRETO!
</blockquote>
</div>
</div>
<p>Qual é o <abbr>MIME</abbr> type correto? Você já viu ele; é uma parte do valor do atributo <code>type</code> no elemento <code><source></code>. Mas definir o atributo <code>type</code> no seu <abbr>HTML</abbr> não é o suficiente. Você também precisa garantir que seu web server inclui o <abbr>MIME</abbr> type correto no <code>Content-Type</code> do cabeçalho <abbr>HTTP</abbr>.
<p>Se você está usando um servidor web Apache ou qualquer derivado Apache, você pode usar uma <a href=http://httpd.apache.org/docs/2.0/mod/mod_mime.html#addtype>diretiva AddType</a> no <code>httpd.conf</code> do seu site ou em um arquivo <code>.htaccess</code> no diretório onde você armazenou seus arquivos de vídeo. (Se você usa outro servidor web, consulte a documentação dele sobre como definir <code>Content-Type</code> no cabeçalho <abbr>HTTP</abbr> para tipos específicos de arquivo.)
<pre><code>AddType video/ogg .ogv
AddType video/mp4 .mp4
AddType video/webm .webm</code></pre>
<p>A primeira linha é para vídeos com container Ogg. A segunda linha é para vídeos com container <abbr>MPEG</abbr>-4. A terceira é para WebM. Defina uma vez e esqueça isso. Se você esquecer de definir isso, seus vídeos <em>irão</em> falhar ao tocar em alguns navegadores, mesmo que você inclua o <abbr>MIME</abbr> no atributo <code>type</code> do seu <abbr>HTML</abbr>.
<p>Para ainda mais detalhes sobre como configurar seu servidor web, eu direciono sua atenção para esse excelente arquivo na Mozilla Developer Center: <a href=https://developer.mozilla.org/en/Configuring_servers_for_Ogg_media>Configurando servidores para mídia Ogg</a>. (O conselho desse artigo se aplica para vídeo MP4 e WebM também.)
<p class=a>❧
<h2 id=ie>E quanto ao IE?</h2>
<p>Internet Explorer 9 <a href=http://msdn.microsoft.com/en-us/ie/ff468705.aspx#_HTML5_video_audio>suporta o elemento <code><video></code> da <abbr>HTML5</abbr></a>, mas a <a href="http://blogs.msdn.com/ie/archive/2010/03/16/html5-hardware-accelerated-first-ie9-platform-preview-available-for-developers.aspx">Microsoft prometeu publicamente</a> que a versão final do <abbr>IE</abbr> 9 irá suportar vídeo H.264 video e áudio AACem um container MPEG-4, assim como Safari e iPhone.
<p>Mas e quanto as versões antigas do Internet Explorer? Tipo, você sabe, todas as versões antigas incluindo o <abbr>IE</abbr> 8? A maioria das pessoas que usam Internet Explorer também possuem um plugin Adobe Flash plugin instalado. Versões modernas do Adobe Flash (começando com 9.0.60.184) suportam vídeo H.264 e áudio AAC em um container MPEG-4, assim como Safari e iPhone. Uma vez <a href=#handbrake-gui>codificado com vídeo H.264</a> para Safari, você pode tocar isso em um video player baseado em Flash se você detectar que um dos seus visitantes não possuem navegadores com suporte ao <abbr>HTML5</abbr>.
<p><a href=http://flowplayer.org/>FlowPlayer</a> é de código livre, licenciado com GPL, com video player baseado em Flash. (<a href=http://flowplayer.org/download/>Licenças comerciais também estão disponíveis</a>.) FlowPlayer não sabe nada sobre seu elemento <code><video></code>. Não irá magicamente transformar uma tag <code><video></code> em um objeto Flash. Mas um <abbr>HTML5</abbr> bem feitoisabe como lidar com isso, porque você pode colocar um elemento <code><object></code> dentro do <code><video></code>. Navegadores que não suportam vídeo <abbr>HTML5</abbr> irão ignorar o elemento <code><video></code> e simplesmente renderizar o elemento <code><object></code>, no qual irá invocar o plugin Flash e tocar o vídeo usando FlowPlayer. Navegadores que suportam vídeo <abbr>HTML5</abbr> irão encontrar a origem do vídeo que eles pode tocar e tocá-los, <em>e ignorar o elemento <code><object></code> junto com isso</em>.
<p>Esse último pedaço é a chave para todo quebra-cabeça: <abbr>HTML5</abbr> especifica que todos os elementos (além dos elementos <code><source></code>) são filhos de um elemento <code><video></code> devem ser ignorados. Isso permite que você possa usar vídeos <abbr>HTML5</abbr> em navegadores mais novos e prover um fall back em Flash para navegadores mais antigos, sem precisar de qualquer hack JavaScript. Você pode ler mais sobre essa técnica em: <a href=http://camendesign.com/code/video_for_everybody>Vídeos Para Todos</a>.
<p class=a>❧
<h2 id=ios>Problemas em iPhones e iPads</h2>
<p>iOS é o sistema operacional da Apple’s que equipa iPhones, iPod Touches, e iPads. iOS 3.2 tem um número grande de problemas com vídeo <abbr>HTML5</abbr>.
<ol>
<li>iOS não irá reconhecer o vídeo se você incluir um atributo <code>poster</code>. O atributo <code>poster</code> do elemento <code><video></code> permite exibir uma imagem personalizada enquanto o vídeo é carregado, ou até que o usuário pressione o “play.” Esse bug é consertado no iOS 4.0, mas irá levar tempo para usuários atualizerem-se.
<li>Se você tem múltiplos elementos <code><source></code>, iOS irá reconhecer qualquer coisa menos o primeiro. Já que dispositivos iOS suportam apenas H.264+AAC+MP4, isso é efetivamente significa que você precisa listar seu MP4 primeiro. Esse bug também é corrigido no iOS 4.0.
</ol>
<p class=a>❧
<h2 id=android>Problemas em dispositivos Android</h2>
<p>Android é o sistema operacional da Google’s que equipa diferentes telefones e dispositivos de mão. Versões do Android antes da 2.3 tinham uma série de problemas com vídeo <abbr>HTML5</abbr>.
<ol>
<li>O atributo <code>type</code> nos elementos <code><source></code> confundem muito o Android. A única forma para reconhecer uma origem de vídeo é, ironicamente, omitindo o atributo <code>type</code> e garantir que arquivos de vídeo H.264+AAC+MP4 terminem com o formato <code>.mp4</code>. Você pode ainda incluir o atributo <code>type</code> nas outras origens de vídeo, já que H.264 é o único formato de vídeo que Android 2.2 suportam. (Esse bug é corrigido no Android 2.3.)
<li>O atributo <code>controls</code> não foi suportado. Não há efeitos problemáticos nisso, mas o Android não irá mostrar qualquer controle de interface para um vídeo. Você irá precisar do seu próprio controle na interface. No mínimo, você deveria prover um script que comece tocando o vídeo quando o usuário clicar no vídeo. Esse bug também é corrigido no Android 2.3.
</ol>
<p class=a>❧
<h2 id=example>Um Completo e Vivo Exemplo</h2>
<p>Aqui está um exemplo vivo de um vídeo que usa essas técnicas. Eu extendi o código do “Vídeo para Todos” para incluir suporte a vídeo WebM. Codifiquei a mesma origem do vídeo em três formatos, com esses comandos:
<pre>## Theora/Vorbis/Ogg
<samp class=p>you@localhost$ </samp><kbd>ffmpeg2theora --videobitrate 200 --max_size 320x240 --output pr6.ogv pr6.dv</kbd>
## H.264/AAC/MP4
<samp class=p>you@localhost$ </samp><kbd>HandBrakeCLI --preset "iPhone & iPod Touch" --vb 200 --width 320 --two-pass --turbo --optimize --input pr6.dv --output pr6.mp4</kbd>
## VP8/Vorbis/WebM
<samp class=p>you@localhost$ </samp><kbd>ffmpeg -pass 1 -passlogfile pr6.dv -threads 16 -keyint_min 0 -g 250 -skip_threshold 0 -qmin 1 -qmax 51 -i pr6.dv -vcodec libvpx -b 204800 -s 320x240 -aspect 4:3 -an -f webm -y NUL</kbd>
<samp class=p>you@localhost$ </samp><kbd>ffmpeg -pass 2 -passlogfile pr6.dv -threads 16 -keyint_min 0 -g 250 -skip_threshold 0 -qmin 1 -qmax 51 -i pr6.dv -vcodec libvpx -b 204800 -s 320x240 -aspect 4:3 -acodec libvorbis -ac 2 -y pr6.webm</kbd></pre>
<p>A marcação final usa o elemento <code><video></code> para <abbr>HTML5</abbr>, um elemento <code><object></code> dentro para fallback em Flash, e um pequeno pedaço de script para beneficiar dispositivos Android:
<pre><code><video id="movie" width="320" height="240" preload controls>
<source src="pr6.webm" type='video/webm; codecs="vp8, vorbis"' />
<source src="pr6.ogv" type='video/ogg; codecs="theora, vorbis"' />
<source src="pr6.mp4" />
<object width="320" height="240" type="application/x-shockwave-flash"
data="flowplayer-3.2.1.swf">
<param name="movie" value="flowplayer-3.2.1.swf" />
<param name="allowfullscreen" value="true" />
<param name="flashvars" value='config={"clip": {"url": "http://wearehugh.com/dih5/pr6.mp4", "autoPlay":false, "autoBuffering":true}}' />
<p>Download video as <a href="pr6.mp4">MP4</a>, <a href="pr6.webm">WebM</a>, or <a href="pr6.ogv">Ogg</a>.</p>
</object>
</video>
<script>
var v = document.getElementById("movie");
v.onclick = function() {
if (v.paused) {
v.play();
} else {
v.pause();
}
};
</script>
</code></pre>
<p>Com essa combinação de <abbr>HTML5</abbr> e Flash, você deve conseguir assistir esse vídeo em quase todos os navegadores e dispositivos:
<video id="video" width="320" height="240" preload controls>
<source src="i/pr6.webm" type='video/webm; codecs="vp8, vorbis"' />
<source src="i/pr6.ogv" type='video/ogg; codecs="theora, vorbis"' />
<source src="i/pr6.mp4" />
<object width="320" height="240" type="application/x-shockwave-flash"
data="http://releases.flowplayer.org/swf/flowplayer-3.2.1.swf">
<param name="movie" value="http://releases.flowplayer.org/swf/flowplayer-3.2.1.swf" />
<param name="allowfullscreen" value="true" />
<param name="flashvars" value='config={"clip":{"url":"http://diveintohtml5.org/i/pr6.mp4","autoPlay":false,"autoBuffering":true}}' />
<p>Download video as <a href=i/pr6.mp4>MP4</a>, <a href=i/pr6.webm>WebM</a>, or <a href=i/pr6.ogv>Ogg</a>.</p>
</object>
</video>
<p class=a>❧
<h2 id=further-reading>Leitura complementar</h2>
<ul>
<li><a href=http://www.whatwg.org/specs/web-apps/current-work/multipage/video.html#video><abbr>HTML5</abbr>: The <code><video></code> element</a>
<li><a href=http://camendesign.com/code/video_for_everybody>Video for Everybody</a>
<li><a href=http://diveintomark.org/tag/give>A gentle introduction to video encoding</a>
<li><a href=http://hacks.mozilla.org/2009/09/theora-1-1-released/>Theora 1.1 is released — what you need to know</a>
<li><a href=https://developer.mozilla.org/en/Configuring_servers_for_Ogg_media>Configuring servers for Ogg media</a>
<li><a href=http://www.mplayerhq.hu/DOCS/HTML/en/menc-feat-x264.html>Encoding with the <code>x264</code> codec</a>
<li><a href=http://wiki.whatwg.org/wiki/Video_type_parameters>Video type parameters</a>
<li><a href=http://dev.opera.com/articles/view/everything-you-need-to-know-about-html5-video-and-audio/>Everything you need to know about <abbr>HTML5</abbr> audio and video</a>
<li><a href=http://www.broken-links.com/2010/07/08/making-html5-video-work-on-android-phones/>Making <abbr>HTML5</abbr> video work on Android phones</a>. <i>Le sigh.</i>
<li><a href=http://msdn.microsoft.com/en-us/ie/ff468705.aspx#_HTML5_video_audio>Internet Explorer 9 Guide for Developers: HTML5 video and audio elements</a>
</ul>
<p>Controles customizados para vídeo HTML5:
<ul>
<li><a href=http://videojs.com/>VideoJS</a>
<li><a href=http://mediaelementjs.com/>MediaElement.js</a>
<li><a href=http://www.kaltura.org/project/HTML5_Video_Media_JavaScript_Library>Kaltura HTML5 Video & Media JavaScript Library</a>
</ul>
<p class=a>❧
<p>Este foi o “Vídeo na Web”. Consulte o <a href=table-of-contents.html>Sumário</a>, caso queira continuar com a leitura.
<div class=pf>
<h4>Você sabia?</h4>
<div class=moneybags>
<blockquote><p>Em associação com o Google Press, O’Reilly está distribuindo este livro em uma variedade de formatos, incluindo papel, ePub, Mobi, e <abbr>DRM</abbr>-de graça <abbr>PDF</abbr>. A edição paga é chamada de “HTML5: Up & Running,” e está disponível agora. Este capítulo está incluído na edição paga.
<p>Se você gostou deste capítulo e quer demonstrar sua apreciação, você pode <a href="http://www.amazon.com/HTML5-Up-Running-Mark-Pilgrim/dp/0596806027?ie=UTF8&tag=diveintomark-20&creativeASIN=0596806027">comprar “HTML5: Up & Running” com este link afiliado </a> ou <a href=http://oreilly.com/catalog/9780596806033>comprar a edição eletrônica diretamente da O’Reilly</a>. Você terá um livro, e eu um dinheirinho. Eu não estou aceitando doações diretas.
</blockquote>
</div>
</div>
<p class=c>Copyright MMIX–MMXI <a href=about.html>Mark Pilgrim</a>
<form action=https://www.google.com/cse><div><input type=hidden name=cx value=014437924039265546826:2nmoshc8y3y><input type=hidden name=ie value=UTF-8><input type=search name=q size=25 placeholder="powered by Google™"> <input type=submit name=sa value=Search></div></form>
<script src=j/jquery.js></script>
<script src=j/dih5.js></script>
<script>
if (navigator.userAgent.toLowerCase().search("android") > -1) {
$("#video").click(function() {
if (v.paused) {
v.play();
} else {
v.pause();
}
});
}
(function(i,s,o,g,r,a,m){i['GoogleAnalyticsObject']=r;i[r]=i[r]||function(){
(i[r].q=i[r].q||[]).push(arguments)},i[r].l=1*new Date();a=s.createElement(o),
m=s.getElementsByTagName(o)[0];a.async=1;a.src=g;m.parentNode.insertBefore(a,m)
})(window,document,'script','//www.google-analytics.com/analytics.js','ga');
ga('create', 'UA-4114546-27', 'auto');
ga('send', 'pageview');
</script>
</html>