Вставить видео на сайт

От автора: приветствую всех читателей webformyself. В прошлой статье мы рассматривали установку счетчика, а сегодня я вам покажу, как разместить видео на сайте двумя способами и какие у каждого особенности.

Вставка видео на сайт

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

Как я уже и говорил в начале, существует два способа вставки, которые сегодня можно использовать:

Через фреймы

С помощью тега video, который появился в html5

JavaScript. Быстрый старт

Изучите основы JavaScript на практическом примере по созданию веб-приложения

С помощью скриптов

Как разместить видео с Youtube на сайте?

Это очень просто. Идете на ютуб и находите там тот ролик, которое вам нужно вставить к себе на страницу. Под ним есть пару кнопок. В частности, кнопка “Поделиться”. Здесь выбираем пункт html-код и ютуб покажет нам код, который надо вставить у себя в статье, чтобы видео вывелось в ней. Код имеет такое строение:

1 <iframe width = «» height = «» src = «» frameborder = «0» allowfullscreen></iframe>

Давайте вы нем немного разберемся, чтобы понимать, как он работает. Атрибуты width и height указывают ширину и высоту нашего контейнера, вы можете выставить их по дизайну вашего сайта. Пустой атрибут allowfullscreen разрешает расширять содержимое на весь экран, пользователи часто это делают и не нужно им запрещать это.

Frameborder – это рамка фрейма, но она нам ни к чему. Вы можете задать ее самостоятельно через css. Наконец, самый важный параметр – src. Он указывает путь к видео на youtube. https://www.youtube.com/embed/уникальный id видео.

Таким образом, вам достаточно знать адрес конкретного ролика и можно его самостоятельно скопировать и вписать в код.

В данном случае id видео это то, что идет после watch?v=.

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

Вставка через html код

Наверняка многие из вас знают, что появилась новая версия языка разметки — html5, и она принесла с собой пару новых тегов и возможностей. Кстати, подробно об этом вы можете посмотреть в нашем курсе по этой технологии.

Так вот, там появился также тег video и он позволяет вставить видеоролик на сайт без каких-либо скриптов, а также воспроизвести его через встроенный плеер. Это делается вот таким кодом:

JavaScript. Быстрый старт

Изучите основы JavaScript на практическом примере по созданию веб-приложения

Одинарные теги source показывает браузеру путь к файлам и их MIME-тип для правильной интерпретации. Как видите, для работы во всех браузерах нам понадобится один и тот же файл в трех форматах. Сконвертировать можете в любом толковом конвертере или в онлайн-сервисе. Например, online-convert.com.

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

Другие способы вставки

Однако кроме этих вариантов есть и другие. Например, вы можете скачать скрипт, который будет выводить плеер. Один из самых популярных – FlowPlayer. Его нужно скачать, распаковать на ваш сайт, прописать путь к скрипту в html-файле и вставить само видео с помощью функции. Руководство по использованию плеера можно найти в документации к нему.

Пример вставки видео через flowplayer. Первым делом нужно подключить скрипт в head:

1 <script type=»text/javascript» src=»flowplay/flowplayer-3.2.2.min.js»></script>

Далее в body там, где нужно вывести ролик, нужно написать примерно следующее:

Для работоспособности всего этого дела:

Укажите правильные пути к файлам

Обратитесь к ссылке с id = “js-player”, в которую вставлено наше видео, и напишите ей пару css-стилей. Например, сделайте ее блочной для корректного отображения и добавьте оформление, если это необходимо. Самое главное, задайте высоту и ширину.

Ну а раньше в html видео часто вставляли через тег object, указывая в нем путь к нужному плагину, который мог бы распознать видео и воспроизвести его. В html5 его использование осуждается.

Тег object во многом похож на video, ведь в нем тоже используются одинарные теги, а именно param. В них прописываются различные настройки. Другой тег, с помощью которого можно вставить медиафайлы – embed.

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

Width и height – тут все понятно, это размеры;

Src –путь к видео, которое нужно отобразить ;

Type — MIME-тип содержимого;

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

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

JavaScript. Быстрый старт

Изучите основы JavaScript на практическом примере по созданию веб-приложения

>Верстка-Мастер. От теории до верстки популярных шаблонов

Изучите современную верстку сайтов с нуля

Как добавить HTML5-видео на веб-страницу

  • 1. Элемент <video>
  • 2. Встраиваемый интерактивный контент <embed>
  • 3. Видеокодеки
  • 4. Видеоконтейнеры
  • 5. Альтернативные медиа-ресурсы <source>
  • 6. Добавление субтитров и заголовков <track>
  • 7. Пример: размещаем видео на сайте
  • 8. Видеоконвертеры

1. Элемент <video>

Поддержка браузерами

В простом варианте HTML-разметка для размещения видеофайла на странице имеет следующий вид:

<video src=»video.ogv» controls></video>

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

Как и в случае с аудиофайлами, рекомендуется перечислять в <source> все форматы, начиная с более предпочтительного. Также нужно указывать MIME-тип для каждого видеофайла.

<video controls width=»400″ height=»300″> <source src=»video.mp4″ type=»video/mp4″><!— MP4 для Safari, IE9, iPhone, iPad, Android, и Windows Phone 7 —> <source src=»video.webm» type=»video/webm»><!— WebM/VP8 для Firefox4, Opera, и Chrome —> <source src=»video.ogv» type=»video/ogg»><!— Ogg/Vorbis для старых версий браузеров Firefox и Opera —> <object data=»video.swf» type=»application/x-shockwave-flash»><!— добавляем видеоконтент для устаревших браузеров, в которых нет поддержки элемента video —> <param name=»movie» value=»video.swf»> </object> </video>

Таблица 1. Атрибуты тега <video>

Атрибут Описание, принимаемое значение
autoplay Автоматическое воспроизведение видеоофайла сразу же после загрузки страницы.
controls Указывает браузеру, что нужно отобразить базовые элементы управления воспроизведением (воспроизведение, пауза, громкость).
height Задает высоту окна для отображения видеоданных, возможные значения: px или %
loop Циклическое воспроизведение видеофайла.
muted Выключает звук при воспроизведении видеофайла.
poster URL файла изображения, которое будет отображаться во время загрузки видеофайла или до тех пор, пока пользователь не нажмет на кнопку PLAY. Если атрибут не задан, то будет отображаться первый кадр видеофайла.
preload Атрибут, отвечающий за предварительную загрузку видеоконтента. Не является обязательным, некоторые браузеры игнорируют его. Возможные значения:
auto — браузер загружает видеофайл полностью, чтобы он был доступен, когда пользователь начнет его воспроизведение.
metadata — браузер загружает первую небольшую часть видеофайла, чтобы определить его основные характеристики.
none — отсутствие автоматической загрузки видеофайла.
src Содержит абсолютный или относительный URL-адрес видеофайла.
width Задает ширину окна для отображения видеоданных, возможные значения: px или %

2. Встраиваемый интерактивный контент

Элемент <embed> определяет контейнер для внешнего приложения или интерактивного содержимого (другими словами, плагина). Большинство браузеров поддерживало данный элемент на протяжении долгого времени. Тем не менее, данный тег не был включен в спецификацию HTML4, его добавили в спецификацию HTML5. С помощью <embed> на веб-страницы можно добавлять не только видеофайлы, но и векторные изображения в формате swf:

<embed src=»movie.mov» type=»video/quicktime» width=»640″ height=»480″> <embed src=»helloworld.swf»>

Таблица 2. Атрибуты тега <embed>

Атрибут Описание, принимаемое значение
height Определяет высоту встраиваемого контента в px или %.
src Содержит абсолютный или относительный URL-адрес медиафайла.
type Определяет MIME-тип встраиваемого файла.
width Определяет ширину встраиваемого контента в px или %.

3. Видеокодеки

При просмотре видео проигрыватель должен его декодировать. Одни проигрыватели используют программное декодирование видеопотока, другие используют аппаратное декодирование.

Важно! Поскольку каждый браузер поддерживает определенный кодек, поэтому, чтобы обеспечить воспроизведение видео-контента во всех браузерах, видео-файл нужно размещать в нескольких форматах.

H.264 — высококачественный кодек от фирмы MPEG, делится на профили для поддержки как устройств с минимальными возможностями, так и устройств высокого разрешения.

Ogg Theora — открытый бесплатный стандарт для видео, качество и производительность несколько ниже стандарта H.264.

VP8 — открытый бесплатный кодек, сходный по качеству с H.264. Поддерживается в Firefox, Chrome и Opera.

4. Видеоконтейнеры

Рис. 2. Видеоконтейнер

Любой видеофайл является файловым контейнером, в котором хранятся другие файлы. Аудио- и видеодорожки объединяются для воспроизведения видеоролика. Метаданные содержат информацию о данном видеоролике — изображение обложки, субтитры и пр. К популярным форматам видеоконтейнеров относятся следующие:

Ogg (.ogv, .oga, .ogx, .ogg) — формат-контейнер с открытым исходным кодом для видеокодека Theora и аудио Vorbis. Работает в Firefox, Chrome и Opera.
MIME-тип: video/ogg.

MPEG 4 (.mp4) — формат-контейнер для видеокодека H.264 и аудиокодека AAC. Работает в Safari и Chrome. Кодирует видео, в том числе высокой четкости, для полного спектра устройств, таких как iPhone, iPod и iPad.
MIME-тип: video/mp4.

WebM (.webm) — формат-контейнер с открытым исходным кодом для видеокодека VP8 от Google и аудиокодека Ogg Vorbis. Работает в Firefox, Chrome, Opera и Adobe Flash Player.
MIME-тип: video/webm.

Audio Video Interleave (.avi) — формат предназначен для записи звука и движущихся изображений, соответствует спецификации RIFF.
MIME-тип: video/vnd.avi, video/avi, video/msvideo, video/x-msvideo.

Matroska (.mkv) — популярный видеоконтейнер, может содержать видео в формате H.264, VP8 или Theora.
MIME-тип: video/x-matroska, audio/x-matroska.

На данный момент браузеры поддерживают три основных видео формата:

Формат Видеокодек Аудиокодек
.mp4 H.264 AAC
.ogg/.ogv Theora Vorbis
.webm VP8 Vorbis

Видео в формате .avi на сайте средствами HTML5 не воспроизводится. Поэтому его необходимо перекодировать в эти три формата с соответствующими видео и аудиокодеками для вывода на сайте. Для этого можно использовать видеоконвертеры, указанные на странице ниже.

Чтобы убедиться, что браузер умеет обрабатывать видеофайлы, нужно создать файл .htaccess в папке, где находится веб-страница, определяющая MIME-типы для видео:

AddType video/ogg .ogv AddType video/mp4 .mp4 AddType video/webm .webm

Несмотря на то, что HTML5-видео поддерживается современными браузерами, тем не менее для Internet Explorer (9+) и Safari требуются установленные плагины Microsoft Media Player и Apple QuickTime соответственно.

5. Альтернативные медиа-ресурсы

Элемент <source> используется для указания нескольких медиа-ресурсов для <audio> и <video>. Добавляет альтернативные видео/аудио файлы, которые браузер может выбрать из предложенных на основании поддерживаемого им типа носителя или кодека.

Таблица 3. Атрибуты тега <source>

Атрибут Описание, принимаемое значение
media Определяет тип медиа-устройства (т.е. для каких устройств оптимизирован файл).
src Содержит абсолютный или относительный URL-адрес медиафайла.
type Определяет MIME-тип медиафайла.

6. Добавление субтитров и заголовков

Элемент <track> используется в качестве дочернего элемента <audio> и <video>. Добавляет текстовую дорожку для субтитров, заголовков медиафайлов или другой текстовой информации, которая должна быть видна во время воспроизведения медиа-ресурса.

Таблица 4. Атрибуты тега <track>

Атрибут Описание, принимаемое значение
default Указывает, что данная дорожка воспроизводится по умолчанию. Только один элемент <track> может содержать данный атрибут.
kind Указывает тип текстовой дорожки, по умолчанию выводятся субтитры (subtitles). Принимаемые значения:
captions — перевод диалогов и звуковых эффектов, отображаемый в виде текста поверх видео (для глухих пользователей).
chapters — добавляет названия глав в виде списка для навигации по медиафайлу.
descriptions — добавляет звуковое описание происходящего в видео (для невидящих пользователей).
metadata — метаданные, используемые скриптами, не отображаются для пользователей.
subtitles — текстовое дублирование звуковой дорожки видео, отображается в виде субтитров к видео.
label Добавляет название дорожки. Если этот атрибут не задан, браузер применит значение по умолчанию.
src Содержит абсолютный или относительный URL-адрес аудио- или видеофайла.
srclang Язык воспроизводимой дорожки.

7. Пример: размещаем видео на сайте

1. Декодируем видео в три файла с соответствующими видео и аудиокодеками:
для .mp4 — H.264/AAC,
для .webm — VP8/Vorbis,
для .ogv — Theora/Vorbis.
2. Добавляем поддержку MIME-типов в файл .htaccess.
3. Размещаем код для вставки видео на сайт с помощью HTML5-разметки, используя атрибуты для задания видео требуемых параметров:

<video controls width=»710″ height=»538″ poster=»/examples/media/martynko.png» preload=»none»> <source src=»/examples/media/martynko.mp4″ type=»video/mp4″> <source src=»/examples/media/martynko.webm» type=»video/webm»> <source src=»/examples/media/martynko.ogv» type=»video/ogg»> </video>

4. Если вы хотите выровнять видеоплеер на странице, нужно обернуть элемент <video> в контейнер <div> с присвоенным классом, для которого задаются ширина и высота, соответствующие размерам вашего видео. Далее, с помощью css-свойств можно задать отступы, выравнивание на странице и т.д.

8. Видеоконвертеры

Movavi — позволяет конвертировать видео и аудио в необходимый вам формат. Сохраняет медиафайлы для проигрывания на мобильных устройствах. «Умные» готовые профили позволяют добиваться максимального качества.

ONLINE-CONVERT — бесплатный онлайн-конвертер, позволяющий конвертировать любые медиа-файлы из одного формата в другой.

Firefogg — модуль расширения для Firefox, может создавать видеофайлы Theora и WebM. Работает непосредственно в браузере, но вся работа выполняется локально без обращения к веб-серверу.

#Видео уроки #ВидеоКурс HTML

23 июля 2014

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

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

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

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

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

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

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

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

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

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

<script>// <!]></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?

Есть два вида вставки видео на сайт: видео с другого ресурса (Youtube, Yandex video, Rutube и другие) и видеофайл, который уже загружен на сайт и открывающийся прямой ссылкой.
Самый простой в исполнении — первый способ. Однако у него есть как плюсы, так и минусы. В случае загрузки видео со специального видеосервиса нужно выполнить три пункта:
1. Зарегистрироваться на видеосервисе (Например: , , )
2. После регистрации у Вас появится возможность загрузить видео
3. Получить код видео и вставить к себе на сайт
После этого Вы вставляете полученный код к себе на страницу. Получается примерно следующий отрезок кода:
Код HTML
<object width=»470″ height=»353″>
<param name=»movie» value=»http://video.rutube.ru/7c806393a9705797d7e92c4a05493d5d»>
<param name=»wmode» value=»window»>
<param name=»allowFullScreen» value=»true»>
<embed src=»http://video.rutube.ru/7c806393a9705797d7e92c4a05493d5d» type=»application/x-shockwave-flash» wmode=»window» allowfullscreen=»true» width=»470″ height=»353″>
</object>

Настройки окна видео подстраиваете под себя: width (ширина в пикселях), height (высота в пикселях). В ссылке http://video.rutube.ru/7c806393a9705797d7e92c4a05493d5d при выборе другого видео достаточно поменять код видео, который подчёркнут. Тег embed используется для старых настроек браузеров, поэтому там также не забываем поменять размеры видео и тд, иначе при просмотре через другой браузер окно с видео будет отличаться.
Второй способ покажется немного сложнее. Во-первых, видео целиком нужно залить на хостинг, а он, как известно, не резиновый, во-вторых, для проигрывания даного видео (кроссбраузерного — так, чтобы во всех браузерах всё было одинаково!) следует использовать видео-проигрыватель, который уже не надо скачивать, а достаточно только подключить в head Вашего документа.

Поскольку простых путей не ищем, то предположим, что Вы хотите вставить SWF-файл. Существует множество плееров доступных он-лайн. Например, FlowPlayer (). После скачивания архива загрузите его на сайт в папку с соответствующим названием flowplayer. После этого надо прикрепить к странице с видео данный плеер, для этого вставляем в head следующую строку:
Код HTML
<script type=»text/javascript» src=»flowplayer/flowplayer-3.2.2.min.js»></script>
Останется только на самой стране вставить код для проигрывания видео. В href не забудьте вставить путь к видео.
<a href=»путь_к_swf_видео» style=»display: block; width: 500px; height: 400px;» id=»player»></a>
<script language=»JavaScript»>
flowplayer(«player», {src : «http://адрес_вашего_сайта/flowplayer/flowplayer-3.2.2.swf», wmode: «transparent»});
</script>
Из плюсов данного метода хотел бы отметить отсутствие рекламы при проигрывании видео и, при нормальной работающем хостинге(!), быструю загрузку видео.

Вставка видео или тег video в HTML5

Позволяет встраивать, воспроизводить и управлять настройками видеоролика на веб-странице.
Синтаксис
<video>
<source src=»URL»>
</video>
Атрибуты тега video
autoplay — Видео начинает воспроизводиться автоматически после загрузки страницы.
controls — Добавляет панель управления к видеоролику.
height — Задает высоту области для воспроизведения видеоролика.
loop — Повторяет воспроизведение видео с начала после его завершения.
poster — Указывает адрес картинки, которая будет отображаться, пока видео не доступно или не воспроизводится.
preload — Используется для загрузки видео вместе с загрузкой веб-страницы.
src — Указывает путь к воспроизводимому видеоролику.
width — Задает ширину области для воспроизведения видеоролика.
Пример кода тега video
<!DOCTYPE html>
<html>
<head>
<meta charset=»utf-8″>
<title>video</title>
</head>
<body>
<video width=»400″ height=»300″ controls=»controls» poster=»video/duel.jpg»>
<source src=»video/duel.ogv» type=’video/ogg; codecs=»theora, vorbis»‘>
<source src=»video/duel.mp4″ type=’video/mp4; codecs=»avc1.42E01E, mp4a.40.2″‘>
<source src=»video/duel.webm» type=’video/webm; codecs=»vp8, vorbis»‘>
Тег video не поддерживается вашим браузером.
<a href=»video/duel.mp4″>Скачайте видео</a>.
</video>
</body>
</html>

Вставка видео с помощью в html-страницу при помощи embed

Элемент embed используется для загрузки и отображения объектов (например, видеофайлов, флэш-роликов, некоторых звуковых файлов и т.д.), которые исходно браузер не понимает. Чем метод отличается от предыдущих? В большинстве случаев, подобные объекты требуют подключения к браузеру специального модуля, который называется плагин, или запуска вспомогательной программы.
К слову, спецификация HTML 4.0 рекомендует использовать тег object для загрузки внешних данных вместо тега embed. Однако некоторые браузеры не отображают таким образом нужную информацию, поэтому наилучшим вариантом будет поместить embed внутрь контейнера object.
<!DOCTYPE html>
<html>
<head>
<meta charset=»utf-8″>
<title>Пример кода с тегом EMBED</title>
</head>
<body>
<embed src=»images/examle.swf» width=»400″ height=»300″
type=»application/x-shockwave-flash»
pluginspage=»http://www.macromedia.com/go/getflashplayer»>
</body>
</html>
Используемые атрибуты тега embed
align — определяет как объект будет выравниваться на странице и способ его обтекания текстом
height — высота объекта
hidden — указывает, скрыть объект на странице или нет
hspace — горизонтальный отступ от объекта до окружающего контента