вставка видео на страницу: используем javascript и flash

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

для одного проекта мне потребовалось изыскать возможность открутки видеороликов на сайте. делать плеер с нуля на флеше не представлялось возможным (для начала, у меня нет среды разработки и мне её не предоставили), поэтому требовалось, по сути, найти подходящего кандидата в лице флеш-плеера. ничего особо сложного и не требовалось, т. к. благодаря ютубу пользователи очень даже легко ориентируются в подобного рода плеерах ;)

на мой поиск «откликнулось» 2 кандидата, располагающихся на сайтах flv-mp3.com (проект от uppod`а) и flowplayer. произведя небольшое потыкивание каждого, от первого быстро отказался в пользу комбайна, предоставляющего настоящее api. как показало время, внутрее чутьё меня не подвело (хотя кое-кто и вытался втюхать flv-mp3.com).

как известно, первое впечатление бывает довольно обманчиво, и предпочтение порой отдаётся наименее насыщенному девайсу (особенно, если при этом используется родной язык). именно этот подход был востребован на flv-mp3: сервис предоставляет возможность «собрать» плеер с заданными характеристиками (в форме указывается проигрываемый файл, заставка, размеры и ещё некоторые параметры) и получить на выходе готовый код для вставки файла. да, вариант может показаться очень удобным, особенно для людей, считающих html сильным колдунством, не говоря про js и прочее.

только периодическое добавление роликов на сайт вряд ли поспособствует энтузиазму постоянно «конструировать» плеер под себя. как вариант, можно исследовать все настройки и автоматизировать посредством серверного языка. но данный принцип кроме как извратом не назовёшь (куда как проще грузить ролики сразу на ютуб и получать готовый код для скачивания).

вот мы и подошли к тому самому, что можно уже полноценно назвать колдунством. вы ведь хотите постичь джаваскриптовой магии? я покажу, что это совсем не трудно (даже проще, чем пользоваться конструктором ). а поможет в этом flowplayer. версию по душе можно выбрать отсюда, но для своего сайта вполне подойдёт самый первый вариант, распространяющийся под GPL3.

плеер поддерживает проигрывание следующего контента: flv, mp4, m4v (для изображений — jpg, gif, png). видео поддерживается ещё с версии 9, так что проблем с поддержкой быть не должно.

скачиваем архив с плеером и распаковываем. на сайт потребуется залить 3 файла: flowplayer.controls-NumVer.swf, flowplayer-NumVer.swf и example/flowplayer-NumVer.min.js, где NumVer — это просто № версии, и может быть, например, 3.2.7.

первый файл содержит панель управления, второй — непосредственно плеер и третий является связующим звеном, предоставляющим api. первые 2 файла (*.swf) должны находиться в одной папке. теперь пришло время для простейшего кода. он может быть таким:

<div id="player" style="width:640px;height:480px;"></div>
<script type="text/javascript" src="/src/player/flowplayer-3.2.6.min.js">
</script>
<script type="text/javascript">
    flowplayer('player', '/src/player/flowplayer-3.2.7.swf', {});
</script>

элемент div с идентификатором player является контейнером, в котором будет откручиваться видео. во второй строке идёт подключение JavaScript-файла. Непосредственно за вывод отвечает одна функция flowplayer(), которой передаются 3 параметра:

1. идентификатор элемента, в котором должен проигрываться ролик;
2. путь к плееру (именно к плееру, а не к элементам управления, которые подгрузятся автоматически);
3. некие дополнительные параметры.

кстати, помимо идентификатор можно передавать непосредственно ссылку на объект или селектор.

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

для простоты: третий парамерт (конфиг) — ассоциативный массив, в котором можно описать следующие элементы:

• clip — с помощью данного ключа можно «сделать» глобальные установки, например, должна ли автоматически запускаться буферизация (autoBuffering) или проигрывание (autoPlay), каким образом масштабировать содержимое (scaling со значением fit предписывает сохранить исходные пропорции, и для обычного видео будет использоваться, пожалуй, только оно). можно также указать проигрываемый файл (url), и даже подвесить события (функции, которые будут вызываться, например, при старте проигрывания ролика);
• playlist — обычный массив (список). каждый элемент может быть строкой (в этом случае строка — адрес проигрываемого клипа), либо ассоциативным массивом. во втором случае набор данных можно рассматривать как набор данных, аналогичных ключу clip из предыдущего пункта, т. е. можно указать использовать буферизацию, начало проигрывания и т. д.;
• plugins — служит для расширения стандартных возможностей. одной из фич является возможность прямо на месте русифицировать интерфейс.

теперь небольшой пример, включающий демонстрацию возможностей:

<div id="player" style="width:520px;height:330px;"></div>
<script type="text/javascript" src="/src/player/flowplayer-3.2.6.min.js">
</script>
<script type="text/javascript">
    flowplayer('player', '/src/player/flowplayer-3.2.7.swf', {
        clip: {
            autoPlay        : false,
            autoBuffering   : false,
            scaling         : 'fit'
        },
        playlist: [
            {
                url:'https://a-panov.ru/wp-content/uploads/2011/flowplayer.jpg',
                autoBuffering:true,
                autoPlay:true
            },
            'http://pseudo01.hddn.com/vod/demo.flowplayervod/flowplayer-700.flv'
        ],
        
        // для манипуляции с элементами управления
        plugins: {
            controls: {
                url: 'flowplayer.controls-3.2.16.swf',
                playlist: false, // убирает кнопки перемотки
                stop: true, // добавить кнопку стоп
                scrubber: true // значение false убирает прокрутку видео
            }
        }
    });
    </script>

представленный код устанавливает в качестве глобальных настроек следующие: отключение авто-запуска проигрывание, отключение авто-буферизации, масштабирование видео по размеру окна. в качестве проигрываемых файлов используется картинка и видео, причём, настройки для картинки переопределены (т. к. она должна загружаться автоматически). при клике на картинке (или кнопке play) включается показ видео-ролика. как видно, всё очень просто. если требуется добавить ещё один ролик, просто через запятую добавляем в список playlist новый элемент. если требуется автоматическое проигрывание плэй-листа, в ассоциативном массиве устанавливается clip значение autoPlay устанавливается в true.

документация, содержащая функции api, находится здесь. если кто-то не понимает английского — не беда, там всё достаточно понятно. а проанализировав код выше, вполне можно разобраться и с тем, что находится в доках. очень рекомендую заглянуть, наверняка найдётся «настройка», которая будет востребована.

пример можно посмотреть здесь. не забудьте заглянуть в исходный код (Ctrl+U)

Поддержка сайта

С удовольствием создаю годный контент. Буду очень признателен, если вы поддержите мои усилия:

днём интернета
шоколадкой для работы мозга
коробочкой ароматного чая для бодрости
продлением хостинга на +1 месяц

Автор публикации

2 070

не в сети 12 месяцев

x64 (aka andi)

Комментарии: 2893Публикации: 405Регистрация: 02-04-2009

(1 голосов, в среднем: 3,00 из 5)

Загрузка...