Четверг , 12 Декабрь 2024
ДомойПубликациивставка видео на страницу: используем javascript и flash

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

вставка видео на страницу: используем 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)

Рейтинг: 0

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

2 070
не в сети 4 месяца

x64 (aka andi)

Комментарии: 2893Публикации: 405Регистрация: 02-04-2009
Так себеНеплохоХорошоЗамечательноСупер! (1 голосов, в среднем: 3,00 из 5)
Загрузка...

7 комментариев

  1. а как добавить кнопку «стоп»?

    Рейтинг: 0
  2. Александр Борисов

    Привет. Не подскажите как вставить видео так, чтобы у человека не было возможности прокручивать его. СПасибо!

    Рейтинг: 0
  3. для этого нужно подключить плагин flowplayer.controls

    как это сделать? дополнил код выше.

    кнопка Стоп по умолчания не активна, поэтому её нужно подключать вручную.

    прокрутка убирается установкой параметру scrubber значения false.

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

    plugins: { controls: null }

    Рейтинг: 0
  4. Не получается вставлять несколько роликов в список playlist через запятую. Если можно подробнее.

    Рейтинг: 0
  5. У меня при переходе на страницу примера выдает ошибку flash

    Рейтинг: 0
    • Здравствуйте.
      Пример очень старый, браузеры сейчас активно отказываются от флеша, если только IE нормально работает.
      У меня последний раз флеш на Firefox был до того, как установил 64-битную версию.
      Хром спрашивается, нужно ли запускать флеш содержимое. Если подтвердить, сообщения об ошибке исчезнут.
      Ютуб тоже от Адобовской поделки отказывается. Но это и правильно, есть способ лучше.
      Используйте контейнер video, в который можно вложить несколько source для разного содержимого. Но это, пожалуй, лишнее. Кодек H264 понимают, видимо, все. В Файрфоксе у меня файл воспроизводится прямо во вкладке.

      Рейтинг: 0

Оставить комментарий

Политика конфиденциальности

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

Принять