Видео Flash плеер с поддержкой плейлистов для сайта

Сегодняшняя статья не имеет отношения к макам. Я решила написать о том, как вставить Flash плеер себе на сайт. А также расскажу как сделать так, чтобы он поддерживал плейлисты.

Итак, передо мной была такая задача:

Вставить на сайт Flash плеер, который бы поддерживал плейлист из видео с YouTub'a. Кое-что из этого получилось,  кое-что нет. Но обо всем по порядку...

1. В качестве плеера был выбран бесплатный JW Player. Его нужно скачать, распаковать и  загрузить на FTP своего сайта (в моем эксперименте использовался сайт с хостингом на ucoz).

2. На место, где должен будет находился новый флэш-плеер, нужно вставить данный код:

---

<script type="text/javascript" src="swfobject.js"></script>
        <p class="media2" id="preview" style="text-align: center;">You need Flash Player 9 and a browser 
with javascript!</p>
        <script type='text/javascript'>
            var so = new SWFObject('player.swf','player','420','420','2','#');
            so.addParam('allowfullscreen','true'); so.addParam('allowscriptaccess','always');
            so.addParam('wmode','opaque');
            so.addParam('flashvars','file=video.flv');
        so.write('preview');
</script>

---

Что нужно заменить:

- swfobject.js на полный URL файла swfobject.js (http://... и так далее)

- player.swf на полный URL файла player.swf

- video.flv на полный URL видео файла или YouTube (URL можно получить нажав на кнопку "Отправить видео")

- параметр allowfullscreen означает "полноэкранный режим", если нужно разрешить проигрывание видео в полноэкранном режиме — оставляем true, если нужно запретить — меняем на false.

- '420','420' — размеры плеера, можно менять по желанию.

3. Если требуется, чтобы плеер проигрывал плейлист, его нужно сначала создать. У меня не  ышло сделать плаейлист из YouTube–видео, т.к. не возможно узнать точный URL FLV файла на сервере YouTube, поэтому пришлось скачать необходимые видео (с разрешения автора) и загрузить к себе (вмоем случае в публичную папку DropBox).

4. Теперь конкретно о создании плейлиста, потому что это та часть всего процесса, которая заняла больше всего времени. Я решила делать XSPF плейлист, потому что он мне уже знаком. Однако вместо написания вручную, я решила воспользоваться функцией VLC плеера сохранять плейлисты в XML файл:

- Запускаем VLC => Файл => Открыть сеть => вставить URL видео файла. Таким способом добавить все желаемые видео.

- Далее: Файл => Сохранить плейлист => Формат файла: Формат XSPF (XML Sherable Playlist Format) =>

- Сохранить.

- Открыть получившийся файл через любой текстовый редактор и, собственно, отредактировать — добавить тэги , и

убрать ненужные (длительность)

---

<?xml version="1.0" encoding="UTF-8"?>
<playlist version="1" xmlns="http://xspf.org/ns/0/" xmlns:vlc="http://www.videolan.org/vlc/playlist/ns/0/">
    <title>Плейлист</title>
    <location>file:///Users/guineapig/Desktop/playlist.xspf</location>
    <trackList>
        <track>
            <location>[URL первого трека]</location>
            <title>[название первого трека]</title>
            <duration></duration>
            <extension application="http://www.videolan.org/vlc/playlist/0">
                <vlc:id>0</vlc:id>
            </extension>
         </track>
     </trackList>
     <extension application="http://www.videolan.org/vlc/playlist/0">
                <vlc:item tid="0" />
     </extension>
</playlist>

---

- Сохранить, не меняя формата (.xml). Плейлист готов. Можно закинуть его на сервер своего сайта.

5. Код плеера с плейлистом сходен с кодом плеера без плейлиста, только вместо пути к одному видео файлу

указывается URL плейлиста:

---

so.addParam('flashvars','file=playlist.xspf&playlist=bottom&playlistsize=360');

---

– bottom означает что плейлист находится под плеером;

– playlistsize — его длина.

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

Еще пару слов хочу написать, о том почему я вобще начала всю это затею с плеером. Ведь видео с YouTuba и так можно легко вставить себе на сайт. Дело в том что по неизвестной мне причине перестали работать все вставленные с YouTub'a видео, вместо видео был белый прямоугольник, при нажатии на него правой кнопкой было написано "ролик не загружен", причем в Windows во всех браузерах, а в Mac OS X только в Firefox'e. Safari и Google Chrome все показывали как надо. Очень неприятная ситуация, поэтому пришлось искать другой путь вставки видео. Хотя проблему с "белым прямоугольником" я тоже решила. Оказывается все просто: нужно было создть crossdomain.xml файл следующего содержания:

---

<?xml version="1.0"?> 
<cross-domain-policy> 
<allow-access-from domain="www.youtube" />
<allow-access-from domain="*.dropbox.com" /> 
</cross-domain-policy>

---

и загрузть его на ucoz в корневой каталог.

Что делает этот файл? Он просто разрешает сайту загружать Flash с указанных доменов.