Главная/ Учимся Javascript, CSS, HTML/ Уроки HTML/ Up And Running/ Video On The Web/ Полноценный пример. HTML5. Up and Running. Марк Пилгрим

Полноценный пример

Дата публикации: 22.03.2011

А теперь все полученные знания применимы в реальном примере. Я расширил код Видео для всех чтобы включить поддержку WebM. С помощью команд, приведенных ниже, я перекодировал источник в три нужных мне формата:


## Theora/Vorbis/Ogg
you@localhost$ ffmpeg2theora --videobitrate 200 --max_size 320x240 --output pr6.ogv pr6.dv
## H.264/AAC/MP4
you@localhost$ HandBrakeCLI --preset "iPhone & iPod Touch" --vb 200 --width 320 --two-pass --turbo --optimize --input pr6.dv --output pr6.mp4
## VP8/Vorbis/WebM
you@localhost$ ffmpeg -pass 1 -passlogfile pr6.dv -threads 16 -token_partitions 4 -altref 1 -lag 16 -keyint_min 0 -g 250 -mb_static_threshold 0 -skip_threshold 0 -qmin 1 -qmax 51 -i pr6.dv -vcodec libvpx_vp8 -an -f rawvideo -y NULffmpeg --videobitrate 200
you@localhost$ ffmpeg -pass 2 -passlogfile pr6.dv -threads 16 -token_partitions 4 -altref 1 -lag 16 -keyint_min 0 -g 250 -mb_static_threshold 0 -skip_threshold 0 -qmin 1 -qmax 51 -i pr6.dv -vcodec libvpx_vp8 -b 204800 -s 320x240 -aspect 4:3 -acodec vorbis -ac 2 -y pr6.mkv
you@localhost$ mkclean --doctype 4 pr6.mkv pr6.webm

В разметке используем тег <video>, с вложенным <object>:

<video id="movie" width="320" height="240" preload controls>
	<source src="pr6.mp4" type='video/mp4; codecs="avc1.42E01E, mp4a.40.2"' />
	<source src="pr6.webm" type='video/webm; codecs="vp8, vorbis"' />
	<source src="pr6.ogv" type='video/ogg; codecs="theora, vorbis"' />
	<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/good/bbb_480p.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>

Сочетание HTML5 и Flash дает возможность просматривать видео практически во всех браузерах и устройствах.

Куда дальше

Показать комментарии