HTML теги для отображения медиа файлов

Здравствуйте уважаемые читатели блога Сам себе Seoшник. Сегодня в продолжении        темы про HTML верстки сайта я расскажу о том, как можно с помощью     определенных тегов разместить у себя на сайте медиа файлы (видео, музыка, картинки, флеш).

Теги (embed и object) в спецификации HTML 5 описаны, а значит мне имеет смысл сегодня рассказать вам о них. Заранее скажу, что эти теги работает не во всех браузерах одинаково.

HTML теги для медиа файлов

Вообще современная веб страница состоит из трех составляющих:

1. Язык HTML
2. CSS
3. JavaScript

Все выше перечисленные элементы позволяют наполнить обычную веб страницу контентом, медиа файлами, фоном, дополнительный функционал и так далее.

JavaScript активно взаимодействует не только с Html, но и CSS. Но пока мы с вами не будет затрагивать эту облать из-за ее сложности. Тем более, что большинство важных вопросов в JavaScript уже решены специально для начинающих веб мастеров, так что нам с вами не придется изобретать велосипед заново.

Но вернемся к заданной мною вначале статьи теме. Для того чтобы включить в состав веб страницы медиа файлы, мы воспользуемся тегами старого доброго Html 4.01, а именно embed и object, тем более, что в состав новой версии Html они тоже будут включены.

И так, теги object и embed являются парными и размещенными на веб странице они практически ничего не делают кроме того, что освобождают область, в которую должно что-нибудь загрузиться.

HTML теги

Начнем пожалуй с рассмотрения тега embed. Используя элемент embed мы должны будет прописывать два атрибута Src и Type. Как вы уже догодались атрибут Scr - это путь до медиафайла, а атрибут Type - это тип загружаемого файла.

Давайте вместе вставим на веб страницу вируальные флеш часы, чтобы убедится как работает элемент embed. Первым делом находим для себя любые флешь часы. Для себя я выбрал часы с сайта

http://clip2net.com. (http://clip2net.com/page/m5997/277322)

В принципе, многие известные браузеры сами догадаются о том, какой тип файла вы собираетесь загрузить к себе на страничку, но лучше запомнить правильное прописывания всех атрибутов тега embed, чтобы в дальнейшем с Html 5 не было никаких проблем.

<embed type="application/x-shockwave-flash" src="http://clip2net.com/page/m5997/277322"></embed>

Таким образом мы видим, что буквально несколько маленьких операций позволили нам воссоздать у себя на веб странице флеш часы, которые отлично ходят и в данный момент показывают московское время.

Чтобы вставить видеоролик все с помощью того же элемента embed нам нужно лишь дополнительно прописать размеры, а в остальном будет все тоже самое, что и с часами

<embed width="540" height="300" type="application/x-shockwave-flash" src="http://www.youtube.com/v/ypf9GyJ594o?version=3&amp;hl=ru_RU"></embed>

Если использовать тег из новой версии Html 5, то в основном во всех браузерах будет пока только графическое изображение видео ролика, но проигрываться оно к сожалению не будет из-за того, что Html 5 пока находится на доработке.

Использование HTML тегов

При использовании тега object также нужно использовать два обязательных атрибута, а именно type и data. С первым все понятно он имеет такое же значение как и embed, а второй служит для указания пути.

Единственное отличие тега object от embed - это то, что внутри object можно прописывать другие теги, например <p>, чтобы в случае отказа видео высветился текст о том, что оно не работает, например:

<object type="application/x-shockwave-flash" data="http://clip2net.com/page/m5997/277322">
<p>Упс</p>
</object>

Вот так мы с вами научились вставлять разные медиафайлы на веб страницы с помощью Html тегов object и embed.

Информация для любителей различных компьютерных игр. Интересная игра Karos, кто играл в эту игру подтвердят, но для полноценной игры нужно приобрести игровую валюту, караты. Тут есть всё что нужно для karos начало караты тоже имеются, подробнее можно узнать пройдя по ссылке!

Подписка на обновление блога!

автор: Ловцов Алексей