Не каждый владелец сайта или веб-разработчик может позволить себе Flash, Director или инструменты для редактирования или создания видео, чтобы интегрировать изображения, звук и видео в свои сайты. Даже PowerPoint может быть вне вашего понимания. И давайте посмотрим правде в глаза — они не самые простые инструменты для освоения, либо. Но что, если у вас есть Блокнот и ряд звуковых, видео или графических файлов? Каков ответ? УЛЫБКА! Или: SMIL, если быть точным.
Что такое СМИЛ?
SMIL означает Синхронизированный язык интеграции мультимедиа и определяется W3C.
Что это позволяет вам делать? SMIL — это язык разметки на основе XML, который позволяет объединять отдельные изображения, звуки и видео в презентацию. Хотя он не будет конкурировать с Director или другими подобными продуктами за функциональность высшего класса, прелесть SMIL в том, что это легко. Очень просто! Если у вас не было особых проблем с поиском HTML, вы, вероятно, освоите SMIL через час.
Структура СМИЛ
SMIL похож на HTML в том, что он разделен на HEADBODY Однако одно ключевое отличие здесь заключается в том, что базовый пространственный макет презентации определяется в разделе HEAD Затем контент для этих регионов добавляется в раздел BODY
Посмотрите на код ниже, чтобы увидеть, как эти разделы объединяются в документ:
<smil>
<head>
<layout>
<region id="reg1" top="0" left="0" width="300" height="200" />
<region id="reg2" top="0" left="300" width="300" height="200" />
</layout>
</head>
<body>
<seq>
<par>
<img id="img1" src="image.gif" region="reg1" dur="4s" />
<audio id="aud1" src="audio.wav" dur="4s" />
</par>
<par>
<img id="img2" src="image2.gif" region="reg2" dur="4s" />
<audio id="aud2" src="audio2.wav" dur="4s" />
</par>
<img id="img3" src="finish.gif" region="reg1" dur="4s" />
</seq>
</body>
</smil>
Как вы можете видеть, пространственная компоновка четко определена в разделе HEAD Надеюсь, вы также заметили:
- что синтаксис XHTML используется для закрытия всех тегов,
- использование атрибутов ‘dur’ и
- использование тегов
<seq><par>
dur
Тег dur Вы должны указать это как числовое значение, а затем s Или, если вы хотите, чтобы ваш файл отображался постоянно, вы можете использовать атрибут indefinite
Теги <seq><par>
Теги <seq><par>
Наличие <seq>BODY Использование <par>
Тем не менее, SMIL дает вам возможность вкладывать эти теги, что позволяет вам более гибко управлять событиями. То, как я разместил теги <seq><par> Затем появится второе изображение, сопровождаемое звуковым файлом, в течение 4 секунд. Наконец изображение появится само по себе на 4 секунды. Таким образом, это будет презентация общей продолжительностью 12 секунд с использованием 5 разных файлов по 4 секунды каждый.
Модульная архитектура
Архитектура SMIL является модульной. Он имеет в общей сложности 45 различных модулей, относящихся к различным видам функциональности, которые сгруппированы в следующие функциональные области:
- Структура
- Мета информация
- раскладка
- тайминг
- Медиа Объекты
- соединение
- Контент контроль
- Анимация
- Переходы
- Временные Манипуляции
Эта модульная структура позволяет производителям программного обеспечения включать некоторые или все модули в свои продукты по мере необходимости — и позволяет инициативам по стандартизации делать то же самое. Надеюсь, вы сможете оценить силу такой простой концепции.
HTML-функции SMIL
SMIL также включает в себя множество основных функций HTML, таких как:
соединение
<a show="new" href="index2.smi">
<img src="image.gif" region="reg1" dur="indefinite" />
</a>
Текст
<text src="text1.txt" region="reg1" dur="10s" />
Это оно! Теперь вы готовы к созданию! Все, что вам нужно, это Блокнот, средство просмотра для отображения вашего творения и для сохранения ваших файлов в формате * .smi. Счастливая интеграция!
Дальнейшая информация
Доступно много игроков, но популярным и широко используемым вариантом является Real One Player .
Обязательно ознакомьтесь с демонстрацией возможностей SMIL на каждой странице: http://www.realnetworks.com/resources/samples/smil.html.
Вы можете найти больше информации и ресурсов о текущей (SMIL 2.0) и прошлых рекомендациях на http://www.w3.org/AudioVideo