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

ВИДЕОКУРС HTML. УРОК 49.

Рубрикатор статьи

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

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

Опять же путь к файлу и его версия могут отличаться, это следует учесть. Кроме того, в этом коде сразу прописаны параметры плеера, с использованием функции 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><param name="allowFullScreen" value="true"></param><param name="allowscriptaccess" value="always"></param><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="true"></embed></object>

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

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

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

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

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

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

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

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

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

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

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

Видеокурс "Технические секреты групп Вконтакте" доступен для скачивания!

Не получается сделать меню в группе Вконтакте? Устали платить другим за добавление меню в Вашу группу? Хотели бы научится всем техническим тонкостям и экономить свои деньги? Тогда скачайте курс прямо сейчас!

VN:F [1.9.22_1171]
Оценка статьи: 6.0/10 (5 голосов)
Автор: Михаил Веб Дата публикации: 23.07.2014