Элемент <video> – совершенно новый в HTML5 и позволяет, вы только представьте, проигрывать фильмы на вашем сайте! Данные, которые должен содержать этот элемент, – это видео, а также сопутствующие аудиозаписи или изображения.
Конечно же, он будет работать только в нескольких браузерах: Safari 3.1+, Firefox 3.5+ и последних сборках Opera (а, ну и, потенциально, в следующем релизе Chrome) (уже работает практически везде, включая IE9).
«Старый» способ
Фу, посмотрите на этот ужасный код:
<object classid="clsid:d27cdb6e-ae6d-11cf-96b8-444553540000" width="425" height="344" codebase="http://download.macromedia.com/pub/shockwave/cabs/flash/swflash.cab#version-6,0,40,0"> <param name="allowFullScreen" value="true" /> <param name="allowscriptaccess" value="always" /> <param name="src" value="http://www.youtube.com/v/oHg5SJYRHAO&hl=en&fs=1&" /> <param name="allowfullscreen" value="true" /> <embed type="application/x-shockwave-flash" width="425" height="344" src="http://www.youtube.com/ v/oHg5SJYRHAO&hl=en&fs=1&" allowscriptaccess="always" allowfullscreen="true"> </embed> </object>
Гадость. И, как известно, для этого вам понадобится Flash. Или зачастую это вставляется при помощи javascript, что тоже не идеально.
HTML5-способ
Хороший, чистый, минимальный код:
<video width="640" height="360" src="http://www.youtube.com/demo/google_main.mp4" controls autobuffer> <p>Попробуйте открыть эту страницу в Safari 4! Или вместо этого вы можете <a href="http://www.yuotube. com/demo/google_main.mp4">загрузить видео</a>.</p> </video>
Autoplay
У тега <video> есть атрибут, который позволяет воспроизводить видео, когда страница загружается.
<video src="abc.mov" autoplay> </video>
Но
Download
Если браузер не знает, что делать с тегом <video> или если возникает ошибка воспроизведения, вы можете добавить в <video> атрибут download.
Autobuffer
Атрибут autobuffer используется, когда не используется autoplay, но автор страницы или сайта считает, что видео все-таки будут смотреть. Видео загрузится в фоновом режиме и, когда пользователь запустит его, будет воспроизведена как минимум часть его содержимого. Если autoplay и autobuffer используются вместе, autobuffer будет проигнорирован.
Здесь важно отметить, что браузер в любом случае автоматически загружает видео, с или без autobuffer, с этим ничего не поделаешь. Это негативно отражается на производительности и времени загрузки, особенно, если на вашей странице много видео.
Poster
Используйте атрибут poster, чтоб отображался кадр из видео (в любом формате – .jpg, .png), когда оно по каким-то причинам не загружается. Это может быть локальное изображение или ссылка на любую картинку из Сети.
<video width="640" height="360" src="http://youtube.com/demo/google_main.mp" autobuffer controls poster="whale.png"> <p>Попробуйте открыть эту страницу в Safari 4! Или вместо этого вы можете <a href="http://youtube.com/ demo/google_main.mp4">загрузить видео</a>.</p> </video>
Вам стоит использовать атрибут poster, потому что вы не хотите, чтоб пользователь ничего не увидел.
Controls
Добавление этого атрибута значит, что вы можете использовать для видео ваши собственные кнопки «воспроизвести»/»пауза» и т. д. В Safari очень милые стандартные контроли, но вы можете создать свои собственные.
Субтитры
Атрибута для субтитров не существует (пока – ау, HTML5-группа), но я подумал, что нужно их упомянуть. Лично мне нравится способ, которым это реализовано в JW FLV-плейере. Интересная статья на эту тему:
Но в идеале, у нас будет возможность добавлять субтитры или аудио с описанием без javascript.
Текущие вопросы
Кодеки
Я не претендую на звание эксперта по видео/аудио-кодекам, но в этой области есть несколько интересных моментов, которые хорошо описаны в
Internet Explorer
У IE нет поддержки <video>, но как для лидера на рынке браузеров, для него нужно будет что-то придумать. К счастью, на сайте
Физический файл
На данный момент тег <video> должен ссылаться на физический файл (смотрите пример в самом верху). Теперь нам нужна возможность просто импортировать, скажем, видео с YouTube, используя тег <video>, как мы это делали при помощи тега <embed>.
Когда я взялся за написание этой статьи, я хотел вернуться в 2008 и подловить на популярный тогда розыгрыш с клипом Рика Астли, но не нашел способ, как это сделать с помощью тега <video>.
Я думаю, тег <video> должен предоставить вам вот такую возможность:
<video src="http://youtube.com/v/oHg5SJYRHAO&hl=en&fs=1&" autoplay> </video>
Правда, было бы круто?
Заключение
Я думаю, ему еще многое предстоит пройти, но у этого тега есть хороший потенциал. Вопросы касательно кодеков наверняка будут решаться и решаться еще очень долго, а пока вы можете вставлять запасные варианты в код, например, ссылки для скачивания. Вы можете использовать комбинацию элементов <video>, <object> и <embed>, но в этом случае разметка будет иметь весьма устрашающий вид:
<video width="640" height="360" src="http://youtube.com/demo/google_main.mp4" autobuffer controls poster="whale.png"> <object classid="clsid:02bf25d5-8c17-4b23-bc80-d3488abddc6b" width="640" height="360" codebase="http://www.apple.com/qtactivex/qtplugin.cab"> <param value="http://www.youtube.com/demo/google_main.mp4"> <param value="true"> <param value="false"> <embed src="http://www.youtube.com/google_main.mp4" width="640" height="360" autoplay="true" controller="false" pluginspage="http://www.apple.com/quicktime/download/"> </embed> </object> </video>
Тем временем
Если вы пока не хотите использовать тег <video>, существует валидный XHTML-код для отображения видео:
<object width="460" height="265" data="http://video.com/moogaloop.swf?clip_id=5072163" type="application/x-shockwave-flash"> <param value="http://vimeo.com/moogaloop.swf?clip_id=5072163"></param> <param name="allowFullScreen" value="true"></param> <param value="always"></param> </object> Источник: css-live.ru