Отправляет email-рассылки с помощью сервиса Sendsay

WebDesign.Doc

Подписаться Бесплатная новостная рассылка Подписчиков 1.564 RSS
←   Апрель 2009   →
 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
13.04.2009
15:25:06
18:05:20
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
28.04.2009
10:26:47
13:56:29
29
30


За последние 60 дней ни разу не выходила


Сайт рассылки: http://internetsoft.16mb.com/
Открыта: 15-02-2005

Автор
Andrew

Статистика

1.564 подписчиков
0 за неделю
←   Все выпуски   →

WebDesign.Doc - электронная библиотека веб-мастера: 167


WEbDESiGN.doc   //   №167
Видеокурсы по PHP+MySQL для начинающихJoomla - Профессиональный сайт за один деньВесь Арсенал Флешера на DVD

МАСТЕРСКАЯ

Что нового в HTML 5.0?
Часть 2: внедрение видео и аудио элементов

Начало. Что нового в HTML 5.0? Часть 1

В последние годы размещение аудио и видео ресурсов на страницах веб-сайтов становится все более популярным, и такие проекты как: YouTube, Viddler, Revver, MySpace сделали возможность размещения этих элементов еще более доступным для пользователей. Однако поскольку в настоящее время формат HTML не обладает широкими возможностями внерения аудио и видео, разработчики стараются реализовать это с помощью Flash. Хотя можно воспользоваться и внедрением различных плагинов, таких как QuickTime, Windows Media и т.п. Но реализация на Flash на данный момент является наиболее распространненным способом, а также наиболее совместимым с различными браузерами.

Нужно отметить, что разработчики в процесее создания flash-плейеров, заинтересованы, прежде всего, в создании собственных пользовательских интерфейсов, которые будут обладать основными функциями: "воспроизведение", "пауза", "стоп" и настройка громкости. Задумка состоит в том, чтобы представить эти функциии в браузерах, добавив поддержку внедрения видео и аудио и осуществлять управление воспроизведением с помощью DOM API.

Новые элементы "video" и "audio" позволяют очень просто решить эту задачу. Большинство API распределяются между этими двумя элементами, с той лишь разницей, связанной с различием между визуальными и невизуальными медиа-ресурсами. Разработчики Opera и WebKit создали продукт с частичной поддержкой элемента "video". Вы можете скачать эти эксперементальные продукты от Оpera и от WebKit и протестировать. Opera поддерживает форматы Ogg Theora, а WebKit поддерживает все форматы QuickTime, даже разработанные сторонними издателями.

Самый простой способ подключения видео элементов на сайт это использование тега "video", а также разрешение браузеру использовать пользовательский интерфейс по умолчанию. Логическое свойство "controls" позволяет определить нужно или не нужно использовать пользовательский интерфейс по умолчанию.

<video src="video.ogv" mce_src="video.ogv" controls
poster="poster.jpg"width="320" height="240">
<a href="video.ogv" mce_href="video.ogv">Download movie</a>
</video>

Необязательный атрибут "poster" позволяет установить картинку, которая будет отображаться перед тем, как начнется вопроизведение видео. Хотя существует множество форматов, которые устанавливают такую картинку по умолчанию (например MPEG-4), это решение представляет собой альтернативу, обеспечивая поддержку любого формата.

Так же, очень просто подключить на страницу и аудио элементы, используя тег "audio". Большинство свойств элементов "audio" и "video" одинаковы, однако в силу очевидных причин, у элемента аудио отсутствуют свойства ширины, высота и картинки по умолчанию.

<audio src="music.oga" mce_src="music.oga" controls>
<a href="music.oga" mce_href="music.oga">Download song</a>
</audio>

HTML 5 включает также элемент "source", позволяющий определить путь к альтернативным видео и аудио файлам, которые браузер может выбрать исходя из того формата, который он поддерживает. Свойство media можно использовать для указания истоничка ресурса, основываясь на ограниченных возможностях устройства воиспроизведения и для указания типа ресурса и типа кодека. Отметим, что когда используется элемент "source" , аттрибут "src" должен быть исключен из родительского аудио и видео элемента или данные альтернативные пути будут проигнорированы.

<video poster="poster.jpg">
<source src="video.3gp" mce_src="video.3gp" type="video/3gpp"
media="handheld">
<source src="video.ogv" mce_src="video.ogv" type="video/ogg;
codecs=theora, vorbis">
<source src="video.mp4" mce_src="video.mp4" type="video/mp4">
</video>
<audio>
<source src="music.oga" mce_src="music.oga" type="audio/ogg">
<source src="music.mp3" mce_src="music.mp3" type="audio/mpeg">
</audio>

Для разработчиков, которые хотят больше контроля над пользовательским интерфейсом, чтобы сделать его соответсвующим общему дизайну веб-страницы, расширения API позволяют использовать несколько методов и событий, позволяющих скрипту управлять вопсроизведением медиа-ресурса. Простейшие методы это: play(), pause(), и установка currentTime для возвращения к началу.

<video src="video.ogg" mce_src="video.ogg" id="video"></video>
<script>
var video = document.getElementById("video");
</script>
<p><button type="button" onclick="video.play();">Play</button>
<button type="button" onclick="video.pause();">Pause</button>
<button type="button" onclick="video.currentTime = 0;">
<< Rewind</button>

Существует также множество других видео и аудио элементов и расширений API, не затронутых в этой статье. Более подробно вы сможете прочесть об этом в текущей спецификации HTML 5.

См. также:

Мастерская. Лучшие публикации:

Библиотека веб-мастера. Избранное:

ОТПРАВИТЬ ВОПРОС В РАССЫЛКУ:
HELP@WM-ZONE.INFO →

Надеюсь, что вам понравился этот выпуск рассылки и вы узнали что-то новое и полезное для себя. Если у вас есть пожелания или предложения как сделать рассылку лучше, присылайте их на наш e-mail: admin@wm-zone.info

ведущий рассылки - Путченков Дмитрий
WebMasterZone - http://wm-zone.info
В избранное