Мы не рассматриваем в этой статье сторонние видеохостинги с ограниченным сроком хранения файлов, такие как YouTube, речь о том, как подключить видеофайл на свой сайт.

Основной в этом случае формат размещения видео - Adobe Flash Video (файлы типа .FLV) с кодеком H.264, битрейт - порядка 256 Кбит/с (можно и другой, но всё упирается в скорость).

Кросс-браузерный способ отображения потокового видео таков: скопировать в папку сайта файлы player.swf, swfobject.js и yt.swf из сборки JW FLV Media Player (ссылки будут ниже), потом подключить видеофайл в формате .FLV тегами вида

<script type="text/javascript" src="swfobject.js"></script>
<div id="player">Видео недоступно! Возможно, не включены Flash и Javascript в браузере</div>
<script type="text/javascript">
var so = new SWFObject('player.swf','mpl','400','250','8');
so.addParam('allowfullscreen','true');
so.addParam('flashvars','file=video.flv');
so.write('player');
</script>

Здесь подключается файл с именем video.flv из текущей по отношению к файлам плеера папки. Аналогично могут быть подключены видеофайлы в формате .MP4 и аудио .MP3. Разумеется, чтобы всё это увидеть, нужны включённые Javascript и Flash в браузере, по умолчанию они везде включены, у меня при проверке на локальном хосте приведённый код сработал во всей "большой четвёрке" IE, Opera, Firefox и Chrome.

Для конвертирования видео в формат .FLV или из него используйте Free FLV Converter. Он работает с большинством популярных форматов.

А вот появившийся в стандарте HTML 5 тег <video> в настоящее время поддерживается браузерами ограниченно, я бы не спешил с ним связываться.

Ссылки:

 JW FLV Media Player - самый популярный видеоплеер для сайта. Способен воспроизводить видео (mp4, flv) и аудио (mp3)

 Free FLV Converter - конвертер видео из формата FLV и в него

Альтернативные конвертеры FLV и плееры:

 FLV Converter (из FLV в другие форматы)

 Uppod: FLV и MP3 плеер для сайта, есть онлайн-сборка плеера

 Видеоплеер для web сайтов с открытыми исходниками

 WP Audio Player - плагин WordPress для проигрывания mp3-файлов на сайтах с этим движком

Весь приведённый софт официально бесплатен.

Что касается аудиофайлов, на Web-страницах часто размещают следующие их типы (список неполный):

• MIDI (Musical Instrument Digital Sequence) — стандартный музыкальный формат для воспроизведения мелодий;
• WAV — цифровой формат звуковых файлов Windows;
• MP3 — цифровой формат хранения сжатого аудиосигнала.

Возможны следующие основные способы связывания звукового файла с документом HTML:

1. применение специализированного тега <emded> и/или <object> (предпочтительно);
2. использование flash-плееров;
3. создание гиперссылки на звуковой файл.

Способ 1 предполагает включение в документ специализированных тегов, например:

<embed src="sound/rooster.wav" width="144" height="60" 
 autostart="true" align="left" hspace="5" vspace="5">

Следует учесть, что тег <embed> не входит в спецификацию HTML 4 и код с этим тегом не проходит валидацию. При подключении звукового файла тегом <object> следует указать в теге соответствующий MIME-тип файла, а также обычные общие атрибуты, например:

Файл в формате WAV: 

<object type="audio/wav" data="sound/rooster.wav" 
 align="middle" width="144" height="96" hspace="8">
 Тип объекта Wav не поддерживается</object>

Файл в формате MIDI: 

<object type="audio/midi" data="sound/saintsgo.mid" 
  align="middle" width="144" height="96" hspace="8">
 Тип объекта Midi не поддерживается</object>

Следует учесть, что аудиофайл формата MP3, подключенный данным способом с указанием MIME типа audio/mpeg, отобразят не все современные браузеры. Некоторые из них могут запросить установку соответствующего плагина.

Способ 2: использование flash-плееров для аудио, подключающих аудиофайлы аналогично описанной выше технологии подключения видео. Способ наиболее часто применяется для файлов .MP3.

Способ 3 предполагает указание обычной гиперссылки на файл:

<a href="sound/scream.wav">scream.wav</a> (2 сек., 25 Кб)<br>
<a href="sound/baby.mid">baby.mid</a> (1 мин. 3 сек., 5 Кб)

Следует учесть, что обработка такой ссылки существенно зависит от браузера.

При подключении ссылок на звуковые файлы (как и на любое другое объемное содержимое) следует проинформировать пользователя о формате и размере загружаемого файла, как и сделано в примере.

Не следует использовать нестандартный тег <bgsound>. Появившийся в стандарте HTML 5 тег <audio> в настоящее время также поддерживается браузерами ограниченно. Например, заявлется, что HTML 5 начал полноценно поддерживать Internet Explorer 9.

гостевая; E-mail