Ещё один простой блог в интернете, одного из жителей Сызрани, который считает себя дизайнером, WEB-мастером и фотографом-любителем

просто блог

QR CODE для записиQR CODE для записи “Основы установки FlowPlayer”

Основы установки FlowPlayer

Вступление

В этом примере описываются основы установки FlowPlayer на Ваш сайт. Для установки плеера желательно обладать минимальными знаниями HTML и CSS. Если же у Вас возникнут какие то вопросы, то вы можете оставлять их в комментариях.



И так, чтобы плеер заработал на Вашем сайте — Вам необходимо:

Если Вы хорошо знакомы с основами HTML, то Вы можете сразу перейти на страницу демонстрации и ознакомиться с исходным кодом страницы.

1. Подключение flowplayer.js на странице

В FlowPlayer используется свой собственный JavaScript файл — FlowPlayer-3.2.6.js. Этот файл должен быть подключен на странице следующей строчкой HTML кода.

<script src="путь/до/файла/flowplayer-3.2.6.min.js"></script>

Этот скрипт необходим не только для установки, но ещё он предоставляет много возможностей по управлению плеером — он предоставляет вам гибкие возможности управлять плеером с помощью своего JavaScript API, которые будут описаны в других статьях.

Дважды проверьте, что Вы указали путь до файла правильно. Это очень распространенная ошибка при установке плеера. Если Ваша страница выдает ошибку JavaScript, что-то вроде TypeError: flowplayer is undefined, то значит Вы не правильно указали путь до файла. Путь можно указывать как абсолютный (начинающийся с http://), так и относительный. В случае относительного пути — путь необходимо указывать относительно директории в которой находится Ваша страничка. Убедитесь в правильности пути введя адрес до файл в адресной строке Вашего браузера. Если он откроется, то значит всё верно.

Ни в коем случае не указывайте путь к файлу из демонстрации ни с нашего, ни с официального сайта, т.к. на нашем сайте или сайте разработчиков плеера может изменится структуру сайта. И в один «прекрасный» день у Вас перестанет работать плеер. Указывайте путь к файлам только со своего сервера.

2. Установка контейнера для плеера

Следующим шагом является размещение HTML-элемента (контейнера) на странице, который будет содержать плеер. Вы можете поместить этот контейнер в любом месте вашей страницы и этот контейнер может быть любым HTML-тегом, который будет удобен Вам. Наиболее часто используемые теги A и DIV. В нашей демонстрации мы используем тег A следующим образом:

<a
	href="http://download.g63.ru/flowplayer/flowplayer-700.flv"
	style="display:block;width:425px;height:300px;"
	id="player">
</a>

Важные элементы кода:

  • Путь до воспроизводимого файла указывается в атрибуте HREF.
  • Размеры плеера указываются в CSS стилях. Лучше эти параметры вынести во внешней файл таблицы стилей (CSS). Так же для тэга A необходимо указывать display: block, иначе плеер может отобразиться не полностью
  • Обязательно использовать ID-атрибут, чтобы мы могли установить проигрыватель внутри данного контейнера. Об этом в следующем шаге.

Большинство наших демо использовать тег A, т.к. при использовании данного тега, видео будет работать даже в браузерах, которые не поддерживают JavaScript или он отключен. Если атрибут HREF указывает на видео файл, то браузер выполнит стандартное поведение для данного тега. У большинства пользователей с отключенными JS видео файл воспроизведется стандартным плеером операционной системы. Такой дизайн страницы очень популярны в наши дни и имеют названия: «graceful degradation», «unobtrusive JavaScript» или «progressive enhancement».

3. Установка FlowPlayer

В последнем шаге мы установим плеер в ранее созданный контейнер. Это делается следующим простым вызовом JavaScript на HTML-странице.

<script language="JavaScript">
flowplayer("player", "путь/до/плеера/flowplayer-3.2.7.swf");
</script>

Важные элементы кода:

  • FlowPlayer является составляющей JavaScript функцией. Эта функция вызывается двумя аргументами: player и http://путь/до/плеера/flowplayer-3.2.7.swf
  • Первый аргумент player — это объявление скрипту в каком контейнере должен быть плеер. Это значение должно совпадать с ID-атрибутом, который мы назначили в контейнере ранее (А-тег).
  • Вторым аргументом является путь к флэш компоненту FlowPlayer, который фактическим и является видеоплеером. Пожалуйста убедитесь, что Вы указали путь правильно, так же как и с подключение flowplayer.js.
  • Функция вызова FlowPlayer’а должна быть размещена после контейнера для плеера. Также можно осуществить вызов после загрузки полной загрузки страницы и сценариев. Например, в JQuery это $(document).ready().Однако данный вызов можно осуществить и на другом JS-фрейворке.

Теперь Вы можете посмотреть рабочий пример на отдельной демонстрационной странице. Похожий пример находится в архиве с файлами плеера.

Рубрики: FlowPlayer | 181 комментарий
  1. BaNru # link

    Можно создать папку в корне сайта (я так сделал), а можно в папку с шаблоном. Главное пути до плеера указать правильно.

  2. Nastya # link

    А как сделать, чтобы при загрузки странице видео стояло на паузе???

  3. BaNru # link
    flowplayer("player", "путь/до/плеера/flowplayer-3.2.7.swf", {
        clip: {
            autoPlay: false, // запрещаем автостарт видео
            autoBuffering: true // но при этом разрешаем загрузку видео. Если поставить false, то загрузка автоматически тоже не начнется, пока не нажмут PLAY. ЗАПЯТУЮ СТАВИТЬ ТУТ НЕ НАДО!
        }
    });
  4. Nastya # link

    Большое спасибо!!! (прошу прощенья за неграмотность)

  5. Евгений # link

    Здравствуйте. Как отключить функции управления плеером? чтобы видео только воспроизводилось и при нажатии на него ставилось на паузу и все

  6. BaNru # link

    Для настройки панели управления есть функция controls, в которой можно отстраивать цвета и размеры.
    В данном случае можно сделать так

    flowplayer("player", "flowplayer-3.2.7.swf", {
    	plugins: {
    		controls: {
    			display: 'none'
    		}
    	}
    });

    Пример в действии

    Предыдущий вариант просто скрывает панель, однако можно убрать её полностью:

    flowplayer("player", "flowplayer-3.2.7.swf", {
    	plugins: {
    		controls: null
    	}
    });

    Пример в действии

  7. Светлана # link

    Подскажите, пожалуйста, как вставить несколько видео на одну html-страницу с помощью Flow Player? У меня почему-то проигрывается только одно видео, а остальные на странице не видны, хотя копирую такой же кусок кода, просто подставляю другой путь до других видео. Спасибо!

  8. BaNru # link

    Светлана, для этого необходимо вместо ID писать CLASS.

    <a 
    	href="http://download.g63.ru/flowplayer/flowplayer-700.flv"
    	style="display:block;width:425px;height:300px;" 
    	class="player">
    </a>

    А также в подключение скрипта указать это, для избежания конфликтов.

    <script>
    	flowplayer("a.player", "flowplayer-3.2.7.swf");
    </script>

    Вот пример.
    Но как видно, два видео воспроизводятся сразу, что не есть хорошо, поэтому следует воспользоваться Splash Image.
    Пример нескольких плееров со Splash Image

  9. Mult # link

    Подскажите пожалуйста как сделать чтобы при отсутствии флеша (мобильные телефоны) плеер работал на html5?

  10. BaNru # link

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

  11. Юрий # link

    Подскажите пожалуйста, а можно таким способом вывесить на сайт потоковое видео с ip-камеры?
    Если можно, направьте меня в нужном направлении где об этом почитать.
    Спасибо

  12. BaNru # link

    1) Смотря какой поток передает камера. Возможно и без мучений можно обойтись — с помощью stream плагинов, которые и могут принимать потоковое видео.
    2) Возможно стоит посмотреть в сторону VLC плеера, он умеет передавать несколько видов потоков, равно как и захватывать, в том числе и с камер. Или может другое что-то, что умеет передавать потоковое видео (гуглить на тему «stream видео сервер»). Конечно же — stream плагины необходимы будут.
    3) Ну и разумеется, для вещания в инет надо широкий канал и белый IP.

  13. Александр # link

    Здравствуйте.
    Подскажите, пожалуйста, как мне проигрывать мелодию при запуске сайта? Мелодию я закачал на сайт.

  14. BaNru # link

    Александр, выполняй все действия описанные в статье и будет счастье.
    Только это плохой тон сразу воспроизводить мелодию и многие этого «терпеть не могут».

  15. Ксения # link

    Здравствуйте! Подскажите пожалуйста, можно ли как-то избавиться от растягивания видео с меньшим разрешением по размеру контейнера? вот мой код…

    .flowplayer
      {
        display:block;
        width: 400px;
        height: 200px;
        margin-left: 0;
      }
    
    <source type="video/mp4" src=""/> 
  16. BaNru # link

    Здравствуйте, Ксения.

    Я так понимаю, Вы используете HTML5 версию плеера? Для HTML5 версии к сожалению я не смог найти таких возможностей.

    Если Вы используете FLASH версию плеера, то для этой версии есть параметр scaling: fit/half/orig/scale
    fit — во всё окно, сохраняя пропорции
    half — половина размера, сохраняя пропорции
    orig — оригинальный размер
    scale — во всё окно, без сохранения пропорций, используется по умолчанию

    <script>
    flowplayer("player", "flowplayer.swf", {
        clip: {
            scaling: 'orig'
        }
    });
    </script>
  17. Увгений # link

    Здравствуйте,а ютубовские ролики плеер воспроизводит?

  18. BaNru # link

    Добрый день!

    Флеш версия воспроизводит через соответствующий плагин (описание и инструкции)

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

  19. User # link

    Hi.
    После разрыва и восстановления соединения (можно сэмулировать отключив на время сетевой адаптер в момент загрузки длинного видео) плеер играет до конца забуферизированного фрагмента. Есть ли возможность указать ему восстанавливать соединение и продолжать докачивать буфер?
    Подскажите пожалуйста как решить проблему.

  20. BaNru # link

    Теоретически для этого необходимо поставить stream плагин (обычно Pseudostreaming) и он должен докачивать. Однако, сервер должен поддерживать так же stream видео. Если перемотка на небуферизированный кусок работает (с плагином разумеется), то сервер поддерживает потоковое видео, если нет, то тут уже ни чего не поможет — надо ставить модули на сам сервер.

  21. Юрий # link

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

  22. BaNru # link

    Юрий, или я чего-то не понял, или где-то у тебя ошибка.

    По умолчанию плеер после завершения проигрывания останавливается и появляется кнопка PlayAgain, скрол сам выставляется на начальную позицию и достаточно лишь нажать либо кнопку PLAY, или PlayAgain.

    Вот несколько примеров, везде работает.

    Если же у тебя всё же не получается добиться этого, то проверяй чего ты там понаписал. Или посмотри пример stop.html (среди примеров по ссылке выше) — сделал два вариант принудительного сброса.

  23. Юрий # link

    Наверное версия плейера лажовая попалась. Не отсюда. Попробую эту.

  24. Игорь # link

    Здравствуйте!
    Напишите пожалуйста, возможно ли как-то отловить событие окончания воспроизведения? Есть ли такой обработчик?

  25. Игорь # link

    Спасибо, уже нашел — onFinish

  26. Влад # link

    А как зациклить воспроизведение?

  27. Влад # link

    Увы, не работает зацикливание. Доходит до конца и останов, предлагает нажать — play again.

  28. Влад # link

    Извиняюсь — работает. (надо было выложить на хостинг)

  29. Антон # link

    Доброго времени суток!

    Может подскажешь такую вещь. Вставил плеер (флеш-версия), подсовываю локальный видеоролик по относительной ссылке (href=»vid/000.webm»), крутит колечком и ничего не показывает. По абсолютной ссылке (href=»http://site.com/vid/000.webm») все нормально проигрывает. А я понятия не имею заранее о том, какой будет абсолютный путь к ролику. Да и как-то не предполагалось такими путями пользоваться.

    Как бы поступить в этой ситуации?

  30. BaNru # link

    Вычислять путь на PHP 😀
    И чем плох абсолютный путь?

  31. Евгений # link

    Здравствуйте!
    Подскажите, пожалуйста, такую штуку. Есть ролик. Есть к нему изображение, которое должно быть при загрузке страницы, пока проигрывание не включено. Указываю путь к этому изображению. В результате изображение не масштабируется, а выводится целиком с обрезанными справа и снизу краями. Как сделать так, чтобы изображение влезало целиком и масштабировалось при полноэкранном режиме?

  32. BaNru # link

    Евгений, если всё сделано, как в статье «Установка splash image для FlowPlayer», то достаточно прописать CSS стили для картинки

    #player img {
        height: 100%;
        width: 100%;
    }

    Для пропорционального изменения размеров картинки, вместо 100% необходимо написать auto, например:

    #player img {
        height: auto;
        width: 100%;
    }
  33. Константин # link

    Доброго времени.
    Может быть подскажешь такую вещь — я формирую динамически яваскриптом несколько плееров подряд — все нормально выводиться. Но при нажатии на плай — крутит колечко и все. Пробовал менять пути, файл доступен — скачивается. В чем может быть проблема?

  34. BaNru # link

    Константин, с ходу не подскажу, надо смотреть код, может баг в JS который генерирует плееры.
    Пиши в скайп ban_rus во вторник, посмотрим. Раньше, к сожалению, некогда — праздники 🙂

  35. Денис # link

    А как управлять регулировкой уровня громкости? У меня по умолчанию при воспроизведение ползунок находится на 50% отметке, а нужно чтобы было на все 100%

  36. BaNru # link
    <script>
      flowplayer("player", "flowplayer.swf", {
          onLoad: function() { // Вызываем события по завершению загрузки плеера
              this.setVolume(100); // Выставляем необходимое значение звуку
          }
      });
    </script>

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

  37. Игорь # link

    Здравствуйте.
    Подскажите пожалуйста.
    Если у меня в папке несколько видео, возможно чтобы они выбирались случайным образом при каждой перезагрузке страницы? Или чтобы был плейлист?

  38. BaNru # link

    Игорь, и то и другое можно реализовать.

    Случайное видео проще всего сделать на стороне сервера на PHP

    <?php $rand_url = array("video1", "video2", "video_asd", "video_qwerty", "video_0"); ?>
    <a
        href="http://download.g63.ru/flowplayer/<?php echo $rand_url[array_rand($rand_url, 1)]; ?>.flv"
        style="display:block;width:425px;height:300px;"
        id="player">
    </a>

    Конечно подобное можно реализовать и на JS, но это будет не красиво и сложнее.

    О плейлисте для FlowPlayer хорошо написано на оф. странице плеера: «A customizable HTML playlist for your videos»

    Если что не понятно там написано, спрашивай.

  39. Игорь # link

    Чет у меня не совсем получается
    http://www.atlasokon.com.ua/2almplast.html
    все работает, только при нажатии на плейлист кнопка сначала стрелкой идет на видео а потом опять прямоугольная становится. А должна оставаться стрелкой.
    И если смотреть второе и дальше видео, то экран не активный получается. Остановить и продолжить просмотр можно только в панели плеера.

  40. BaNru # link

    У тебя старая версия скрипта Playlist’а, в ней похоже баг.

    Скачай или подключи последнюю версию flowplayer.playlist-3.2.10

  41. Игорь # link

    Таки да из за старой версии.
    Спасибо с новой все ок работает.
    И еще вопросик ))
    А чтобы плейлист был в виде маленьких плееров, такое сложно сделать?

  42. BaNru # link

    Не понял, в смысле в виде маленьких плееров? Не проще тогда на странице разместить несколько плееров?

    Плейлисты оформляются с помощью CSS — делать можно как душе угодно.

    Плеер оформляется с помощью JS — тут возможностей с оформлением меньше.

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

  43. BaNru # link

    Ну не вижу проблем. Подобное легко реализуется через HTML и CSS. Если для тебя это сложно, то рекомендую почитать http://htmlbook.ru/ 🙂

  44. LLll # link

    Здравствуйте. Такая проблема, вывожу ролик в всплывающем окне с помощью highslide, однако когда закрываешь окно, плеер продолжает воспроизводить видео. Может быть подскажете как остановить его принудительно при закрытии окна?

  45. BaNru # link

    LLll, добрый день!

    1) Я бы рекомендовал ознакомиться со статьями Video overlays и Custom fullscreen action, может появится желание воспользоваться готовыми решениями.

    2) На элементе, который выполняет действие закрытия необходимо посадить событие для FlowPlayer. Для остановки это $f().stop(); (подробнее про Api FlowPlayer). Тут необходимо либо вылавливать все элементы, на которые срабатывает закрытие, либо внедрить в highslide это событие. С highslide не работал, подробнее не скажу.

  46. Павел # link

    А можно сделать ссылку рядом с плеером, при нажатии на которую запускалось бы видео, такую внешнюю кнопку play?

  47. BaNru # link

    Павел, ознакомься с материалом по Api FlowPlayer.

    <a onclick="$f(0).play();" title="Play">Play</a>

    Вместо $f(0) можно указать непосредственно контейнер плеера $f(‘#player’).

  48. Павел # link

    Только чтобы она была не в контейнере, а вне его.

  49. Alex # link

    Здравствуйте! Подскажите пожалуйста.
    У меня над видео есть меню, из которого выпадает, при наведении, подменю. Но оно почемуто залазит под видео… Как мне сделать, чтобы выпадающее подменю было поверх видео?

  50. BaNru # link

    Добрый день.
    Стоит попробовать для меню выставить z-index побольше, а для плеера z-index меньше и добавить position: relative;

  51. Alex # link

    z-index для flash не работает, если не стоит параметр wmode:»opaque», но у меня, почему-то, даже с ним не работает…
    вот мой код:

    <a href="video/video.mp4" rel="nofollow"></a>
    
    <script>flowplayer("player", "/flowplayer/flowplayer-3.2.2.swf", {wmode:"opaque", clip:{autoPlay: false, autoBuffering: true}});</script>
  52. Alex # link

    Вот так заработало:

    flowplayer("player", {src:"/flowplayer/flowplayer-3.2.7.swf", wmode:"opaque"}, {clip:{autoPlay: false, autoBuffering: true}});
  53. BaNru # link

    Про wmode: «opaque» я знал, но вот не знал что (как) его можно передать плееру. Спасибо, буду тоже знать!

  54. Михаил # link

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

    заранее спасибо

  55. BaNru # link

    Михаил, если я правильно понял, то тебе надо ознакомится со статьей Canvas — The larger picture

  56. Михаил # link

    нет я имел в виду сместить сам плеер на странице в другое место. Мне надо вставить влево от него описание. А он отображается справа. Что делать???

  57. BaNru # link

    Так это уже не к плееру относится, а к верстке в общем.
    Можно добавить правила CSS float: left/right

    <a href="http://download.g63.ru/flowplayer/flowplayer-700.flv"
        style="float:right;width:425px;height:300px;"
        id="player">
    </a>
  58. Михаил # link

    Спасибо огромное!!!!

  59. Меншиков Степан # link

    Спасибо, статья очень ценная!

    Только из-за своей неграмотности не могу понять, куда вставлять все эти три html кода, если я хочу вставить плеер на вордпресс!?

    Буду искренне благодарен за решение моей проблемы.

  60. Меншиков Степан # link

    Спасибо, рассмотрю вариант.

  61. Dimkas # link

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

  62. BaNru # link

    Вариант первый: конвертировать видео в FLV
    Вариант второй: подключить плагин MP4 Pseudo-streaming

  63. Dimkas # link

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

  64. Dimkas # link

    Удалось подключить плагин, но также приходится ждать полной загрузки видео(( Мой код

    flowplayer("player", "http://releases.flowplayer.org/swf/flowplayer-3.2.16.swf", {
        plugins: {
            pseudo: {
                url: "http://releases.flowplayer.org/swf/flowplayer.pseudostreaming-3.2.12.swf"
            }
        },
    
        clip: {
    
            provider: 'pseudo',
    
            autoPlay: false,
    
            autoBuffering: true,
    
            ratio: '3/4',
    
            url:  "путь к видео mp4",
        }
    
    });

    Может здесь есть еще какие то настройки?

  65. Dimkas # link

    Да, все как надо, вернее хотелось бы) Может еще подскажете что можно с сервером сделать или может бить он просто не предназначен для такого рода задач? Или может там надо какие модули подключить? Извините, если вопрос не по теме) А за помощь спасибо.

  66. BaNru # link

    Dimkas, если у тебя хостинг, то ни чего тут не поделаешь, кроме как писать в службу поддержки и просить поставить stream MP4 модули.
    Если у тебя свой сервер, то гуглить по запросам «apache stream video». Подробностей не знаю.

    Если не хочешь головной боли, то конвертируй всё видео в FLV. Это самое простое.
    Чуть сложнее — переходи на HTML5 версию плеера, но опять таки придется конвертировать видео.

    Для конвертации есть замечательная программа XMediaRecode, полностью бесплатная, не требует установки (portable) и с готовыми профилями под устройства. Я конвертировал в своё время профилем Youtube.

    Ещё вариант — поискать облака типа DropBox, которые поддерживают streaming. Может и DropBox поддерживает, я от туда пробовал MP3 тянуть, MP4 не пробовал.

    Если подумать, вариантов много. Выбирай.

  67. Dimkas # link

    Спасибо за исчерпывающий ответ) Ну что же, попробую написпть в службу поддержки хостинга, посмотрим, что они скажут. Ну а если что, всегда можна и конвертировать) Спасибо еще раз.

  68. Tatyana # link

    Подскажите, пож-та, как всё-таки вставить видеоролик по относительной ссылке href=»123.flv»

  69. BaNru # link

    Tatyana, также, как и при абсолютно ссылке

    <a
        href="/video/123.flv"
        style="display:block;width:425px;height:300px;"
        id="player">
    </a>

    Только надо указывать относительно текущей страницы, на которой этот код. И надо понимать, что это опасно — если страница переместится, то придется переписывать путь на новый.

  70. Tatyana # link

    Вот мой код:

    <a href="/video/123.flv" rel="nofollow"></a>
    flowplayer("player", "flowplayer/flowplayer-3.2.7.swf",
     { clip: { autoPlay: false, autoBuffering: true } });

    Просто крутится колёсико проигрывателя и ничего больше не происходит.
    Что у меня не так?

  71. Tatyana # link

    скопировала код из вашего примера, всё равно не загружается видео, приведите код свой пожалуйста если не сложно с учётом href="/video/123.flv" (не через http://…)

  72. Tatyana # link

    не получается, я вставляю код в html файл, лежащий на диске D и не работает, или работает только на спйте?

  73. BaNru # link

    Да, стоит работать непосредственно на сервере, ибо локально может мешать политика безопасности браузера или flash

  74. PetrovDS # link

    Встроил плеер последней версии. Вроде всё как положено. .min.js запихнул в , встроил в нужном месте тег <a> с нужными мне стилями. Ниже написал код для запуска плеера. Видео вставилось. Но есть такой баг: если я запускаю видео (оно всё хорошо проигрывается) после чего останавливаю его (тоже всё норм), но если я его попробую опять запустить, то ничего не происходит. Нужно отметить, что я встраиваю stream, мб это влияет.. Как исправить — не знаю. Помогите, пожалуйста. Заранее спасибо 🙂

  75. BaNru # link

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

    Мне кажется или тут активная XSS? XSS

    Не исключено, но по идее не должно быть. Блог создан на WordPress и обновлен до последней версии.

  76. PetrovDS # link

    Лол, что? Мне кажется или тут активная XSS? XSS

    Тест:

    P.S.
    Прошу прощение за оффтоп, но я не мог такое оставить без внимания.

  77. Cергей # link

    Приветствую.Установил на локальном сервере.Для простоты все файлы в одной директории.Пробовал flv,mp4.Сразу воспроизводится.Одно не получается:Меню внизу не видно.При малых размерах видео (250) появляется место внизу для меню,но нет элементов управления?

  78. BaNru # link

    Странно. Нет таких проблем. Меню и элементы появляются, но разумеется не все умещаются при очень маленьких размерах.
    1) Проверь, есть ли у тебя в папке с плеером «flowplayer.controls-3.2.*.swf». Если нету, то скачай и положи в папку. Раньше он, вроде, автоматом подцеплялся из папки с плеером
    2) Попробуй вот такие настройки сделать

    flowplayer("player", "flowplayer-3.2.7.swf", {
        plugins:{
              controls:{
                  url: 'http://releases.flowplayer.org/flowplayer.controls/flowplayer.controls-3.2.15.swf',
                  display: true, // Принуждаем отображаться саму панель
                  all: true, // Принуждаем отображаться все кнопки
                  play: true, // Индивидуально каждый элемент (кнопка PLAY)
                  scrubber: true // Индивидуально каждый элемент (SCRUBBER)
              }
          }
    });

    Список элементов

  79. жека # link

    Возник вопрос.А как убрать логотип в правом верхнем углу при просмотре?Мешает сильно.
    И ещё как сделать,чтобы показывалась картинка,пока не нажали пуск?Спасибо.

  80. жека # link

    А можно как-то сделать копку «стоп»?
    Благодарю за ответ.

  81. BaNru # link

    жека, чуть выше, перед твоим первым вопросом уже был ответ

    flowplayer("player", "flowplayer-3.2.7.swf", {
        plugins:{
              controls:{
                  url: 'http://releases.flowplayer.org/flowplayer.controls/flowplayer.controls-3.2.15.swf',
                  stop: true
              }
          }
    });
  82. жека # link

    У меня имеется такой скрипт:

        flowplayer('player', 'путь/flowplayer-3.2.7.swf', {
            clip: {
                autoPlay        : false,
                autoBuffering   : false,
                scaling         : 'fit'
            },
            playlist: [
                {
                    url:'http://путь/файл.jpg',
                    autoBuffering:true,
                    autoPlay:true
                },
                'http://путь/файл.flv'
            ]
        });

    как бы я не вставлял в него вашу строчку,всё-рвано не видать кнопки «стоп»,более того, самого плеера становится не видно.Подскажите пожалуйста куда правильно поставить эту строчку.Благодарю вас.

  83. BaNru # link

    Второй раз сталкиваюсь. До этого помогал — проблема в версии «flowplayer.controls». Только в прошлый раз вроде наоборот обновляли.
    В общем всё работает, как с подключением старой версии плагина, так и без подключения вовсе.

    Скачай к себе старую версию (3.2.5) и подключи или просто положи в папку с плеером, можно без подключения, а можно и без файла — у меня и без этого файла в общем-то работает :-).

    Рабочий пример с кнопкой «стоп».

  84. жека # link

    Спасибо вам.Но оказывается этот вариант не подходит,т.к. при нажатии на «стоп»,плеер показывает начальный кадр ролика,а нужно чтобы он показывал начальную картинку,приходится обновлять страницу,чтобы увидеть картинку.А может так и должно быть.

  85. BaNru # link

    Жека, то что тебе надо тоже можно реализовать.

    FlowPlayer очень гибкий, если знать JS.

  86. Наталья # link

    Добрый вечер!
    При открытии полноэкранного видео на квадратном мониторе изображение растягивается непропорционально. Возможно это исправить? Спасибо.

  87. Наталья # link

    Нсколько я поняла, это решение для контейнера с плеером. Мой вопрос касается полноэкранного режима. Поэкспериментировала с кодом — ничего не вышло…
    Вот код:

    {
    	clip: {baseUrl: 'mp3/' },
    		
    	canvas: {
    		backgroundColor:'transparent',
    		backgroundGradient: 'none'
    },
  88. Наталья # link

    Спасибо, решено

  89. Аркади # link

    Скажите пожалуйста, ролики из Youtuba и из других сайтов не откриваеть плеер?

  90. Tatyana # link

    Подскажите, пож-та, возможно ли использовать данный проигрыватель? Нужен просто html файл с проигрывателем и файл хранящийся в этой же директории и запуск этой html-страницы без доступа в интернет.

  91. BaNru # link

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

  92. ollegwolkow # link

    Добрый день,.. Вот такая проблемма. Хотел поставить одновременно несколько плееров на страничку, с использованием
    splash image, да вот незадача, на первом по порядку плеере картинка на отображается,(если ставлю два), если ставлю три, то
    на первых двух не отображается…подскажите пожалуйста если можете…Сайт написан на Codigniter.

    
     
     Заголовок
     
     <a href="http://www.new_cod_igniter/files/video/dizain.flv" rel="nofollow"> 
    </a>
    flowplayer("a.player","http://www.new_cod_igniter/files/video/flowplayer-3.2.16.swf",
      {clip:{autoPlay:false,autoBuffering:true}});
    
     <a href="http://www.new_cod_igniter/files/video/dizain.flv" rel="nofollow"> 
    </a>
    flowplayer("a.player","http://www.new_cod_igniter/files/video/flowplayer-3.2.16.swf",
      {clip:{autoPlay:false,autoBuffering:true}});
     
  93. BaNru # link

    ollegwolkow, я не совсем понял, вы делали как в примере?
    Скрипт вызова плеера вставляется только один раз после всех блоков с плеерами.

    Если есть возможность, поделитесь ссылкой на сайт (страничку) где Вы пробовали его ставить.

  94. ollegwolkow # link

    Большое спасибо за помощь,..посмотрел исходный код вашего
    примера и сообразил в чём ошибка. Теперь всё работает как надо.
    Прекрасный, толковый сайт. Честно говоря случайно зашёл и как оказалось не зря. Ещё раз спасибо, удачи.
    p.s. ссылку на сайт обязательно сброшу, как только закончу его делать, пока он у меня на локальном.

  95. BaNru # link

    Непосредственно по ссылке используется window.open
    Но есть более современный способ — использовать Overlay, lightbox или любой другой аналог.

  96. GrAnd # link

    Добрый день, очень все интересно, но для новичка справиться с динамическими плейлистами проблематично. Хотелось бы получить консультацию. Задача такая, есть 9 флеш роликов, на сайте три группы радио-кнопок, так вот в зависимости от выбора пользователя нужно составить плейлист из трех роликов и проиграть их без паузы, а потом остановить проигрывание.
    Пока даже не получилось вот так проиграть:

    flowplayer("player", "../flash/flowplayer-3.2.7.swf", {
    	clip: {
    		autoPlay: false,
    		autoBuffering: true
    	},
    	playlist: [
    		"1.swf", "2.swf"
    	]
    });

    но это конечно же из-за вот этого

    <a href="1.mp4"></a>

    но как убрать href=»1.mp4″ и подцепить playlist: [«1.swf», «2.swf»]
    не понимаю.
    У разработчиков читал, перечитывал… не помогает(

  97. BaNru # link
    <a style="display:block;width:425px;height:300px;" id="player">
        <img src="flow_eye.jpg" alt="Описание дружественное для поисковиков">
    </a>
    flowplayer("player", "flowplayer-3.2.7.swf", {
    	playlist: [
    		'1.flv',
    		'2.flv'
    	]
    });

    Демо с плейлистом

  98. GrAnd # link

    Вот демо работает, а у меня нет. Почему? Вот код странички

    Демонстрацмя splash image
    
    
    
    <!-- Скрипт плеера должен быть подключен с вашего сервера, а не с нашего сервера и не с сервера разработчиков!!! -->
    
    
    <!-- Этот код такой же, как и в статье "Основы установки FlowPlayer" -->
    <a>
    </a>
    
    <!-- В этом скрипте подключаем плеер к контейнеру выше (тегу A) -->
    
    	flowplayer("player", "flowplayer-3.2.7.swf", {
    		playlist: [
    			'kp_on_go_voice.flv',
    			'kp_on_go_voice.flv'
    		]
    	});
    

    Почти один в один с демонстрашкой, заставку убрал, т.к. мне нужно чтобы сразу проигрывалось. Но при запуске странички выводится черный бокс плеера с надписью в левом нижнем углу и… всё. Ни кнопки Play как в примере посередине, ни ролики не запускаются. Жмешь курсором он не реагирует. Все файлы в одной директории.
    В общем или лыжи не катят или я…
    Прошу помощи.

  99. BaNru # link

    1) Файлы необходимо хранить и проверять на стороне сервера/хостинга, а не локально.
    2) Попробуй скачать файлы заново, с моего сервера (раз или два). Есть ли у тебя файл «flowplayer.controls-3.2.5.swf» в директории по соседству с «flowplayer-3.2.7.swf»?

    Если это не поможет, то делись ссылкой. Разберемся на месте.

  100. GrAnd # link

    flowplayer.controls-3.2.5 и flowplayer-3.2.7 в одной директории. В этой же директории папка с файликом странички — index.html, видеоролики и flowplayer-3.2.6.min. Как только ставлю абсолютные ссылки на Ваши файлы — работает, но мне нужно запустить локально видеоролики, т.к. создается простенькая обучающая система на базе html. Самое неожиданное, что вчера с тега <a href= запускались, а сегодня обновил плеер с Вашей ссылки и нифига(. Тут уже поднималась тема про относительные ссыли, может поможете как победить это, а то в PHP и прочих радостях я пока вабсче ниже плинтуса.

  101. BaNru # link

    но мне нужно запустить локально видеоролики

    Локально работать не будет. Политика безопасности браузера и flash мешает этому.

    Возможно имеет смысл посмотреть в сторону Flowplayer HTML5, ну а ролики сконвертировать в mp4 (h264)

  102. сергей # link

    Добрый день. Есть возможность настройки плеера на разрешение перехода по (URL), т.е. в видео ролике ставлю кнопку заказа и есть по окончанию видео переход по ссылке. Как заставить плеер реагировать на ссылки?

  103. BaNru # link

    Выше я уже писал как что-либо сделать по завершению.
    На данное событие вешаем location.replace

    flowplayer("player", "flowplayer-3.2.7.swf",{
            clip: {
                onFinish: function () {
                    location.replace("http://blog.g63.ru/");
                }
            }
        });
  104. сергей # link

    Спасибо, работает, но надо что бы открывало в новом окне. В html знаю как, а здесь нет.

    И еще очень важно, возможно, что бы кнопка срабатывала на переход по ссылке. В камтазии есть такая функция создать кнопку в самом видео. Можно сделать кнопку заказа.

  105. сергей # link
        function showIt() {
          document.getElementById("hid").style.visibility = "visible";
        }
        setTimeout("showIt()", 7000); // 1000 = 1 sec

    Извините, что не по теме, но я не знаю куда обратиться.
    Есть скрипт, который открывает по установленному времени.
    Как сделать, что бы он открывал несколько и каждый по отдельности в установленное время?

  106. BaNru # link

    в установленное время

    для этого необходимо вызывать столько раз, сколько надо

    setTimeout("showIt()", 7000);
    setTimeout("showIt()", 11000);
    setTimeout("showIt()", 14000);

    открывал несколько и каждый по отдельности

    Необходимо немного переделать функцию, а именно сделать передачу в нее аргумента

    function showIt(id) {
      document.getElementById(id).style.visibility = "visible";
    }

    Теперь можно вызывать её и указывать какой элемент (по его ID) вызывать

    setTimeout("showIt("hid")", 7000);
    setTimeout("showIt("hid2")", 11000);
    setTimeout("showIt("hid3")", 14000);

    У каждого элемента должен быть свой ID.

    Согласно HTML спецификации этот ID (уникальный идентификатор) должен быть один на страницу

  107. сергей # link

    Извините, не знал, что обрежет. Обрезало (див) и код скрипта

  108. сергей # link
    <html><head>
    <script>
    function showIt(id) {
      document.getElementById(id).style.visibility = "visible";
    }
    setTimeout("showIt("hid")", 4000);
    setTimeout("showIt("hid2")", 8000);
    setTimeout("showIt("hid3")", 14000);
    </script>
    </head>
    <body>
    <div id="hid" style="visibility: hidden;" align="center">111</div>
    <div id="hid2" style="visibility: hidden;" align="center">222</div>
    <div id="hid3" style="visibility: hidden;" align="center">333</div>
    </body></html>

    То, что надо, но не работает. Посылаю полностью код. Удалил тэги, может не обрежит html код.
    Старый код работает.

  109. BaNru # link
    setTimeout(function(){showIt('hid2')}, 3000);
  110. Вячеслав # link

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

  111. Вячеслав # link

    Спасибо Вам за ответ и помощь безвозмездную. Всегда ценю это и вспоминаю всегда хорошими словами, да помогут Вам добрые искренние мысли хоть немного в Ваших новых удачах.
    Всё работает как Вы посоветовали!
    Спасибо!
    С наилучшими пожеланиями, Вячеслав

  112. Вячеслав # link

    Здравствуйте!
    Экспериментирую с плеером. Всё вроде бы ясно более менее, но вот непропорционально растягивается видео и всё тут((
    Ставлю такой код, как Вы и писали выше :

    clip: {
            scaling: orig
        }

    Но его сайт не видит и просто предлагает скачать видео.
    Как быть ума не приложу.

  113. BaNru # link

    Проверь внимательно запятые, скорее всего где-то забыл поставить при добавление.

  114. Вячеслав # link

    Точно!
    Разобрался!
    Спасибо!!!

  115. Вячеслав # link

    А может быть Вы подскажите вот что.
    Когда я выставляю orig или fit действительно видео сохраняет пропорции. Но на в полноэкранном режиме видео на весь экран плеера не растягивается, и это понятно если размер видео задан оригинальный, то он не сможет растянуться вплотную по всему экрана плеера сохранив свои пропорции.
    Вот и получилось, что на весь экран не растягивается, но сохраняет размеры.
    А есть ли способ как-то изменить размеры самого полного экрана плеера, чтобы подогнать его под размеры видео?
    Я не имею ввиду само окошко размеры которого задаются вот так :
    style=»display:block;width:300px;height:200px;»
    Это понятно, что его можно задать любым. А я имею ввиду, что при раскрытие на весь экран подогнать размеры под само видео. Или это невозможно?
    Спасибо! Надеюсь понятно объяснил..

  116. BaNru # link

    Сам термин «полный экран» или «FullScreen» говорят сами за себя.
    Можно посмотреть в сторону Dynamic resizing и Custom fullscreen action. Но это уже будет не FullScreen.

  117. Сергей # link

    Всем привет. У меня такая проблема, вставил вот такой код, видео не запускается в IE 8.0.7

    <a href="video/mug.mp4" rel="nofollow"></a> 
    flowplayer("player", {src:"/flowplayer/flowplayer-3.2.7.swf", wmode:"opaque"}, {clip:{autoPlay: false, autoBuffering: true}}); 

    Что делать, как запустить это видео?

  118. BaNru # link

    Какую ошибку выдает? (Ошибку искать в «средства разработчика»)

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

  119. Сергей # link

    «BaNru»-спасибо большое! Поставил полный путь к видео и плееру. Вот так:

    <a href="http://название сайта.ru/video/mug.mp4" rel="nofollow"> 
    </a> 
    flowplayer("player", {src:"http://название сайта.ru/flowplayer/flowplayer-3.2.7.swf", wmode:"opaque"}, {clip:{autoPlay: false, autoBuffering: true}});

    Спасибо большое.

    Для админов:
    Спасибо за сайт! НО есть один минус.
    Было бы хорошо если на почту приходило письмо, что появился новый комент в статье где я оставлял свой комент. Я написал и подзабыл сидел сам разбирался. Пришло бы письмо. Я бы сразу зашел к вам на сайт. Таким способом можно хорошо поддерживать активность на сайте.

  120. BaNru # link

    Хм, а я думал есть уведомления. Спасибо за инфу, разберусь.

  121. Илья # link

    Здравствуйте!
    Я транслирую видео на главную страницу сайта nevnov.ru с наших партнеров (впитер.ком). Так вот у меня выводится надпись flowplayer в окне плеера, а у них нет.
    Дело в лицензии плеера?
    Убрать эту надпись скриптами нет возможности?

    Заранее спасибо за ответ!

  122. BaNru # link

    Скриптами убрать лого нет возможности.
    Можно купить лицензию или погуглить генератор ключей для Flowplayer5 или Flowplayer3.1.*

  123. SERGEY # link

    Добрый день!
    Спасибо за познавательную статью!
    Я сейчас работаю над RTSP стримингом IP камер и пытаюсь вразуметь, подойдёт ли для этих целей FlowPlayer?
    Видеопоток кодируется в mjpeg.
    Спасибо!

  124. BaNru # link

    Добрый!

    Я впервые вижу такой формат, поэтому не могу подсказать
    Стоит попробовать плагины стриминга.

    В интернете говорят, что предварительно надо перекодировать через VLC.

  125. Евгений # link

    Здравствуйте!
    Я убрал контрольную панель, но еще необходимо запретить возможность останавливать видео. Необходимо, чтобы видео проигрывалось от начала до конца, не смотря на кликание по видео. Как это реализовать?

  126. BaNru # link

    Во FlowPlayer такое не предусмотрено, ибо не комильфо это.

    Можно обойти это ограничение добавив в clip событие onPause с функцией, которая будет снимать с паузы видео

    clip: {
    	onPause: function () {
    		this.resume();
    	}
    }

    Но появляется глюк в виде неисчезающей кнопки play. От неё можно избавиться таким образом (на том же уровне что и clip, т.е. до или после):

    play: {
    	display: null
    }

    Update 9 мая 2014

    Оказывается есть способ запрета остановки/паузы видео.
    Ниже в одном из ответов на вопрос я подсказывал как отключить FullScreen режим в FlowPlayer. Точно так же можно отключить и паузу

    onBeforePause: function() {
        return false;
    }

  127. Евгений # link

    От первой функции видео перестало выводиться на странице.

  128. Евгений # link

    А про запятые, то я и забыл. Спасибо тебе, BaNru! Всю голову себе сломал:-) Если водишь, заходи ко мне autoass.ru, задавай вопросы, может чем помогу.

  129. Александр Борисов # link

    Привет. Что-то не получается убрать панель воспроизведения. Как это сделать? Чтобы только плей и стоп было, а прокручивать нельзя. Спасибо!

  130. BaNru # link

    Александр, я не понял, тебе надо убрать панель или только кнопки?

    Как убрать панель я писал и приводил примеры выше

    Отключить кнопки и прочие элементы управления на controlbar’е можно так:

    plugins:{
    	controls:{
    		stop: true,
    		mute: false,
    		scrubber:false,
    		time: false,
    		volume: false,
    		fullscreen: false,
    	}
    }

    Однако у FlowPlayer’а есть горячие клавиши и события. Например по двойному щелчку плеер переходит в FullScreen. Чтобы запретить переход в FullScreen необходимо добавить следующий код (на уровне clip):

    onBeforeFullscreen: function() {
    	return false;
    }

    Точно также отключается перемотка, только через событие onBeforeSeek

    onBeforeSeek: function() {
    	return false;
    }

    Демо

  131. Евгений # link

    Здравствуйте. Хорошая работа. Спасибо.
    Вопрос по меню,если можно.Не разобраться с синтаксисом.Меню прилепил работает.Не понимаю как сформировать картинки и как вынести menuItem в отдельный файл.
    Пробовал в menu{ itemsUrl()},а в menu.txt

    { "items": [
        { label: '<b>first clip</b><i>3:30</i>',
            imageUrl: 'vidio/01.png', index: 0 }]}

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

  132. BaNru # link

    Евгений, по картинкам не понял в чем возникает проблема. Попробуй указывать абсолютные пути (см. демо).
    Что касается выноса в файл, то тут много похожих вариантов решения, главное понять как работает json и js объекты, ибо всё тут построенно на них. Я так понял тебе надо вынести сам список из меню?
    1) необходимо файл сделать не txt, а js — это упростит задачу. И подключить его

    <script type="text/javascript" src="menu.js"></script>

    2) в него вынести наше меню как есть, только присвоить переменную (см. пример файла)
    3) Теперь просто подключаем эту переменную items: myMenu
    Смотри демо. За основу демки взята оф. документация.

    Точно таким образом можно вынести любой пункт настроек плеера.

  133. Евгений # link

    С items: myMenu понятно, спасибо,к сожалению с playlist такое что то не выходит. Ну да ладно. Всё равно везде динамика. Но так и не ясно как получить превью с ролика, чтобы вставить в меню или плейлист.Также хотелось бы дополнить пост о scaling: fit/half/orig/scale( далее ещё были вопросы об этом, что не работает).У меня тоже не работало. Оказывается надо в кавычки эти fit/half/orig/scale заключать. Возможно это банально, но для неопытных лишняя канитель.

  134. BaNru # link

    С плейлистом точно также. Помещай в тот же файл

    var mypls = ['1.flv','1.flv','3.flv'];

    и потом назначай

    playlist: mypls,

    Привью ролика получить так просто не получится. Есть варианты:

    1. На PHP или другом server-side языке, самое просто если знаешь их. И даже если не знаешь — рекомендую в эту сторону копать — в гугле «php получить кадр из видео».
    2. Для mp4 формата можно попробовать на JS, но тут тогда лучше поставить FlowPlayer 5. Но как я не знаю, пока не доводилось в этой теме разбираться.
    3. На ActionScript/Flash — если их знать, то можно написать небольшой плагин. В принципе он будет очень похож в реализации на второй пункт.

    Про scaling и кавычки — спасибо за замечание. Это не оказывается, а должно быть. Моя ошибка, извиняюсь. Исправил комментарий.

  135. Евгений # link

    Всё понятно,спасибо, буду смотреть в сторону php.

  136. Руслан # link

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

  137. user # link

    Евгений, ваша ссылка на сайт ureech не работает, просьба выложить инструкцию по созданию превью тут!

  138. Виктор # link

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

  139. BaNru # link

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

    Однако, у Вас есть несколько вариантов решения проблемы:
    1) Для разработки сайта лучше всего использовать Denwer или OpenServer, благодаря им Вы сможете развернуть на своём компьютере свой мини сервер. Эти сборки серверов работают без установки. Особенно полезно будет, если вы начнете использовать серверные языки, например PHP.
    2) Воспользоваться бесплатным хостингом. Их достаточно много. Про трёх из таких хостингов я писал в одной из статей
    3) Перейти на HTML5 версию плеера, там данная проблема должна быть решена.
    4) Совместить 1 или 2 с 3 пунктом.

  140. Михаил # link

    Добрый день!

    Ув. знатоки, я в танке, отсюда наверное такой вопрос.

    Подготовил темку на такой-то форум. Нужно встроить 3 видео с ютюб. В предпросмотре 2 видео «материализуются» нормально.
    А вот вместо 3-го видео вижу строчную URL.
    Не берёт движок сайта более 2-х встроенных youtub-роликов, и всё тут.

    Могу ли я встроить на тот общественный форум, FlowPlayer с видео, рядом с двумя встр. роликами ютуб?

  141. BaNru # link

    А чем не устраивает стандартный код вставки с Ютуб?

    Если это «общественный форум», то следовательно доступа к коду у вас нет и вы не сможете встроить. Используйте стандартную вставку, чаще всего это [video]ссылка_на_видео_ютуб[/video]

    Если под этим термином понимается PHPBB или любой другой форум (CMS) и доступ к коду у вас есть, то можно встроить и три, и больше.
    Для распространенных форумов можно найти и готовый плагин.

  142. Михаил # link

    BaNru, спасибо!
    «чем не устраивает стандартный код вставки с Ютуб?»
    Устраивает же, просто тот форум, в одном сообщении, три видео какбэ не осиливает.
    Получаются 2 нормально встроенных ютуб-ролика, а под ними, вижу просто строчную URL h**ps://www.youtube.com/watch?v=0IqOx5_HZQw

    «PHPBB или любой другой форум (CMS)»
    сорри 🙂 скорее не разберусь.

    «Для распространенных форумов можно найти и готовый плагин.»
    BaNru, подскажите пожалуйста плагин, чтоб я не зависел от ютюб.
    А ещё не хотел бы видеть что видео исчезло с того форума через полгодика.
    Кстати, могу дать «ник и пароль» на тот форум, а Вам будет легче мне помочь.
    Вы как профи тут же разпознаете тип движка.

    BaNru, прошу прощения за мой оффтоп в красивом блоге.

  143. BaNru # link

    просто тот форум

    Так я не понял. Тот форум ваш или нет? Есть у вас доступ к коду или нет?
    Если нет, то ничего вы не сможете сделать. Это значит так настроил админ форума, обращайтесь к админу с просьбой снять это ограничение или, если это ошибка, то исправить её.

  144. Михаил # link

    «Тот форум ваш или нет?»
    нет конечно.

    «Для распространенных форумов можно найти и готовый плагин.»
    можно?

  145. BaNru # link

    Надо читать абзац целиком:

    Если под этим термином понимается PHPBB или любой другой форум (CMS) и доступ к коду у вас есть, то можно встроить и три, и больше.
    Для распространенных форумов можно найти и готовый плагин.

    Здесь любые советы из вне бессильны. Разве что узнать какие видеосервисы поддерживает форум и попробовать залить видео на эти другие сервисы или пишите два сообщения на форуме.

    За подробностями вам стоит обратиться к администрации форума, наверняка там есть раздел поддержки форума или в личные сообщения администрации.

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

  146. Вадим # link

    Друзья,
    ничего не понимаю.
    Взял тупо Вашу Тестовую страничку, два файла плеера. Всё залил на хостинг. Открывается лишь черная рамка плеера.
    А Ваша тестовая страничка открывается и всё отлично играет.
    Ничего не понимаю. Файлы плеера в корне вместе с Index.
    Помогите, пожалуйста!

  147. BaNru # link

    Извиняюсь, что не ответил ранее, уведомления почему-то не приходили.

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

  148. BaNru # link

    Посмотрел у вас на сайте.
    Некрасивый домен 🙂

    Проблема в том, что вы не загрузили все файлы. В архиве лежит ещё файл flowplayer.controls-3.2.5.swf, он должен быть в той же папке, что и flowplayer-3.2.7.swf.

    Спасибо за найденную ошибка. Статья исправлена и вы поправьте и всё у вас заработает.

  149. Артур # link

    Здравствуйте. Пожалуйста помогите мне с настройкой flowplayer. Уже неделю мучаюсь. Напишите мне на вк [ссылка на профиль удалена] Я заплачу за помощь хорошие деньги.

  150. BaNru # link

    Ответил на почту.

  151. Rafaraf # link

    Добрый день! нашел Вас на сайте нуллед, можно договориться ?
    работаю в комп.клубе администратором, мне надо сделать ролики для игр, чтобы клиент мог просмотреть, лого, конечно, особо не мешает, но вдруг ? 🙂
    П.С. учился по вашему блогу! Спасибо!

  152. BaNru # link

    Комп.клубы ещё существуют?!

    Ролики не делаю. Если есть какие-то вопросы по установке и настройке плеера — спрашивайте.

  153. BaNru # link

    Комп.клубы ещё существуют?!

    Ролики не делаю. Если есть какие-то вопросы по установке и настройке плеера — спрашивайте.

  154. Роман # link

    Насколько сложно создать интерактивное видео (всплывающие двойные субтитры и т.п.) как на show-english.com у них там flowplayer?

  155. BaNru # link

    Роман, извините, не видел сообщения вашего.
    1) Сделать можно практически всё. Сложность средняя.
    2) Если что-то где-то сделано, всегда можно позаимствовать.
    Но, я думаю, за 2 месяца вы уже решили эту проблему.

  156. Максим # link

    Здравствуйте
    При работе в HTML5 режиме на смартфоне, проявляются 2 глюка, которые вероятно как-то связаны друг с другом:

    1. В мобильном браузере Opera (и только в нём) во время воспроизведения на экране постоянно отображается кружок с треугольником (знак плей). Т.е. получается так, что он сперва есть, нажимаю на него, он исчезает, бегут точки, пока загружается видео, потом появляется изображение и снова этот значек, которые не исчезает.

    2.В мобильном Хроме иногда так бывает, что после загрузки видео окно в виде просто белого экрана и в фоне идет звук. Т.е. видео загружается и воспроизводится, но вместо него просто белый фон. Если в момент загрузки быстро нажать на «полный экран» то изображение будет воспроизводиться без проблем.

    В каком направлении искать причину этих странных глюков?

  157. BaNru # link

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

  158. Andrey_Ak # link

    Добрый день!

    Подскажите пожалуйста, как сделать одновременно
    следующее:
    — Авто воспроизведение видео (хотя оно само срабатывает)
    — Авто повторение видео после окончания
    — Принудительно установить нужный уровень громкости
    — Скрыть панель инструментов

    По отдельности все это работает, а вместе эти опции никак не получается
    заставить работать..

    Заранее спасибо!

  159. BaNru # link

    Andrey_Ak, укажите версию вашего плеера.

  160. Dr.Ai # link

    Тот же вопрос, что и у Andrey_Ak.. Версия 3.2.2

  161. BaNru # link

    К сожалению проверить не могу, потому что снёс флеш уже давно.
    И вам советую переходить на новые версии FlowPlayer.

    — Авто воспроизведение видео (хотя оно само срабатывает)

    flowplayer("player", "путь/до/плеера/flowplayer-3.2.7.swf", {
      clip: {
        autoPlay: true, // false - отключает автовоспроизведение
      }
    });

    — Авто повторение видео после окончания
    Попробовать вот так:

    flowplayer("player", "путь/до/плеера/flowplayer-3.2.7.swf", {
      clip: {
        loop:true
      }
    });

    Если не получится, то вот так попробовать

    flowplayer("player", "путь/до/плеера/flowplayer-3.2.7.swf", {
      onBeforeFinish: function() { // вешаем события которые будут после завершения видео
        this.play()
      }
    });

    — Принудительно установить нужный уровень громкости

    flowplayer("player", "путь/до/плеера/flowplayer-3.2.7.swf", {
      onLoad: function() { // функции которые срабатывают после загрузки плеера
        this.setVolume(30); // устанавливаем уровень громкости
      }
    });

    — Скрыть панель инструментов

    flowplayer("player", "путь/до/плеера/flowplayer-3.2.7.swf", {
      clip:  {
        control:false, // можно попробовать null
      }
    });

    или

    flowplayer("player", "путь/до/плеера/flowplayer-3.2.7.swf", {
      onLoad: function() {
        this.getControls().hide(); 
      }
    });

    Примерный код на всё сразу

    flowplayer("player", "путь/до/плеера/flowplayer-3.2.7.swf", {
      clip: {
        autoPlay: true, // false - отключает автовоспроизведение
        control:false
      },
      onLoad: function() {
        this.setVolume(30);
      },
      onBeforeFinish: function() { // вешаем события которые будут после завершения видео
        this.play()
      }
    });

    Если что-то не заработало или сам плеер упал, то вероятнее всего где-то забыли запятую поставить.

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

  162. Владимир # link

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

  163. BaNru # link

    Можно сделать на jQ

    $( document ).ready(function() {
      flowplayer(....)
    });

    https://learn.jquery.com/using-jquery-core/document-ready/

    Или на чистом JS

    document.addEventListener("DOMContentLoaded", function(){
      flowplayer(....)
    });

    https://learn.javascript.ru/onload-ondomcontentloaded

    Но это не ленивая и не отложенная загрузка. Это обычная загрузка. Для ленивой загрузки можно воспользоваться готовыми скриптами Lazy Load, и загружать типа

    LazyLoad(function(){ // где LazyLoad - это функция скрипта, у разных скриптов она может по разному называться
      flowplayer(....)
    })
  164. Анна # link

    Добрый день, подскажите пожалуйста в мобильной версии, плеер пропадает 🙁
    Как можно исправить?

  165. BaNru # link

    Анна, чтобы помочь — необходимо знать версию плеера и ссылку на страницу, где проблема.

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

В блоге включена ручная модерация комментариев. Нет смысла повторно отправлять комментарий.
Поля отмеченный звездочкой * обязательны к заполнению

Перед отправкой формы: