После того как мы сверстали страницу на HTML5 можно попробовать что-нибудь интереснее.
До HTML5 единственный нормальный и кроссбраузерный метод встроить видео - использовать Flash. В редакции HTML5 добавили нативную поддержку воспроизведения видео и аудио на странице.
Flash конечно и сейчас очень распространенный плагин, но кушает он совсем не мало. К тому же во всех портативных устройствах работающих на iOS от компании Apple и в устройствах работающих на Android версии 2.01 и ниже от компании Google - flash не поддерживается. Даже в новой версии Android Jelly Bean нет поддержки flash по умолчанию. Microsoft тоже со своим метро вроде не ставят его по умолчанию. В общем как вы сами понимаете настала пора альтернативы.

Но не все так круто как кажется на первый взгляд. До сих пор дяди из W3C и WHATWG не договорились о поддерживаемых кодаках. Но при этом мы видим поддержку HTML5 видео у таких гигантом как YouTube и Vimeo.

Стоит еще отметить что управлять этим плеером можно при помощи javascript с кучей событий. Т.е. плеер можно кастомизировать как душе угодно.

Самый простой способ встроить видео на страницу:

<video src="video.ogg"></video>

Правда просто? Формат OGG нативно поддерживается 80% браузерами (отличились только IE и на удивление Safari, но даже там они просто требуют установки). Вы можете указывать в качестве источника src не только видео, но и аудио.

В том случае если браузер как у Николая II, то видео можно просто предложить скачать, для этого между открывающим и закрывающим тэгом нужно предложить сделать это вместе с ссылкой:

<video src="video.ogg"><a href="video.ogg">Николай, прошу, скачайте</a></video>

Для того чтобы сразу появились элементы управления нужно добавить атрибут в сам тэг <video>:

<video src="video.ogg" controls></video>

Посмотрите пример с нашим роликом.

Давайте посмотрим какие еще могут указываться атрибуты у тэга <video>
autoplay - Браузер запускает видео/аудио автоматически
controls - Добавляет элементы управления плееру
poster - Указывает какое изображение использовать браузеру пока грузится ролик. используется как src, т.е. poster="my.jpg"
width, height - Задает ширину и высоту в пикселях
loop - Бесконечный повтор ролика
preload - Включается буферизацию (прогрузку) ролика сразу после загрузки страницы.
preload=auto - браузер начнет буферизацию сразу после загрузки
preload=none - браузер начнет прогружать после нажатия кнопки плей
preload=metadata - браузер подгрузит только данные о ролике: первый кадр, длительность, список воспроизведения
src - Указывает какой файл должен быть проигран в плеере

Текущее положение дел и всю работу по этому тэгу, включая поддерживаемые новые атрибуты можно посмотреть на сайте WHATWG.

(Visited 328 times, 1 visits today)