SdelaemBlog

Создание Сайтов и их настройка

Как вставить видео в HTML-документ? HTML-теги object и param.

Главная Статьи HTML & CSS ВидеоКурс HTML Как вставить видео в HTML-документ? HTML-теги object и param.

В прошлом видео уроке мы познакомились с тегами <script> и <noscript>, которые предназначены для вставки и работы со скриптами в HTML. Узнали что такое скрипты, для чего они нужны, и как их использовать в HTML-документе. Кроме того, я упоминал, что тема скриптов довольно сильно взаимосвязана с темой вставки объектов в HTML-документ, например, таких как видео или аудио.

Исходя из выше сказанного, можно сделать вывод, что сегодня мы познакомимся с понятием объектов в HTML. Узнаем, что это такое? Для чего они нужны, и как ими пользоваться? Но самое главное, что сегодня мы разберем это довольно популярный вопрос при работе с HTML-документами или создании сайта на HTML. Как вставить видео в HTML-документ? Существуют различные способы вставки видео в HTML. Мы воспользуемся только некоторыми из них, самыми основными.

Как вставить видео в HTML-документ? HTML-теги object и param.

Вставка видео в HTML с использованием Flash-плеера.

Данный метод я бы не назвал самым популярным, однако знать о нем необходимо, так как не всегда в силу тех или иных обстоятельств хочется использовать сторонние сервисы для вставки видео, о которых мы поговорим позже.

Этот способ основан на вставке плеера в HTML-документ и воспроизведении видео, которое находится непосредственно на нашем сервере. Именно с этим способом вставки тесно связан прошлый видео урок, так как в этом методе мы будем использовать видео плеер, для подключения которого нужно знать, как подключать скрипты.

Итак. Сначала необходимо скачать файлы самого плеера. Это можно сделать на этой странице. Скачиваем бесплатные дополнительные материалы для ВидеоКурса и там находим необходимые файлы. Как их найти и что с ними делать, подробно рассказано в самом видео.

После того, как все файлы скачаны и для них определенно местоположение на сервере мы можем приступить к подключению этих файлов в HTML-документе. Сначала мы подключим JavaScript-файл. До закрывающего HTML-тега <head>, мы пропишем примерно следующий код:

<script src="flowplayer/flowplayer-3.2.2.min.js"></script>

Обратите внимание, что сам путь к файлу и версия скрипта могут отличаться.

После того как мы подключили файл скрипта видео плеера, нам необходимо добавить сам плеер с видео на страницу. Для этого, в нашем конкретном случае, мы должны воспользоваться тегами <a>, которые предназначены для вставки ссылок в HTML. Также здесь стоит учесть, что данный тег должен использоваться внутри блочного элемента, например, тега <div>. В результате мы должны получить примерно следующий код, который нужно добавить между тегами <body>:

<script>// <![CDATA[ flowplayer("player", "flowplayer/flowplayer-3.2.2.swf",{ clip: { autoPlay: false, autoBuffering: true } } ); // ]]></script>

Обратите внимание, что путь к файлу и имя могут отличаться!

Теперь, когда у нас все готово к воспроизведению видео, мы должны подключить оболочку плеера и прописать некоторые параметры для его работы. Для этого, мы снова воспользуемся тегом <script> и подключим сам плеер. Здесь стоит обратить внимание, что тег <script> мы будем использовать не внутри тегов <head>, а внутри тегов <body>. Согласно спецификации HTML мы можем поступать таким образом. Для подключения оболочки видео плеера добавляем примерно следующий код, внутри тегов <body>:

Опять же путь к файлу и его версия могут отличаться, это следует учесть. Кроме того, в этом коде сразу прописаны параметры плеера, с использованием функции clip, где сказано, что плеер не должен воспроизводить видео автоматически и должна происходить буферизация видео файла. Она нужна для пред загрузки видео и более удобного просмотра без прерываний. Естественно эти параметры можно менять на свое усмотрение.

Вставка видео в HTML с YouTube.

Теперь рассмотрим еще один вариант вставки видео в HTML-документ с использованием сервиса YouTube. Я думаю, что не стоит объяснять, что такое YouTube и для чего он нужен? С помощью данного сервиса мы можем, как просматривать видео, так и добавлять свои видео файлы. Но для добавления своих видео необходима регистрация в Google.

Здесь все довольно просто. Переходим к видео, которое хотели бы вставить в HTML-документ и жмем на вкладку «Поделиться», где в свою очередь выбираем «HTML-код». Здесь стоит обратить внимание, что YouTube по умолчанию предлагает нам код, который не будет валиден в нашей спецификации HTML. Связано это с использование строго типа документа, иначе говоря, DOCTYPE, который мы решили использовать еще в самом начале ВидеоКурса. Чтобы избежать этого, достаточно поставить галочку в «Использовать старый код вставки». Тогда нам будет предложен другой код, с использованием тегов, о которых мы говорим сегодня, это <object> и <param>.

Чтобы вставить видео в HTML достаточно скопировать предложенный код и вставить его между тегами <body>. Все довольно просто. Но здесь опять же возникнет проблема с валидацией нашего документа. YouTube предлагает код примерно следующего вида:

<object width="560" height="315"><param name="movie" value="//www.youtube.com/v/JdPQvt7EO4U?hl=ru_RU&amp;version=3" /><param name="allowFullScreen" value="true" /><param name="allowscriptaccess" value="always" /><embed src="//www.youtube.com/v/JdPQvt7EO4U?hl=ru_RU&amp;version=3" type="application/x-shockwave-flash" width="560" height="315" allowscriptaccess="always" allowfullscreen="allowfullscreen" /></object>

При этом здесь использованы теги <embed>, которые не являются валидными в строгой спецификации.

Вставка видео в HTML с YouTube: Валидный вариант, с использованием HTML-тегов object и param.

Для начала давайте разберемся, что это за теги и для чего они нужны. <object> и <param> это еще два HTML-тега, о которых мы не говорили и изучим как раз в этом видео.

HTML-тег <object> предназначен для указания браузеру, как загружать и отображать объекты, которые браузер не понимает и не может воспринимать или воспроизводить. Это такие объекты как видео, аудио и Flash-баннеры.

HTML-тег <param> работает в паре с <object> и предназначен для передачи параметров объектов для отображения их в веб-браузере.

У этих тегов, как и у многих других, есть свои HTML-атрибуты, которые мы можем использовать в случае необходимости. Мы не будем использовать в этом видео все возможные атрибуты, и проверять их работу, а воспользуемся только теми, которые нужны нам для создания валидного кода из исходного кода предоставленного YouTube. Подробнее об этом смотрите в видео уроке. А здесь я просто предоставлю уже исправленный код, который спокойно пройдет валидацию и не будет мешать работе нашего HTML-сайта:

<object data="//www.youtube.com/v/0vxhkmeE7V0?version=3&amp;hl=ru_RU" type="application/x-shockwave-flash" width="560" height="340"> <param name="video" value="//www.youtube.com/v/0vxhkmeE7V0?version=3&amp;hl=ru_RU" /> <param name="allowfullscreen" value="true" /> <param name="allowscriptaccess" value="always" /></object>

Обратите внимание, что тег <object> использован внутри универсального тега <div>. Это связано с тем, что теги, которые относятся к объектам являются строчными элементами и должны находиться внутри блочного. Что такое строчные и блочные элементы, Вы можете вспомнить здесь.

Видео урок: Как вставить видео в HTML-документ?

HTML-справочник и другие материалы можно и нужно скачать здесь!

В следующем видео уроке мы узнаем, как вставить аудио в HTML-документ?

Оставьте свой коммент

Комментариев пока нет, но вы можете стать первым!

Чтобы оставить комментарий, заполните, пожалуйста форму ниже:

Смайлы

Обязательно для Заполнения!

Обязательно для Заполнения!

Проверка комментариев включена. Прежде чем Ваши комментарии будут опубликованы пройдет какое-то время.

Отправить жалобу разработчику сайта

Если у Вас возникли проблемы, не стесняйтесь отправлять жалобу, она обязательно будет учтена и все будет исправлено.

[contact-form-7 404 "Not Found"]

Спасибо большое за поддержку проекта! :)

Для поддержки проекта, выберите убодный способ для оплаты: