Основы установки FlowPlayer
Вступление
В этом примере описываются основы установки FlowPlayer на Ваш сайт. Для установки плеера желательно обладать минимальными знаниями HTML и CSS. Если же у Вас возникнут какие то вопросы, то вы можете оставлять их в комментариях.
И так, чтобы плеер заработал на Вашем сайте — Вам необходимо:
- cкачать архив с файлами FlowPayer’а;
- распаковать архив;
- залить на сервер три файла — flowplayer-3.2.6.min.js и flowplayer-3.2.7.swf, а также положить flowplayer.controls-3.2.5.swf в одну папку с flowplayer-3.2.7.swf;
- выполнить три простых действия, описанные ниже.
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-фрейворке.
Теперь Вы можете посмотреть рабочий пример на отдельной демонстрационной странице. Похожий пример находится в архиве с файлами плеера.
Куда заливать на хостинге ( в какую папку)2 файла плеера?
Можно создать папку в корне сайта (я так сделал), а можно в папку с шаблоном. Главное пути до плеера указать правильно.
А как сделать, чтобы при загрузки странице видео стояло на паузе???
Большое спасибо!!! (прошу прощенья за неграмотность)
Здравствуйте. Как отключить функции управления плеером? чтобы видео только воспроизводилось и при нажатии на него ставилось на паузу и все
Для настройки панели управления есть функция controls, в которой можно отстраивать цвета и размеры.
В данном случае можно сделать так
Пример в действии
Предыдущий вариант просто скрывает панель, однако можно убрать её полностью:
Пример в действии
Подскажите, пожалуйста, как вставить несколько видео на одну html-страницу с помощью Flow Player? У меня почему-то проигрывается только одно видео, а остальные на странице не видны, хотя копирую такой же кусок кода, просто подставляю другой путь до других видео. Спасибо!
Светлана, для этого необходимо вместо ID писать CLASS.
А также в подключение скрипта указать это, для избежания конфликтов.
Вот пример.
Но как видно, два видео воспроизводятся сразу, что не есть хорошо, поэтому следует воспользоваться Splash Image.
Пример нескольких плееров со Splash Image
Подскажите пожалуйста как сделать чтобы при отсутствии флеша (мобильные телефоны) плеер работал на html5?
Для этого стоит перейти на HTML5 версию. После некоторых танцев с бубном она должна работать как с HTML5 video, так и с flash
Подскажите пожалуйста, а можно таким способом вывесить на сайт потоковое видео с ip-камеры?
Если можно, направьте меня в нужном направлении где об этом почитать.
Спасибо
1) Смотря какой поток передает камера. Возможно и без мучений можно обойтись — с помощью stream плагинов, которые и могут принимать потоковое видео.
2) Возможно стоит посмотреть в сторону VLC плеера, он умеет передавать несколько видов потоков, равно как и захватывать, в том числе и с камер. Или может другое что-то, что умеет передавать потоковое видео (гуглить на тему «stream видео сервер»). Конечно же — stream плагины необходимы будут.
3) Ну и разумеется, для вещания в инет надо широкий канал и белый IP.
Здравствуйте.
Подскажите, пожалуйста, как мне проигрывать мелодию при запуске сайта? Мелодию я закачал на сайт.
И где и как это написать?
Александр, выполняй все действия описанные в статье и будет счастье.
Только это плохой тон сразу воспроизводить мелодию и многие этого «терпеть не могут».
Здравствуйте! Подскажите пожалуйста, можно ли как-то избавиться от растягивания видео с меньшим разрешением по размеру контейнера? вот мой код…
Здравствуйте, Ксения.
Я так понимаю, Вы используете HTML5 версию плеера? Для HTML5 версии к сожалению я не смог найти таких возможностей.
Если Вы используете FLASH версию плеера, то для этой версии есть параметр scaling: fit/half/orig/scale
fit — во всё окно, сохраняя пропорции
half — половина размера, сохраняя пропорции
orig — оригинальный размер
scale — во всё окно, без сохранения пропорций, используется по умолчанию
Здравствуйте,а ютубовские ролики плеер воспроизводит?
Добрый день!
Флеш версия воспроизводит через соответствующий плагин (описание и инструкции)
HTML5 версию я еще не изучал, пока не было надобности. Но судя по разговорам на форуме разработчика такой возможности нет, но вроде осталась обратная совместимость. Подробней по FlowPlayer HTML5 я помочь не могу.
Hi.
После разрыва и восстановления соединения (можно сэмулировать отключив на время сетевой адаптер в момент загрузки длинного видео) плеер играет до конца забуферизированного фрагмента. Есть ли возможность указать ему восстанавливать соединение и продолжать докачивать буфер?
Подскажите пожалуйста как решить проблему.
Теоретически для этого необходимо поставить stream плагин (обычно Pseudostreaming) и он должен докачивать. Однако, сервер должен поддерживать так же stream видео. Если перемотка на небуферизированный кусок работает (с плагином разумеется), то сервер поддерживает потоковое видео, если нет, то тут уже ни чего не поможет — надо ставить модули на сам сервер.
Подскажите пожалуйста, как после проигрывания ролика в FlowPlayer остановить его работу автоматически. А то у меня он остаётся в рабочем состоянии и нужно выключать вручную. А потом опять для запуска перемещать «бегунок» в начало или перезагружать страницу.
Юрий, или я чего-то не понял, или где-то у тебя ошибка.
По умолчанию плеер после завершения проигрывания останавливается и появляется кнопка PlayAgain, скрол сам выставляется на начальную позицию и достаточно лишь нажать либо кнопку PLAY, или PlayAgain.
Вот несколько примеров, везде работает.
Если же у тебя всё же не получается добиться этого, то проверяй чего ты там понаписал. Или посмотри пример stop.html (среди примеров по ссылке выше) — сделал два вариант принудительного сброса.
Наверное версия плейера лажовая попалась. Не отсюда. Попробую эту.
Здравствуйте!
Напишите пожалуйста, возможно ли как-то отловить событие окончания воспроизведения? Есть ли такой обработчик?
Спасибо, уже нашел — onFinish
А как зациклить воспроизведение?
Чуть выше в комментарии я давал ссылку на принудительную остановку видео. По такому же принципу делается и зацикливание
Для более плавного перехода можно сделать onLastSecond вместо onFinish.
Увы, не работает зацикливание. Доходит до конца и останов, предлагает нажать — play again.
Извиняюсь — работает. (надо было выложить на хостинг)
Доброго времени суток!
Может подскажешь такую вещь. Вставил плеер (флеш-версия), подсовываю локальный видеоролик по относительной ссылке (href=»vid/000.webm»), крутит колечком и ничего не показывает. По абсолютной ссылке (href=»http://site.com/vid/000.webm») все нормально проигрывает. А я понятия не имею заранее о том, какой будет абсолютный путь к ролику. Да и как-то не предполагалось такими путями пользоваться.
Как бы поступить в этой ситуации?
Вычислять путь на PHP 😀
И чем плох абсолютный путь?
Здравствуйте!
Подскажите, пожалуйста, такую штуку. Есть ролик. Есть к нему изображение, которое должно быть при загрузке страницы, пока проигрывание не включено. Указываю путь к этому изображению. В результате изображение не масштабируется, а выводится целиком с обрезанными справа и снизу краями. Как сделать так, чтобы изображение влезало целиком и масштабировалось при полноэкранном режиме?
Евгений, если всё сделано, как в статье «Установка splash image для FlowPlayer», то достаточно прописать CSS стили для картинки
Для пропорционального изменения размеров картинки, вместо 100% необходимо написать auto, например:
Доброго времени.
Может быть подскажешь такую вещь — я формирую динамически яваскриптом несколько плееров подряд — все нормально выводиться. Но при нажатии на плай — крутит колечко и все. Пробовал менять пути, файл доступен — скачивается. В чем может быть проблема?
Константин, с ходу не подскажу, надо смотреть код, может баг в JS который генерирует плееры.
Пиши в скайп ban_rus во вторник, посмотрим. Раньше, к сожалению, некогда — праздники 🙂
А как управлять регулировкой уровня громкости? У меня по умолчанию при воспроизведение ползунок находится на 50% отметке, а нужно чтобы было на все 100%
Однако, я бы не рекомендовал использовать такое, ибо пользователь может убавить звук и это сохранится в браузере и при просмотре другого ролика это состояние будет загружено. А если ему придется на каждом ролике убавлять звук, то это его может взбесить.
Здравствуйте.
Подскажите пожалуйста.
Если у меня в папке несколько видео, возможно чтобы они выбирались случайным образом при каждой перезагрузке страницы? Или чтобы был плейлист?
Игорь, и то и другое можно реализовать.
Случайное видео проще всего сделать на стороне сервера на PHP
Конечно подобное можно реализовать и на JS, но это будет не красиво и сложнее.
О плейлисте для FlowPlayer хорошо написано на оф. странице плеера: «A customizable HTML playlist for your videos»
Если что не понятно там написано, спрашивай.
Чет у меня не совсем получается
http://www.atlasokon.com.ua/2almplast.html
все работает, только при нажатии на плейлист кнопка сначала стрелкой идет на видео а потом опять прямоугольная становится. А должна оставаться стрелкой.
И если смотреть второе и дальше видео, то экран не активный получается. Остановить и продолжить просмотр можно только в панели плеера.
У тебя старая версия скрипта Playlist’а, в ней похоже баг.
Скачай или подключи последнюю версию flowplayer.playlist-3.2.10
Таки да из за старой версии.
Спасибо с новой все ок работает.
И еще вопросик ))
А чтобы плейлист был в виде маленьких плееров, такое сложно сделать?
Не понял, в смысле в виде маленьких плееров? Не проще тогда на странице разместить несколько плееров?
Плейлисты оформляются с помощью CSS — делать можно как душе угодно.
Плеер оформляется с помощью JS — тут возможностей с оформлением меньше.
Так же плеером можно управлять «удалено» (через HTML элементы), т.е. элементами, как к примеру плейлист, отдельными от самого плеера. Таким образом сам плеер скрывается, а функции управления уже оформляй как душе угодно.
Я имел ввиду что то похожее на это http://www.atlasokon.com.ua/images/video.png
Ну не вижу проблем. Подобное легко реализуется через HTML и CSS. Если для тебя это сложно, то рекомендую почитать http://htmlbook.ru/ 🙂
Здравствуйте. Такая проблема, вывожу ролик в всплывающем окне с помощью highslide, однако когда закрываешь окно, плеер продолжает воспроизводить видео. Может быть подскажете как остановить его принудительно при закрытии окна?
LLll, добрый день!
1) Я бы рекомендовал ознакомиться со статьями Video overlays и Custom fullscreen action, может появится желание воспользоваться готовыми решениями.
2) На элементе, который выполняет действие закрытия необходимо посадить событие для FlowPlayer. Для остановки это $f().stop(); (подробнее про Api FlowPlayer). Тут необходимо либо вылавливать все элементы, на которые срабатывает закрытие, либо внедрить в highslide это событие. С highslide не работал, подробнее не скажу.
А можно сделать ссылку рядом с плеером, при нажатии на которую запускалось бы видео, такую внешнюю кнопку play?
Павел, ознакомься с материалом по Api FlowPlayer.
Вместо $f(0) можно указать непосредственно контейнер плеера $f(‘#player’).
Только чтобы она была не в контейнере, а вне его.
Здравствуйте! Подскажите пожалуйста.
У меня над видео есть меню, из которого выпадает, при наведении, подменю. Но оно почемуто залазит под видео… Как мне сделать, чтобы выпадающее подменю было поверх видео?
Добрый день.
Стоит попробовать для меню выставить z-index побольше, а для плеера z-index меньше и добавить position: relative;
z-index для flash не работает, если не стоит параметр wmode:»opaque», но у меня, почему-то, даже с ним не работает…
вот мой код:
Вот так заработало:
Про wmode: «opaque» я знал, но вот не знал что (как) его можно передать плееру. Спасибо, буду тоже знать!
Подскажите пожалуйста, как можно изменить положение ролика. например сместить его вправо и вниз
заранее спасибо
Михаил, если я правильно понял, то тебе надо ознакомится со статьей Canvas — The larger picture
нет я имел в виду сместить сам плеер на странице в другое место. Мне надо вставить влево от него описание. А он отображается справа. Что делать???
Так это уже не к плееру относится, а к верстке в общем.
Можно добавить правила CSS float: left/right
Спасибо огромное!!!!
Спасибо, статья очень ценная!
Только из-за своей неграмотности не могу понять, куда вставлять все эти три html кода, если я хочу вставить плеер на вордпресс!?
Буду искренне благодарен за решение моей проблемы.
Степан, может проще тогда будет воспользоваться плагином для WordPress?
FV WordPress Flowplayer или Flowplayer 5 for WordPress
Спасибо, рассмотрю вариант.
Скажите, пожалуйста, а как сделать чтобы для проигрывания видео не приходилось ждать полной его загрузки?
Спасибо.
Вариант первый: конвертировать видео в FLV
Вариант второй: подключить плагин MP4 Pseudo-streaming
Спасибо еще раз, сейчас буду пробовать второй вариант.
Удалось подключить плагин, но также приходится ждать полной загрузки видео(( Мой код
Может здесь есть еще какие то настройки?
Dimkas, попробуй подключить это видео: http://pseudo01.hddn.com/vod/demo.flowplayervod/bbb-800.mp4
Если оно нормально заработает, то проблема в твоём сервере.
Да, все как надо, вернее хотелось бы) Может еще подскажете что можно с сервером сделать или может бить он просто не предназначен для такого рода задач? Или может там надо какие модули подключить? Извините, если вопрос не по теме) А за помощь спасибо.
Dimkas, если у тебя хостинг, то ни чего тут не поделаешь, кроме как писать в службу поддержки и просить поставить stream MP4 модули.
Если у тебя свой сервер, то гуглить по запросам «apache stream video». Подробностей не знаю.
Если не хочешь головной боли, то конвертируй всё видео в FLV. Это самое простое.
Чуть сложнее — переходи на HTML5 версию плеера, но опять таки придется конвертировать видео.
Для конвертации есть замечательная программа XMediaRecode, полностью бесплатная, не требует установки (portable) и с готовыми профилями под устройства. Я конвертировал в своё время профилем Youtube.
Ещё вариант — поискать облака типа DropBox, которые поддерживают streaming. Может и DropBox поддерживает, я от туда пробовал MP3 тянуть, MP4 не пробовал.
Если подумать, вариантов много. Выбирай.
Спасибо за исчерпывающий ответ) Ну что же, попробую написпть в службу поддержки хостинга, посмотрим, что они скажут. Ну а если что, всегда можна и конвертировать) Спасибо еще раз.
Подскажите, пож-та, как всё-таки вставить видеоролик по относительной ссылке href=»123.flv»
Tatyana, также, как и при абсолютно ссылке
Только надо указывать относительно текущей страницы, на которой этот код. И надо понимать, что это опасно — если страница переместится, то придется переписывать путь на новый.
Вот мой код:
Просто крутится колёсико проигрывателя и ничего больше не происходит.
Что у меня не так?
скопировала код из вашего примера, всё равно не загружается видео, приведите код свой пожалуйста если не сложно с учётом href="/video/123.flv" (не через http://…)
http://download.g63.ru/flowplayer/demo.htm
не получается, я вставляю код в html файл, лежащий на диске D и не работает, или работает только на спйте?
Да, стоит работать непосредственно на сервере, ибо локально может мешать политика безопасности браузера или flash
Встроил плеер последней версии. Вроде всё как положено. .min.js запихнул в , встроил в нужном месте тег <a> с нужными мне стилями. Ниже написал код для запуска плеера. Видео вставилось. Но есть такой баг: если я запускаю видео (оно всё хорошо проигрывается) после чего останавливаю его (тоже всё норм), но если я его попробую опять запустить, то ничего не происходит. Нужно отметить, что я встраиваю stream, мб это влияет.. Как исправить — не знаю. Помогите, пожалуйста. Заранее спасибо 🙂
PetrovDS, можешь привести ссылку на видео, чтобы ознакомиться с багом?
Не исключено, но по идее не должно быть. Блог создан на WordPress и обновлен до последней версии.
Лол, что? Мне кажется или тут активная XSS? XSS
Тест:
P.S.
Прошу прощение за оффтоп, но я не мог такое оставить без внимания.
Приветствую.Установил на локальном сервере.Для простоты все файлы в одной директории.Пробовал flv,mp4.Сразу воспроизводится.Одно не получается:Меню внизу не видно.При малых размерах видео (250) появляется место внизу для меню,но нет элементов управления?
Странно. Нет таких проблем. Меню и элементы появляются, но разумеется не все умещаются при очень маленьких размерах.
1) Проверь, есть ли у тебя в папке с плеером «flowplayer.controls-3.2.*.swf». Если нету, то скачай и положи в папку. Раньше он, вроде, автоматом подцеплялся из папки с плеером
2) Попробуй вот такие настройки сделать
Список элементов
Возник вопрос.А как убрать логотип в правом верхнем углу при просмотре?Мешает сильно.
И ещё как сделать,чтобы показывалась картинка,пока не нажали пуск?Спасибо.
жека, есть два варианта:
1) купить/найти ключик для плеера и поставить коммерческую версию плеера
2) собрать плеер самому их исходников
А можно как-то сделать копку «стоп»?
Благодарю за ответ.
жека, чуть выше, перед твоим первым вопросом уже был ответ
У меня имеется такой скрипт:
как бы я не вставлял в него вашу строчку,всё-рвано не видать кнопки «стоп»,более того, самого плеера становится не видно.Подскажите пожалуйста куда правильно поставить эту строчку.Благодарю вас.
Второй раз сталкиваюсь. До этого помогал — проблема в версии «flowplayer.controls». Только в прошлый раз вроде наоборот обновляли.
В общем всё работает, как с подключением старой версии плагина, так и без подключения вовсе.
Скачай к себе старую версию (3.2.5) и подключи или просто положи в папку с плеером, можно без подключения, а можно и без файла — у меня и без этого файла в общем-то работает :-).
Рабочий пример с кнопкой «стоп».
Спасибо вам.Но оказывается этот вариант не подходит,т.к. при нажатии на «стоп»,плеер показывает начальный кадр ролика,а нужно чтобы он показывал начальную картинку,приходится обновлять страницу,чтобы увидеть картинку.А может так и должно быть.
Жека, то что тебе надо тоже можно реализовать.
FlowPlayer очень гибкий, если знать JS.
Добрый вечер!
При открытии полноэкранного видео на квадратном мониторе изображение растягивается непропорционально. Возможно это исправить? Спасибо.
Наталья, можно. Выше уже был ответ.
Нсколько я поняла, это решение для контейнера с плеером. Мой вопрос касается полноэкранного режима. Поэкспериментировала с кодом — ничего не вышло…
Вот код:
Спасибо, решено
Скажите пожалуйста, ролики из Youtuba и из других сайтов не откриваеть плеер?
С Youtuba открывает с помощью плагина, правда они за это денежку просят. Раньше бесплатно было. С других — нет. Для других надо не плеер, а прокси-сервер.
Подскажите, пож-та, возможно ли использовать данный проигрыватель? Нужен просто html файл с проигрывателем и файл хранящийся в этой же директории и запуск этой html-страницы без доступа в интернет.
Tatyana, вроде нельзя, у меня не получалось. Файл видео необходимо выкладывать на сервер. Сам плеер может быть локально.
Добрый день,.. Вот такая проблемма. Хотел поставить одновременно несколько плееров на страничку, с использованием
splash image, да вот незадача, на первом по порядку плеере картинка на отображается,(если ставлю два), если ставлю три, то
на первых двух не отображается…подскажите пожалуйста если можете…Сайт написан на Codigniter.
ollegwolkow, я не совсем понял, вы делали как в примере?
Скрипт вызова плеера вставляется только один раз после всех блоков с плеерами.
Если есть возможность, поделитесь ссылкой на сайт (страничку) где Вы пробовали его ставить.
Большое спасибо за помощь,..посмотрел исходный код вашего
примера и сообразил в чём ошибка. Теперь всё работает как надо.
Прекрасный, толковый сайт. Честно говоря случайно зашёл и как оказалось не зря. Ещё раз спасибо, удачи.
p.s. ссылку на сайт обязательно сброшу, как только закончу его делать, пока он у меня на локальном.
А как сделать, чтобы ролик открывался в маленьком окне поверх главного окна по ссылке «смотреть» из главного окна? Например, как здесь
http://www.aosipov.ru/video/03_video_lektsii_a_i_osipova_kultura_i_istorija.html
Непосредственно по ссылке используется window.open
Но есть более современный способ — использовать Overlay, lightbox или любой другой аналог.
Добрый день, очень все интересно, но для новичка справиться с динамическими плейлистами проблематично. Хотелось бы получить консультацию. Задача такая, есть 9 флеш роликов, на сайте три группы радио-кнопок, так вот в зависимости от выбора пользователя нужно составить плейлист из трех роликов и проиграть их без паузы, а потом остановить проигрывание.
Пока даже не получилось вот так проиграть:
но это конечно же из-за вот этого
но как убрать href=»1.mp4″ и подцепить playlist: [«1.swf», «2.swf»]
не понимаю.
У разработчиков читал, перечитывал… не помогает(
Демо с плейлистом
Вот демо работает, а у меня нет. Почему? Вот код странички
Почти один в один с демонстрашкой, заставку убрал, т.к. мне нужно чтобы сразу проигрывалось. Но при запуске странички выводится черный бокс плеера с надписью в левом нижнем углу и… всё. Ни кнопки Play как в примере посередине, ни ролики не запускаются. Жмешь курсором он не реагирует. Все файлы в одной директории.
В общем или лыжи не катят или я…
Прошу помощи.
1) Файлы необходимо хранить и проверять на стороне сервера/хостинга, а не локально.
2) Попробуй скачать файлы заново, с моего сервера (раз или два). Есть ли у тебя файл «flowplayer.controls-3.2.5.swf» в директории по соседству с «flowplayer-3.2.7.swf»?
Если это не поможет, то делись ссылкой. Разберемся на месте.
flowplayer.controls-3.2.5 и flowplayer-3.2.7 в одной директории. В этой же директории папка с файликом странички — index.html, видеоролики и flowplayer-3.2.6.min. Как только ставлю абсолютные ссылки на Ваши файлы — работает, но мне нужно запустить локально видеоролики, т.к. создается простенькая обучающая система на базе html. Самое неожиданное, что вчера с тега <a href= запускались, а сегодня обновил плеер с Вашей ссылки и нифига(. Тут уже поднималась тема про относительные ссыли, может поможете как победить это, а то в PHP и прочих радостях я пока вабсче ниже плинтуса.
Локально работать не будет. Политика безопасности браузера и flash мешает этому.
Возможно имеет смысл посмотреть в сторону Flowplayer HTML5, ну а ролики сконвертировать в mp4 (h264)
Добрый день. Есть возможность настройки плеера на разрешение перехода по (URL), т.е. в видео ролике ставлю кнопку заказа и есть по окончанию видео переход по ссылке. Как заставить плеер реагировать на ссылки?
Выше я уже писал как что-либо сделать по завершению.
На данное событие вешаем location.replace
Спасибо, работает, но надо что бы открывало в новом окне. В html знаю как, а здесь нет.
И еще очень важно, возможно, что бы кнопка срабатывала на переход по ссылке. В камтазии есть такая функция создать кнопку в самом видео. Можно сделать кнопку заказа.
window.open
Content plugin
Извините, что не по теме, но я не знаю куда обратиться.
Есть скрипт, который открывает по установленному времени.
Как сделать, что бы он открывал несколько и каждый по отдельности в установленное время?
для этого необходимо вызывать столько раз, сколько надо
Необходимо немного переделать функцию, а именно сделать передачу в нее аргумента
Теперь можно вызывать её и указывать какой элемент (по его ID) вызывать
У каждого элемента должен быть свой ID.
Согласно HTML спецификации этот ID (уникальный идентификатор) должен быть один на страницу
Извините, не знал, что обрежет. Обрезало (див) и код скрипта
То, что надо, но не работает. Посылаю полностью код. Удалил тэги, может не обрежит html код.
Старый код работает.
Благодарю, работает!
Подскажите, пожалуйста. Никак не могу разобраться, как сделать, чтобы панель управления не исчезала совсем? Видео воспроизводится, но панель исчезает. Очень неудобно, когда сенсорное управление без мышки.
Спасибо!
другие режимы
Спасибо Вам за ответ и помощь безвозмездную. Всегда ценю это и вспоминаю всегда хорошими словами, да помогут Вам добрые искренние мысли хоть немного в Ваших новых удачах.
Всё работает как Вы посоветовали!
Спасибо!
С наилучшими пожеланиями, Вячеслав
Здравствуйте!
Экспериментирую с плеером. Всё вроде бы ясно более менее, но вот непропорционально растягивается видео и всё тут((
Ставлю такой код, как Вы и писали выше :
Но его сайт не видит и просто предлагает скачать видео.
Как быть ума не приложу.
Проверь внимательно запятые, скорее всего где-то забыл поставить при добавление.
Точно!
Разобрался!
Спасибо!!!
А может быть Вы подскажите вот что.
Когда я выставляю orig или fit действительно видео сохраняет пропорции. Но на в полноэкранном режиме видео на весь экран плеера не растягивается, и это понятно если размер видео задан оригинальный, то он не сможет растянуться вплотную по всему экрана плеера сохранив свои пропорции.
Вот и получилось, что на весь экран не растягивается, но сохраняет размеры.
А есть ли способ как-то изменить размеры самого полного экрана плеера, чтобы подогнать его под размеры видео?
Я не имею ввиду само окошко размеры которого задаются вот так :
style=»display:block;width:300px;height:200px;»
Это понятно, что его можно задать любым. А я имею ввиду, что при раскрытие на весь экран подогнать размеры под само видео. Или это невозможно?
Спасибо! Надеюсь понятно объяснил..
Сам термин «полный экран» или «FullScreen» говорят сами за себя.
Можно посмотреть в сторону Dynamic resizing и Custom fullscreen action. Но это уже будет не FullScreen.
Всем привет. У меня такая проблема, вставил вот такой код, видео не запускается в IE 8.0.7
Что делать, как запустить это видео?
Какую ошибку выдает? (Ошибку искать в «средства разработчика»)
Можно попробовать путь указать абсолютный, а не относительный.
И не забываем, что плеер не предназначен для локального просмотра. Обязательно надо заливать на сервер.
«BaNru»-спасибо большое! Поставил полный путь к видео и плееру. Вот так:
Спасибо большое.
Для админов:
Спасибо за сайт! НО есть один минус.
Было бы хорошо если на почту приходило письмо, что появился новый комент в статье где я оставлял свой комент. Я написал и подзабыл сидел сам разбирался. Пришло бы письмо. Я бы сразу зашел к вам на сайт. Таким способом можно хорошо поддерживать активность на сайте.
Хм, а я думал есть уведомления. Спасибо за инфу, разберусь.
Здравствуйте!
Я транслирую видео на главную страницу сайта nevnov.ru с наших партнеров (впитер.ком). Так вот у меня выводится надпись flowplayer в окне плеера, а у них нет.
Дело в лицензии плеера?
Убрать эту надпись скриптами нет возможности?
Заранее спасибо за ответ!
Скриптами убрать лого нет возможности.
Можно купить лицензию или погуглить генератор ключей для Flowplayer5 или Flowplayer3.1.*
Добрый день!
Спасибо за познавательную статью!
Я сейчас работаю над RTSP стримингом IP камер и пытаюсь вразуметь, подойдёт ли для этих целей FlowPlayer?
Видеопоток кодируется в mjpeg.
Спасибо!
Добрый!
Я впервые вижу такой формат, поэтому не могу подсказать
Стоит попробовать плагины стриминга.
В интернете говорят, что предварительно надо перекодировать через VLC.
Здравствуйте!
Я убрал контрольную панель, но еще необходимо запретить возможность останавливать видео. Необходимо, чтобы видео проигрывалось от начала до конца, не смотря на кликание по видео. Как это реализовать?
Во FlowPlayer такое не предусмотрено, ибо не комильфо это.
Можно обойти это ограничение добавив в clip событие onPause с функцией, которая будет снимать с паузы видео
Но появляется глюк в виде неисчезающей кнопки play. От неё можно избавиться таким образом (на том же уровне что и clip, т.е. до или после):
Update 9 мая 2014
Оказывается есть способ запрета остановки/паузы видео.
Ниже в одном из ответов на вопрос я подсказывал как отключить FullScreen режим в FlowPlayer. Точно так же можно отключить и паузу
От первой функции видео перестало выводиться на странице.
Значит что-то не так сделал.
Не забываем про синтаксис (запятые)
Демо отключения Stop
А про запятые, то я и забыл. Спасибо тебе, BaNru! Всю голову себе сломал:-) Если водишь, заходи ко мне autoass.ru, задавай вопросы, может чем помогу.
Привет. Что-то не получается убрать панель воспроизведения. Как это сделать? Чтобы только плей и стоп было, а прокручивать нельзя. Спасибо!
Александр, я не понял, тебе надо убрать панель или только кнопки?
Как убрать панель я писал и приводил примеры выше
Отключить кнопки и прочие элементы управления на controlbar’е можно так:
Однако у FlowPlayer’а есть горячие клавиши и события. Например по двойному щелчку плеер переходит в FullScreen. Чтобы запретить переход в FullScreen необходимо добавить следующий код (на уровне clip):
Точно также отключается перемотка, только через событие onBeforeSeek
Демо
Здравствуйте. Хорошая работа. Спасибо.
Вопрос по меню,если можно.Не разобраться с синтаксисом.Меню прилепил работает.Не понимаю как сформировать картинки и как вынести menuItem в отдельный файл.
Пробовал в menu{ itemsUrl()},а в menu.txt
что бы хоть попробовать, но не работает.
Подскажите,если время будет.
Евгений, по картинкам не понял в чем возникает проблема. Попробуй указывать абсолютные пути (см. демо).
Что касается выноса в файл, то тут много похожих вариантов решения, главное понять как работает json и js объекты, ибо всё тут построенно на них. Я так понял тебе надо вынести сам список из меню?
1) необходимо файл сделать не txt, а js — это упростит задачу. И подключить его
2) в него вынести наше меню как есть, только присвоить переменную (см. пример файла)
3) Теперь просто подключаем эту переменную items: myMenu
Смотри демо. За основу демки взята оф. документация.
Точно таким образом можно вынести любой пункт настроек плеера.
С items: myMenu понятно, спасибо,к сожалению с playlist такое что то не выходит. Ну да ладно. Всё равно везде динамика. Но так и не ясно как получить превью с ролика, чтобы вставить в меню или плейлист.Также хотелось бы дополнить пост о scaling: fit/half/orig/scale( далее ещё были вопросы об этом, что не работает).У меня тоже не работало. Оказывается надо в кавычки эти fit/half/orig/scale заключать. Возможно это банально, но для неопытных лишняя канитель.
С плейлистом точно также. Помещай в тот же файл
и потом назначай
Привью ролика получить так просто не получится. Есть варианты:
Про scaling и кавычки — спасибо за замечание. Это не оказывается, а должно быть. Моя ошибка, извиняюсь. Исправил комментарий.
Всё понятно,спасибо, буду смотреть в сторону php.
Приветствую. Разобрался с превьюшками.Если надо зесь написал как делать, если кому понадобиться.
http://ureech.ru/cms/instantcms/flowplayer-preview.html
Автор блога молодчага, пол инета обыскал нужную инфу, а здесь нашел в комментариях. На заметку автору, неплохо было бы вынести основные проблемы пользователей из комментариев в саму статью (может скриншотами или просто раскрыть). Например создание плейлистов, установка размеров полноэкранного видео, подключение стилей оформления панели и т д
Евгений, ваша ссылка на сайт ureech не работает, просьба выложить инструкцию по созданию превью тут!
Добрый день уважаемый автор, будьте любезны ответить на вопрос возможжно ли загрузить видео с локального диска а не с хоста, так как сайт в стадии разработки смысла платить за хост нету, а внедрить данный плеер на данном этапе очень важно для разработки дальнейшего дизайна …. спасибо…:)
Добрый.
Можно, но с ограничениями, о которых я выше в комментариях упоминал.
Точно не помню уже, но вроде воспроизводиться видео локально не будет, но сам плеер появится, что позволит почти полностью настроить его дизайн.
Однако, у Вас есть несколько вариантов решения проблемы:
1) Для разработки сайта лучше всего использовать Denwer или OpenServer, благодаря им Вы сможете развернуть на своём компьютере свой мини сервер. Эти сборки серверов работают без установки. Особенно полезно будет, если вы начнете использовать серверные языки, например PHP.
2) Воспользоваться бесплатным хостингом. Их достаточно много. Про трёх из таких хостингов я писал в одной из статей
3) Перейти на HTML5 версию плеера, там данная проблема должна быть решена.
4) Совместить 1 или 2 с 3 пунктом.
Добрый день!
Ув. знатоки, я в танке, отсюда наверное такой вопрос.
Подготовил темку на такой-то форум. Нужно встроить 3 видео с ютюб. В предпросмотре 2 видео «материализуются» нормально.
А вот вместо 3-го видео вижу строчную URL.
Не берёт движок сайта более 2-х встроенных youtub-роликов, и всё тут.
Могу ли я встроить на тот общественный форум, FlowPlayer с видео, рядом с двумя встр. роликами ютуб?
А чем не устраивает стандартный код вставки с Ютуб?
Если это «общественный форум», то следовательно доступа к коду у вас нет и вы не сможете встроить. Используйте стандартную вставку, чаще всего это [video]ссылка_на_видео_ютуб[/video]
Если под этим термином понимается PHPBB или любой другой форум (CMS) и доступ к коду у вас есть, то можно встроить и три, и больше.
Для распространенных форумов можно найти и готовый плагин.
BaNru, спасибо!
«чем не устраивает стандартный код вставки с Ютуб?»
Устраивает же, просто тот форум, в одном сообщении, три видео какбэ не осиливает.
Получаются 2 нормально встроенных ютуб-ролика, а под ними, вижу просто строчную URL h**ps://www.youtube.com/watch?v=0IqOx5_HZQw
«PHPBB или любой другой форум (CMS)»
сорри 🙂 скорее не разберусь.
«Для распространенных форумов можно найти и готовый плагин.»
BaNru, подскажите пожалуйста плагин, чтоб я не зависел от ютюб.
А ещё не хотел бы видеть что видео исчезло с того форума через полгодика.
Кстати, могу дать «ник и пароль» на тот форум, а Вам будет легче мне помочь.
Вы как профи тут же разпознаете тип движка.
BaNru, прошу прощения за мой оффтоп в красивом блоге.
Так я не понял. Тот форум ваш или нет? Есть у вас доступ к коду или нет?
Если нет, то ничего вы не сможете сделать. Это значит так настроил админ форума, обращайтесь к админу с просьбой снять это ограничение или, если это ошибка, то исправить её.
«Тот форум ваш или нет?»
нет конечно.
«Для распространенных форумов можно найти и готовый плагин.»
можно?
Надо читать абзац целиком:
Здесь любые советы из вне бессильны. Разве что узнать какие видеосервисы поддерживает форум и попробовать залить видео на эти другие сервисы или пишите два сообщения на форуме.
За подробностями вам стоит обратиться к администрации форума, наверняка там есть раздел поддержки форума или в личные сообщения администрации.
Данный материал рассчитан на вебмастеров (они же и админы форумов), а не на конечного пользователя.
Друзья,
ничего не понимаю.
Взял тупо Вашу Тестовую страничку, два файла плеера. Всё залил на хостинг. Открывается лишь черная рамка плеера.
А Ваша тестовая страничка открывается и всё отлично играет.
Ничего не понимаю. Файлы плеера в корне вместе с Index.
Помогите, пожалуйста!
Извиняюсь, что не ответил ранее, уведомления почему-то не приходили.
Если тестовая страничка локально, то проблема известна и о ней писал в комментариях.
Страничка обязательно должна быть на сервере (пусть даже локальном Денвере).
Если есть возможность выложить в интернет — выложи, тогда я попробую подсказать причину проблемы.
Посмотрел у вас на сайте.
Некрасивый домен 🙂
Проблема в том, что вы не загрузили все файлы. В архиве лежит ещё файл flowplayer.controls-3.2.5.swf, он должен быть в той же папке, что и flowplayer-3.2.7.swf.
Спасибо за найденную ошибка. Статья исправлена и вы поправьте и всё у вас заработает.
Здравствуйте. Пожалуйста помогите мне с настройкой flowplayer. Уже неделю мучаюсь. Напишите мне на вк [ссылка на профиль удалена] Я заплачу за помощь хорошие деньги.
Ответил на почту.
Добрый день! нашел Вас на сайте нуллед, можно договориться ?
работаю в комп.клубе администратором, мне надо сделать ролики для игр, чтобы клиент мог просмотреть, лого, конечно, особо не мешает, но вдруг ? 🙂
П.С. учился по вашему блогу! Спасибо!
Комп.клубы ещё существуют?!
Ролики не делаю. Если есть какие-то вопросы по установке и настройке плеера — спрашивайте.
Комп.клубы ещё существуют?!
Ролики не делаю. Если есть какие-то вопросы по установке и настройке плеера — спрашивайте.
Насколько сложно создать интерактивное видео (всплывающие двойные субтитры и т.п.) как на show-english.com у них там flowplayer?
Роман, извините, не видел сообщения вашего.
1) Сделать можно практически всё. Сложность средняя.
2) Если что-то где-то сделано, всегда можно позаимствовать.
Но, я думаю, за 2 месяца вы уже решили эту проблему.
Здравствуйте
При работе в HTML5 режиме на смартфоне, проявляются 2 глюка, которые вероятно как-то связаны друг с другом:
1. В мобильном браузере Opera (и только в нём) во время воспроизведения на экране постоянно отображается кружок с треугольником (знак плей). Т.е. получается так, что он сперва есть, нажимаю на него, он исчезает, бегут точки, пока загружается видео, потом появляется изображение и снова этот значек, которые не исчезает.
2.В мобильном Хроме иногда так бывает, что после загрузки видео окно в виде просто белого экрана и в фоне идет звук. Т.е. видео загружается и воспроизводится, но вместо него просто белый фон. Если в момент загрузки быстро нажать на «полный экран» то изображение будет воспроизводиться без проблем.
В каком направлении искать причину этих странных глюков?
Максим, извините, не пришло уведомление о вашем сообщение, только сегодня увидел.
К сожалению не знаю ответа на ваш вопрос. Это надо видеть и лучше в десктопной версии это попробовать повторить (в режиме эмуляции мобильного браузера), тогда можно будет искать ответ на ваш вопрос.
Добрый день!
Подскажите пожалуйста, как сделать одновременно
следующее:
— Авто воспроизведение видео (хотя оно само срабатывает)
— Авто повторение видео после окончания
— Принудительно установить нужный уровень громкости
— Скрыть панель инструментов
По отдельности все это работает, а вместе эти опции никак не получается
заставить работать..
Заранее спасибо!
Andrey_Ak, укажите версию вашего плеера.
Тот же вопрос, что и у Andrey_Ak.. Версия 3.2.2
К сожалению проверить не могу, потому что снёс флеш уже давно.
И вам советую переходить на новые версии FlowPlayer.
— Авто воспроизведение видео (хотя оно само срабатывает)
— Авто повторение видео после окончания
Попробовать вот так:
Если не получится, то вот так попробовать
— Принудительно установить нужный уровень громкости
— Скрыть панель инструментов
или
Примерный код на всё сразу
Если что-то не заработало или сам плеер упал, то вероятнее всего где-то забыли запятую поставить.
PS Комментарии ломались, не было видно все. Сейчас починил. Ознакомьтесь, вероятно что на другие вопросы, которые появятся, я уже отвечал.
Добрый день. Я в Ява не силен и хотел уточнить, как можно сделать загрузку проигрывателя после полной загрузки страницы, так сказать отложенную или ленивую загрузку видео, чтобы увеличить скорость загрузки страницы? В конце статьи вы упоминули такую возможность, но как ее реализовать на практике? Можно для примера код?
Можно сделать на jQ
https://learn.jquery.com/using-jquery-core/document-ready/
Или на чистом JS
https://learn.javascript.ru/onload-ondomcontentloaded
Но это не ленивая и не отложенная загрузка. Это обычная загрузка. Для ленивой загрузки можно воспользоваться готовыми скриптами Lazy Load, и загружать типа
Добрый день, подскажите пожалуйста в мобильной версии, плеер пропадает 🙁
Как можно исправить?
Анна, чтобы помочь — необходимо знать версию плеера и ссылку на страницу, где проблема.