Как создать видео галерею для сайта. Как создать свой видео сайт

видео галерея

От автора: в этом уроке мы реализуем видео галерею для сайта. Данный урок разбит на 2 части: в первой части мы получаем флеш-плеер и публикуем его на странице сайта, во второй части при помощи библиотеки jQuery и плагина fancybox уже непосредственно создаем видео галерею.

Важно! Галерея работает только на сервере, для просмотра моего варианта (если вы используете Денвер) просто скопируйте папку video со всем содержимым в корень localhost/www и перейдите по адресу //localhost/video/

Для изучения данного урока рекомендую скачать видео-версию.

Также скачайте исходники себе на компьютер.

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

Практический курс по верстке адаптивного сайта с нуля!

Изучите курс и узнайте, как верстать современные сайты на HTML5 и CSS3

Узнать подробнее

Часть 1

Нам понадобится флеш плеер, который может проигрывать видео на сайте. При наличии определенных знаний во Flash и ActionScript можно создать такой плеер с нуля. А можно воспользоваться сервисами, предоставляющими уже готовый плеер. Мы воспользуемся сервисом Uppod (//uppod.ru/). Этот сервис предоставляет многофункциональный плеер с более чем 100 настройками и опциями, поддерживающего множество форматов видео, кроме того, создать его довольно просто, быстро и, главное, бесплатно (есть платный аккаунт, предоставляющий ряд дополнительных опций… но опций бесплатного аккаунта, на мой взгляд, — более чем достаточно).

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

видео галерея

По ссылке слева "Скачать плеер" качаем текущую версию плеера. По ссылке ниже — "Настройки" — задаем настройки путей, а именно: путь к плееру, путь к папке со стилями и путь к папке с плей листами (последнее нам, в принципе, не понадобится, поскольку наша задача не один плеер с плей листом, а видео галерея). Следует отметить, что плеер по умолчанию работает только на сервере (можно свободно тестировать на локальном сервере, например, пакет Денвер), а потому ссылки должны быть абсолютными, т.е., вида //… . В дальнейшем мы всегда можем изменить данные ссылки либо в личном кабинете, либо непосредственно в коде публикации плеера на сайте.

После задания настроек плеера, возвращаемся на главную страницу личного кабинета (ссылка "Мой плеер") и переходим к созданию файла стилей нашего плеера. Для этого выбираем ссылку "Видео — Стили". После этого кликаем на знак "+ " и добавляем новый стиль. Я назову свой стиль по размерам роликов, которые я туда добавлю — 599_500, вы можете назвать его как угодно, и в дальнейшем таких стилей у вас может быть не один.

видео галерея

После создания нового стиля инициализируется страница плеера с настройками по умолчанию. В левой части страницы расположена панель настроек (с вкладками "Вид", "Панель", "Кнопки", "Опции", "Плейлист", "Логотип" и "Модули"), а в правой части находится плеер, в котором можно сразу же посмотреть изменение настроек, т.е., редактирование стилей происходит «на лету».

видео галерея

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

Помните, что в любой момент можно произвести новые изменения. Итак, во вкладке "Вид" я изменю размеры экрана на нужные мне — 599*500, а во вкладке "Опции" в списке "Загрузка" выберем опцию "Ждать активности".

С размерами понятно — это разрешение моего видео (хотя в плеере с экраном 599*500 затем можно проигрывать видео и другого разрешения, но для приемлемого качества желательно, чтобы разрешение видео и размеры экрана не очень отличались).

Что касается опции "Загрузки", то желательно указывать "Ждать активности" по одной простой причине — наверное, ни одному пользователю не понравится, когда бесконтрольно расходуется его трафик, поэтому не стоит загружать видео, пока пользователь сам того не пожелает.

После задания стилей для нашего плеера жмем кнопку "Сохранить" (над плеером) и, после успешного сохранения, жмем там же кнопку "Скачать стили" и сохраняем файл стилей в папку, которую мы определили в настройках плеера (я сохраняю в одной папке с плеером). Затем возвращаемся на предыдущую страницу — для этого жмем кнопку плеер.

видео галерея

Далее нам необходимо добавить 1 файл видео. Для этого выбираем пункт меню Файлы и добавляем файл видео — указываем название ролика, путь к нему и выбираем наш созданный стиль для него.

видео галерея

Жмем "Ок" и видим, что ролик добавлен. Кликаем на него и в появившемся меню выбираем пункт код для получения кода публикации плеера с видео. Нам предлагается выбор из нескольких вариантов публикации: классический HTML и относительно новый на JavaScript (через скрипт SWFObject). Я выберу классический способ, поскольку в нашем случае он более нагляден.

видео галерея

Итак, копируем код HTML с полной поддержкой IE и вставляем его на страницу в нужном нам месте:

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

Здесь прописан путь к плееру uppod.swf

Здесь указан путь к файлу стилей video10-1509.txt и к ролику 3_599-500.flv

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

Часть 2

Качаем скрипты

Первое, что нам необходимо сделать — это скачать с офсайта библиотеку jQuery и плагин fancybox с необходимыми стилями и картинками (все это прилагается в исходниках). jQuery качаем по адресу //jquery.com/ , fancybox — //fancybox.net/.

Подключение скриптов

Далее подключаем между тегами head скрипты и стили. У меня они находятся в каталоге fancybox:

Вызываем fancybox

После этого необходимо вызвать fancybox и указать объекты, на которые мы его повесим, т.е., те объекты, с которыми будет работать нужная нам функция. Делается это, опять- таки, между тегами head:

Практический курс по верстке адаптивного сайта с нуля!

Изучите курс и узнайте, как верстать современные сайты на HTML5 и CSS3

Узнать подробнее

Данным кодом мы указываем, что fancybox будет обрабатывать ссылки (тег a) с классом video (a.video).

Создаем первый файл видео галереи.

Далее мы немного допишем код публикации плеера:

Что мы сделали?

Во-первых, заключили код плеера в блок:

У этого блока мы указали идентификатор video1 (так как таких видео будет не одно) и прописали стили, которыми указали ширину и высоту немного большие (пикселей на 5 — они пойдут на бордюр модального окна), чем размеры плеера, а также, при помощи свойства overflow: auto мы указали, что если содержимое блока больше, чем размеры самого блока, то добавятся полосы прокрутки.

Во-вторых, полученный блок с кодом мы заключили еще в один блок:

Блок скрывает все свое содержимое при помощи свойства display:none

В-третьих, мы прописали код картинки и сделали ее ссылкой на блок с идентификатором video1:

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

видео галерея

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

В итоге получаем 2 превью, при клике на каждый из которых всплывает модальное окно со своим видео.

видео галерея

Настройки модального окна

По желанию мы можем изменить настройки модальных окон — их описание можно посмотреть по ссылке //fancybox.net/api

Я изменю способ появления и исчезновения окна, а также их скорость. Делается это в функции fancybox:

На этом данный урок закончен.

Надеюсь, он был полезен вам.

Для тех, кто не совсем понял как это реализовать на практике, настоятельно рекомендуем просмотреть видео-урок:

Пишите замечания и пожелания в комментариях.

киберсант-вебмастер

Автор: Андрей К

Редакция: Рог Виктор и Андрей Бернацкий. Команда webformyself.

E-mail: contact@webformyself.com

P.S. Хотите опубликовать интересный тематический материал и заработать? Если ответ «Да», то жмите сюда.

Практический курс по верстке адаптивного сайта с нуля!

Изучите курс и узнайте, как верстать современные сайты на HTML5 и CSS3

Узнать подробнее

Хотите узнать, что необходимо для создания сайта?

Посмотрите видео и узнайте пошаговый план по созданию сайта с нуля!

Смотреть

Метки:

Похожие статьи:

Комментарии Вконтакте:

Комментарии (92)

  1. Степан

    Спасибо, Вам за прекрасный материал на страницах этого интересного сайта!
    С уважением, Степан.

  2. Любовь

    Очень здорово! Спасибо!

  3. Любовь

    Очень хорошо смотрится, спасибо !!!

  4. Светлана

    Очень интересный и доступный материал! Всё пошагово и без размытости. Спасибо большое за вашу работу!

  5. Николай

    Спасибо! Отличный урок! Да ещё и с видео…!!

  6. Лида

    Благодарю ! Прекрасный и понятный урок !

  7. Александр Новиков

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

    Вопрос.
    А можно ли такую галерею скажем запихнуть на яндекс народ, там PHP не поддерживается?

    • Андрей Кудлай

      Вы правы, PHP там нет. Работоспособность только на сервере связана с особенностями файла плеера.
      Работать будет только на сервере, потому что плеер, который мы скачали с сервиса Uppod, скомпилирован для работы в сети интернет (т.е., он поддерживает интернет-протоколы http://). Для работы локально и загрузки файлов через file:// нужно перекомпилировать его в локальный режим. Можно задавать и относительные пути (я задавал абсолютные для большей наглядности… попросту говоря, чтобы меньше путались в коде и было понятно что и где расположено), но опять же плеер при этом должен быть расположен на сервере.

      На народ, как и на любой другой бесплатный сервер можно. Можно разместить саму папку video в корень сайта и сразу же посмотреть результат по адресу ваш_сайт/video/

  8. Олег Алексеевич

    Отличный урок!

  9. Интернетостродалец

    Хороший материал, обожаю видеоуроки.

  10. Владимир

    Спасибо за содержательный урок.Я думаю,что даже у меня,»чайника» в сайтостроении ,используя Ваш урок и видио, может что-то получиться.

  11. Павел

    Отличный урок, особенно для начинающих. Но у меня вопрос: можно ли уже существующее видео большего размера как-то подогнать под нужные размеры плеера (например под те же 599х500 или другие), если можно то каким образом?

    • Андрей Кудлай

      Можно, используя специализированный софт, изменить размеры видео, но это и не нужно.
      Я писал: «…в дальнейшем таких стилей у вас может быть не один», т.е., можно создать и 2, и 3, и больше стилей. Затем просто при добавлении видео в галерею мы укажем другие размеры для блока, в котором будет находиться видео, т.е., для модального окна, а в модальном окне, соответственно, уже будет плеер с другим файлом стилей, а значит и с другими размерами.
      Также писал: «в плеере с экраном 599*500 затем можно проигрывать видео и другого разрешения, но для приемлемого качества желательно, чтобы разрешение видео и размеры экрана не очень отличались.» Если разрешение проигрываемого видео превышает размеры экрана, то видео будет пропорционально уменьшено, чтобы полностью поместилось на экран.
      В общем, не бойтесь, экспериментируйте — и все получится :)

  12. Virgis

    Деловой подход — спасибо!

  13. Ekaterina

    Андрей ты просто молодец, замечательный урок, все понятно, очень хорошо объясняешь. Спасибо

  14. Ирина

    У меня не получается скачать jQuery. Выдается такой текст:

    /*!
    * jQuery JavaScript Library v1.5
    * http://jquery.com/
    *
    * Copyright 2011, John Resig
    * Dual licensed under the MIT or GPL Version 2 licenses.
    * http://jquery.org/license
    *
    * Includes Sizzle.js
    * http://sizzlejs.com/
    * Copyright 2011, The Dojo Foundation
    * Released under the MIT, BSD, and GPL Licenses.
    *
    * Date: Mon Jan 31 08:31:29 2011 -0500
    */
    (function(a,b){function b$(a){return d.isWindow(a)?a:a.nodeType===9?a.defaultView||a.parentWindow:!1}function bX(a){if(!bR[a]){var b=d(»

    Что с этим делать?

    • Андрей Кудлай

      Ирина, вот этот вот текст и есть код нужной нам библиотеки jQuery. Его нужно просто весь скопировать, в любом редакторе создать файл с расширением .js, а затем вставить в этот файл скопированный код. Файл сохранить, например как у меня в уроке jquery-1.4.4.min.js Это первый вариант. Второй вариант — просто взять уже готовый скрипт из исходников.
      Кстати, на данный момент версия jQuery уже 1.5

  15. lomik

    Хороший урок. Зделал все как надо в PHP. Проигрыватель работает, все нормально. Не отражаются иконки видео, вместо них черточки.
    В чем дело. Может ошибка у меня в коде.

    • Андрей Кудлай

      Однозначно ошибка в коде. Я так понимаю код иконок вытягивается из БД или файла — скорее всего ошибка как раз здесь… если это так, то она довольно легко отлавливается, если просмотреть исходный код сгенерированной страницы. Если предоставите код, а еще лучше код и ссылку на страницу, то посмотрю и попробую подсказать.

  16. Андрей

    Очень классно! Спасибо за интересный урок.

  17. Людмила

    Мне тоже понравился этот урок.

  18. Сергей Денисенко

    Замечательно, Андрей! Вот и пришлите статью в блог, как Вы сделали фотогалерею. Всем же интересно, что это «кое-что свое». ;)

  19. Сергей Денисенко

    Спасибо, друзья, за науку! Совершенству нет предела!
    А видео вообще классное. С удовольствием наблюдал работу Мастера!
    С уважением Сергей.

  20. Дмитрий

    Здравствуйте! У Вас интересный, полезный и толковый сайт.
    Но ОЧЕНЬ не хватает оглавления статей.
    Чтобы что-то нужное найти приходится непродуктивно потратить массу времени.
    Думаете это повышает посещаемость?
    Вряд-ли.
    Если бы было меню — лично я заходил бы гораздо чаще.

  21. Александр

    Здравствуйте я студент и у меня сайт написан полностью php как мне быть я не могу привязать не чего!

  22. krig

    Урок отличный. Только разъяснение по вопросу Ирины о скачивании jQuery надо включить в текст урока. Я тоже не сразу понял — нажимаешь «скачать», а вместо этого открывается какой-то текстовый файл.

  23. Эдуард

    Спасибо за урок!
    «Прикрутил» на Ucoz, всё работает!
    Жду новых уроков!

  24. Sabov

    Откуда беруться файлы files/1.jpg и files/2.jpg? Скриншоты? Если да то может можно как-то автоматизировать это?

    • Андрей Кудлай

      В видео версии урока я говорю о том, что заранее подготовил картинки. Это могут быть любые картинки — просто логичнее, если они как-то будут связаны с роликами. По последнему вопросу не совсем понял — что именно автоматизировать? Процесс создания скриншотов? Если я верно понял — то это нельзя автоматизировать. Да и что тут автоматизировать? Нажал кнопку «PrintScreen», вставил снимок в графический редактор, обрезал до нужных размеров и все.
      Если же процесс добавления кода для каждого нового ролика — то можно. В моем новом уроке по созданию галереи фотографий мы как раз и пишем скрипт, который будет генерировать код каждого нового добавляемого изображения самостоятельно, нам же останется только добавлять картинки в соответствующие папки.

  25. Sabov

    Я имею ввиду автоматизацию получения скриншотов. Как я понял такой модуль доступен в платном акаунте этого плеера.
    Если нужно добавить одно или два видео в месяц то сделать скриншот самому не проблема, но если их будет сотня в день то это будет убивать кучу времени.

    • Андрей Кудлай

      Нет, скорее всего это не так и в PRO-аккаунте нет такой функции (все возможно платного аккаунта перечислены в возможностях плеера), чтобы за пользователя делался скриншот. Честно говоря, такую функцию мне даже сложно представить. В бесплатной версии можно во вкладке «Опции» установить заставку для плеера, но в любом случае картинку для заставки нужно делать самому — никто ее за Вас делать не будет.
      Да и сама идея галереи не позволяет это реализовать, поскольку сам плеер мы не показываем изначально — он скрыт. Мы показываем только обычную картинку, которую, уж придется постараться сделать самому (лень картинку делать — тогда просто ссылку можно прописать). И только по клику на эту картинку нам показывается сам плеер.

  26. Андрей Кудлай

    Ну вот и замечательно — у Вас появился шанс доделать галерею под свои нужды. Правда из указанного примера сложновато что-то понять… но, бегло просмотрев, я так понял, что:
    1) необходимо устанавливать на сервер дополнительную библиотеку… это уже, лично мне, не подходит;
    2) особо не вникал, но, насколько я понял из названия, скрин можно сделать только из формата flv… а если будет другой формат?
    3) используя эту функцию мы, скорее всего, получаем картинку в масштабе 1:1, т.е., нужно писать еще код, который бы ресайзил полученное изображение.
    Итог: урок из 30-минутного видео плавно перетекает в видео с n-ым количеством часов :) Да и сравнивать урок продолжительностью в 30 мин с такими масштабными проектами как ютюб или вконтакте, думаю, не совсем корректно… эти проекты — плод работы целой команды программистов. И цели у галереи из урока и указанных проектов немного другие. В галерее есть создатель, который заливает видео и картинку к нему на сервер. На ютюбе видео может заливать любой пользователь. Т.е., тогда нужно было бы еще дописать код для добавления файла видео на сервер и только в процессе этого добавления создавался бы скриншот… это еще плюс n-ое количество часов к уроку.
    В общем, если Вы сделаете такую галерею самостоятельно (проект получится сродни ютюбу) — я за Вас с удовольствием порадуюсь… кстати, если сделаете — ссылочку киньте ;)

  27. Павел

    Спасибо большое за урок.Всё хорошо рассказываете,но у меня не получилось.Итак,в тотал командер в localhost/www/ создаю папку video.В ней создаю папку files и копирую туда моё видео(video1).Скачиваю плеер,и копирую его в localhost/www/video.Создаю стили,скачиваю и копирую в localhost/www/video.Вроде всё как по видео.Открываю Rapid PHP,нажимаю файл-*новый*,и то что написано HTML сохраняю как:video/files. Вставляю код моего видео(video1) между BODY и сохраняю.У меня получается в localhost/www/video четыре папки:files,uppod,index,video 73-1317. Открываю плеер,(localhost/video) и вижу белый экран. Проверял код вроде всё правильно,номер стиля,размеры видео. Подскажите,пожалуйста,где ошибка?

  28. Ирина

    Добрый день, Андрей!
    Спасибо вам за урок!
    Мне нужна была только первая часть урока. Все получилось, но в ie8 видео не показывается. Тогда я попробовала посмотреть ваши файлы и оказалось, что тоже видео не отображается.

    • Андрей Кудлай

      Добрый день, Ирина!
      Пожалуйста ;)
      Был настолько удивлен тем, что не показывает в IE 8, что даже установил себе этот браузер, чтобы посмотреть в чем может быть причина. Причину искать не пришлось, поскольку у меня все ок в IE 8. Может быть Вы где-то ошиблись при установке? В других браузерах все показывает?
      Для теста достаточно разархивировать исходники и папку video поместить на сервер, а затем обратиться по адресу localhost/video/ Если выкладываете на сервер хостера — тогда localhost меняете на имя домена.

  29. Meph

    Тюкался-тюкался с юкозом, ничего не получилось.Если создать отдельную страницу html — то пашет , а если же создать средствами юкоза страницу под галлерею с собстевнным шаблоном, то получится вот такая вот шляпа warlocks.ru/index/mmmm/0-42

  30. Lavr

    Мда , очень эфектно!
    Скажите пожалуйста Андрей, я создаю сайт на joomla
    -можно подобную видео галлерею сделать на этом движке ? !
    -нужно ли для этого устанавливать какие то дополнительные расширения?!
    -сколько максимально по времени может длиться видео клип?!
    Спасибо!

    • Andrey Bernacki

      В джумле не очень силен, но уверен что можно. Кроме того, что описано в уроке ничего не нужно. А видео клип может длится сколько угодно, только большие и тяжелые клипы не всем удобно и дешево смотреть))

    • Андрей Кудлай

      Все как и сказал Андрей Бернацкий, все можно. С джумлой работал постольку поскольку, но ничего сложного быть не должно… главное — верно указать пути к видеофайлам и файлам плеера. Дополнительных расширений никаких не нужно.

  31. Виктория

    Целый день убила — ничего не получилось!
    Плеер создала, видео загрузила, вставила код в заметку на блоге — плеер отображается в исходном размере (640х510), работает. А дальше что?
    Закинула в корневую папку сайта папку видео со всем содержимым, как у вас. Ничего не меняется.
    Как сделать, чтобы это все заработало на блоге? Что мне делать с этой отдельной html страницей? Подскажите!

    • Андрей Кудлай

      С html страницей ничего делать не нужно. Если Вы хотите вставить видео в статью на блоге, то необходимо сделать следующее по пунктам (я так понял, что блог на CMS WordPress):
      1) в файле header.php прописать подключение плагина fancybox и библиотеки jQuery, если они еще не подключены сторонними плагинами;
      2) в том же файле написать скрипт вызова fancybox;
      3) залить файл плеера, файл стилей плеера, ролики для плеера;
      4) вставить код вывода ролика в статью, при этом ВЕРНО указав пути к видео, плееру, файлу стилей.
      Если видео не будет проигрываться, значит неверное прописаны пути.
      Сейчас зашел на Ваш блог и сразу в разделе видео увидел, что пути прописаны так, как в уроке… пути должны быть прописаны относительно Вашего домена, т.е. вместо localhost указываете Ваш домен и далее путь к файлу плеера, стилей и видео.

      • Виктория

        Спасибо, что ответили.
        Всё сделала как Вы сказали. Вставляю код в статью, появляется большой статичный экран созданного мною плеера, всё работает, но галереи нет, т.е. нет миниатюрных анонсов. Раз плеер работает, значит пути прописаны правильно.
        Всё убрала, оставила так, как было раньше. Эта задачка оказалась мне «не по зубам».

        • Андрей Кудлай

          Пожалуйста ;)
          «Раз плеер работает, значит пути прописаны правильно»… почти правильно… раз плеер работает — это означает, что правильно прописаны пути только к плееру, но отнюдь не означает, что верно указаны пути к другим составляющим. Можете сделать тестовую страницу с видеогалереей и дать ссылку — попробую помочь.

          • Виктория

            У меня галерея не получилась и я сделала плеер с плейлистом. Мне так тоже нравится. Но возникла другая проблема — не проигрывается плейлист. Прописала туда видео с youtube, но проигрывается только первое видео в списке, а остальные не работают.
            Не подскажете, что надо сделать, чтобы проигрывался весь список?
            Вот пример: vita-schola.ru/pritchi-o-zhizni
            А если Вам не трудно, не могли бы Вы со мной по скайпу пообщаться — так быстрее будет решить проблему. Мой логин v-king313

          • Виктория

            Ура! С плеером я разобралась и у меня всё получилось! Я написала в support и они мне исправили ошибку.
            В любом случае, спасибо Вам за урок и поддержку.

  32. Евгений

    Красава!Спасибо за действительно интересное и дельное описание создания видеогалереи.Огромное спасибо.

  33. GIKO

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

  34. Елена

    А возможно сделать без плеера? Вставлять видео с Ютуба.

    • Андрей Кудлай

      Почему нет? Конечно можно. Заливаете видео на YouTube, получаете ссылку на публикацию видео и размещаете в нужном месте Вашего сайта.
      Этот способ проще, но простота вносит свои недостатки:
      1) видео расположено на стороннем сервере;
      2) возможности ограничены возможностями плеера, предоставляемого сторонним сервисом.

  35. Andrii

    Мне очень понравилось как ты выложил этот материал. Я его теперь попробую использовать на моём сайте.

  36. Павел

    Только звук — изображения нет

    • Андрей Кудлай

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

  37. Павел

    Увы, я полный чайник))) Как обновить кодеки? На uppod, идя по ссылке «Ваша версия кодека находится тут» налетаю на редирект на корень uppod(((

    • Андрей Кудлай

      Кодеки нужно обновить в том случае, если Вы скачали видео себе на компьютер и не можете просмотреть его через плеер.
      Вариант со скачиванием и просмотром видео на компьютере наиболее удобен и оптимален.
      Также, возможно, не помешает обновить flash-плеер, это можно сделать здесь — http://get.adobe.com/ru/flashplayer/
      После всех обновлений, возможно, потребуется перезапустить браузер.

      • Павел

        На компе я все вижу. Сконструировал плейер uppod — закачал, сделал пагу, прописал код. Открываю пагу в инете — на плейере выскакивает предупреждение — «Внимание, настройки не закодированы» — «не закодированы» залинкованы на пагу uppod.ru/player/faq/nocoded — на ней линк на uppod.ru/player/codec — с нее редирект на uppod.ru — вуаля

  38. Павел

    А-а-а-а-а. Кажется допер))) Это на компе хостера кодеки обновлять надо. Так?

  39. Андрей Кудлай

    Блин, так это не с проигрыванием урока у Вас проблемы, а с Вашим видео? Ну так проблема тогда в том, как Вы его кодируете или не в том формате выкладываете (лучше всего формат flv). Внимательно почитайте FAQ на сайте Uppod.
    Кодеки на компе хостера здесь абсолютно не при чем. Для проверки работоспособности можно скачать видео с youtube и разместить у себя.
    P.S. Что такое «пага» вообще не понял )))

  40. Павел

    Андрюш, я конечно чайник, но не до такой же степени))) Видео в mp4 сконвертировано. А что значит неправильно кодирую? Все в соответствии с твоим уроком сделал. Пага — страница (page))))

  41. Павел

    Так видео-то в mp4 — это же приемлимый формат — мне сам проигрыватель сигнализирует что «Внимание, НАСТРОЙКИ не закодированы» Не, ну делать-то что? Я проект-то вполне серьезный затеял — уперся в ерунду. Может скинешь асю на мыло, договоримся на возмездной основе — всмысле разберешься)))

    • Андрей Кудлай

      Я уже говорил что делать — посмотреть FAQ на сайте Uppod. По запросу «настройки не закодированы» саппорт отвечает, что проблема связана с тем, что плеер не может открыть файл стилей. Проверьте внимательно ссылку на файл стилей и что открывается по этой ссылке у Вас… должен открываться именно файл стилей (не страница).
      Давайте общение дальнейшее перенесем на наш форум, он больше подходит для решения проблем, а комментарии оставим для отзывов. На форуме можно и код выложить и скрин, если что.

  42. ыгтлн

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

    • ыгтлн

      там код оно съело, вообщем ДИВ ДИСПЛЕЙ : НОНЕ…оно скрывает видео в том числе внутри модального окна (которое открывается пустым в этом случае), а без ДИВ ДИСПЛЕЙ НОНЕ все работает, но видео также отобрадено и вне модального окна там, где прописан ОБДЖЕКТ

  43. ыгтлн

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

  44. Кирилл

    Урок просто супер! Спасибо за Вашу работу и за этот прекрасный сайт! :-)

  45. Анастасия

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

  46. Андрей

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

    • Андрей Кудлай

      Выбрать соответствующую опцию при генерации плеера. Находится она в Опции-Загрузка-Автозапуск. Если не ошибаюсь, то я об этом упоминал в видео.

  47. Роман

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

  48. alex

    Ну на локальном сервере все круто выглядеть! А вот как,допустим , эту галерею на форум себе вставить?? вот например на этот .2x2forum.com

  49. Роман

    Здравствуйте, подскажите: установил мобильный шаблон отсюда https://github.com/dpolyakov/uCoz-pda, но видео отображается больше чем сам шаблон когда заходишь с мобильного. Мне посоветовали:
    нужно прописать по видео в мобильной версии, в стили пда шаблона добавьте следующие стили:

    .entry iframe {max-width: 100%;}
    Что именно нужно прописывать и в каком месте? Только эту строчку или там еще что то нужно писать?

    • Андрей Кудлай

      Здравствуйте, Роман.
      Для начала нужно использовать новую версию FancyBox. Без этого одним правилом здесь не обойтись. Ну а само правило, если оно сработает конечно (в чем я сомневаюсь), нужно добавить в файл стилей. Только правило нужно добавлять для конкретного элемента (у Вас оно непонятно откуда взято).

  50. Роман

    Для меня чайника это слишком заумно, а что если убрать видео из моб версии? Думаю оно там не особо нужно? Это возможно, если да то как?