Как создать красивый видеоплеер при помощи html и разместить его на своем сайте

2 голоса

Здравствуйте, уважаемые читатели. Учиться по статьям из интернета довольно сложно. Сейчас я испытал все великолепие этого метода на себе. Сто раз я задавал себе вопрос: «Неужели так сложно объяснить зачем я делаю те или иные действия? Ведь так значительно проще понять почему у меня не получается добиться должного эффекта!».

Я вам немного завидую. Сейчас я собираюсь написать исчерпывающую статью с детальным разъяснением. Если бы такая попалась мне 4 часа назад, я бы не потерял столько времени и уже давно бы пил чай с ватрушками.

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

Как создать красивый видеоплеер при помощи html и разместить его на своем сайте

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

Преимущества метода

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

Как создать красивый видеоплеер при помощи html и разместить его на своем сайте

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

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

Как создать красивый видеоплеер при помощи html и разместить его на своем сайте

Экономия места на хостинге – дело нешуточное.

И это не все преимущества. Помимо места, есть еще такой важный момент как скорость отдачи. На вашем хостинге он может быть небольшим, а у YouTube показатели впечатляют. Ролик точно не будет долго грузиться.

Свой дизайн

Итак, первым делом вам нужно зайти на официальный сайт https://uppod.ru и пройти несложную регистрацию. Не буду уделять этому вопросу много времени, сложности еще встретятся на нашем пути и таятся они не здесь.

Как создать красивый видеоплеер при помощи html и разместить его на своем сайте

После того как вы зарегистрировались нужно «Собрать плеер». Здесь вы можете создать свою аудио, видео или фото галерею. Щелкните по иконке с изображением того, что хотите добавить.

Как создать красивый видеоплеер при помощи html и разместить его на своем сайте

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

Как создать красивый видеоплеер при помощи html и разместить его на своем сайте

Тут очень простой визуальный конструктор.

Как создать красивый видеоплеер при помощи html и разместить его на своем сайте

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

Как создать красивый видеоплеер при помощи html и разместить его на своем сайте

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

Как создать красивый видеоплеер при помощи html и разместить его на своем сайте

Третья категория – «Кнопки», добавит элементы или удалит ненужные.

Как создать красивый видеоплеер при помощи html и разместить его на своем сайте

Если вы хотите иметь возможность создавать подборки с плейлистом, то это также можно сделать бесплатно. Четвертый пункт меню в помощь.

Как создать красивый видеоплеер при помощи html и разместить его на своем сайте

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

Читайте также:  Пошаговая инструкция по созданию интернет-магазина

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

Как создать красивый видеоплеер при помощи html и разместить его на своем сайте

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

Как создать красивый видеоплеер при помощи html и разместить его на своем сайте

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

Как создать красивый видеоплеер при помощи html и разместить его на своем сайте

Также вы можете создать свое аудио и точно также загрузить в конце в эту же папку «Player».

Как создать красивый видеоплеер при помощи html и разместить его на своем сайте

Подключение к сайту

Только что на HTML 5 вы создали внешний вид своего плеера. Однако, не все так просто. Вам нужно загрузить сам плеер Юпод себе на сайт, чтобы соединить скрипт программы с его внешним видом.

Чтобы было понятнее представьте, что у вас дома есть пластинка. Она черная, круглая, на ней есть наклейка зеленого или красного цвета. Ее внешний вид и есть стиль, который вы сейчас создали через сайт Юпод.

Но пластинку нельзя послушать без грамофона. Точно также, как ваш стиль нельзя использовать без плеера. Перейдите в меню «Собрать плеер» — «Скачать», как показано на рисунке.

Как создать красивый видеоплеер при помощи html и разместить его на своем сайте

Загрузите универсальную версию в свою заветную папочку «Player». Пока все это находится на вашем компьютере, а не на сайте. Продолжая простую аналогию объясню что требуется делать дальше, а именно принести граммофон туда, где вы собираетесь слушать музыку с пластинок. В одну и ту же комнату. В нашем случае – в одну и ту же папку сайта.

Как создать красивый видеоплеер при помощи html и разместить его на своем сайте

Все имеющиеся на данный момент файлы нужно поместить на хостинг. Я пользуюсь TimeWeb и настоятельно рекомендую, если эта статья вам поможет – переходите на него.

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

Ну а вообще, залить файлы на сервер можно через программу FileZilla или личный кабинет.

Как создать красивый видеоплеер при помощи html и разместить его на своем сайте

Я использую CMS WordPress – еще одно простое решение для новичков, но зная алгоритм не составит труда добавить плеер на любой другой движок. Открываете основную папку с сайтом, public_html и прямо здесь создаете еще одну папку player. Именно в ней и будет храниться все, что нужно для плеера.

Как создать красивый видеоплеер при помощи html и разместить его на своем сайте

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

Как создать красивый видеоплеер при помощи html и разместить его на своем сайте

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

Вам нужно объединить информацию о стиле, с информацией о плеере. На официальном сайте Uppod переходим в раздел «Документация» — «Интеграция». Здесь есть плагин, который подскажет как добавить соединение для WordPress, Joomla, Битрикс и даже Ucoz.

Скачиваю плагин.

Как создать красивый видеоплеер при помощи html и разместить его на своем сайте

Перехожу в панель администратора WordPress, открываю «Плагины», «Добавить новый» и загружаю только что скачанный архив.

Как создать красивый видеоплеер при помощи html и разместить его на своем сайте

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

Как создать красивый видеоплеер при помощи html и разместить его на своем сайте

Смотрите, каждый файл на хостинге можно отыскать по определенной ссылке. Все, что находится у вас в папке public_html можно отыскать по ссылке: адрес-вашего-сайта/название файла. Если файл располагается в папке, то URL будет адрес-вашего-сайта/название-папки/название-документа.

В раздел «Settings» вам нужно вписать путь до плеера, который мы скачали с официального сайта Юпод. Мы с вами разместили его в папку player, а значит ссылка будет выглядеть так: https://адрес-вашего-сайта/player/uppod.swf, где uppod.swf – название и расширение файла.

Читайте также:  Как быстро и бесплатно создать сайт визитку своими руками при помощи программы конструктора

Как создать красивый видеоплеер при помощи html и разместить его на своем сайте

Если вы собираетесь использовать только один стиль для видео, аудио и так далее, тот, который уже создали, то путь к файлу можно прописать здесь же, используя URL https://cx69575.tmweb.ru/player/video.txt при условии, что именно так называется файл со стилем, который вы создали через конструктор.

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

Как создать красивый видеоплеер при помощи html и разместить его на своем сайте

То же самое мы проделываем для аудио.

Как создать красивый видеоплеер при помощи html и разместить его на своем сайте

Как добавить видео

Если вы используете описанный выше способ и только один шаблон с дизайном, то добавить ролик в запись можно следующим образом. Выбираете «Добавить новую запись», переходите в режим текстового редактора, и вводите следующий код [uppod video=ссылка на ролик].

Как создать красивый видеоплеер при помощи html и разместить его на своем сайте

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

Как создать красивый видеоплеер при помощи html и разместить его на своем сайте

Чтобы все было грамотно можно обрезать видео по размеру в Camtasia. Эти и другие способы обработки роликов, а также массу информации о создании видео, вы можете узнать в курсе «Качественное видео в блог за час».

Как создать красивый видеоплеер при помощи html и разместить его на своем сайте

Важная информация

Если вы собираетесь использовать более одного шаблона и сделать все более грамотно, а не просто, то в папке player, вам нужно создать еще две папки. Одна будет с плэйлистами (playlist), а вторая со стилями (style).

Как создать красивый видеоплеер при помощи html и разместить его на своем сайте

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

Как создать красивый видеоплеер при помощи html и разместить его на своем сайте

Далее загружаете стиль в папку «Style».

Как создать красивый видеоплеер при помощи html и разместить его на своем сайте

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

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

Как создать красивый видеоплеер при помощи html и разместить его на своем сайте

В случае, если вы создали две эти новые папки, нужно кое-что поменять в коде плагина, загруженного на вордпресс. Снова возвращаемся в установленные плагины и жмем «Изменить юпод».

Как создать красивый видеоплеер при помощи html и разместить его на своем сайте

Нужно поменять путь до папки со стилями. Теперь он будет выглядеть так: https://cx69575.tmweb.ru/player/style.

Как создать красивый видеоплеер при помощи html и разместить его на своем сайте

Войдя на Юпод и перейдя во вкладку «Видео» — «Файл» вы можете добавить ролик. Щелкаете на плюс, вводите название ролика, вставляете ссылку на него, выбираете стиль и щелкаете «Ок». Будьте внимательны, выбранный стиль надо загрузить в папку стилей на хостинг, чтобы все отразилось.

Как создать красивый видеоплеер при помощи html и разместить его на своем сайте

Если вы хотите вставить ролик, загруженный на ваш сайт, но не можете отыскать ссылку, нужно зайти в раздел «Медиабиблиотека» и щелкнуть по эскизу с вашим роликом.

Как создать красивый видеоплеер при помощи html и разместить его на своем сайте

В правой части будет отображаться нужный URL.

Как создать красивый видеоплеер при помощи html и разместить его на своем сайте

Теперь щелкаем на код, рядом с клипом, который только что оформили и сохранили.

Как создать красивый видеоплеер при помощи html и разместить его на своем сайте

Копируем HTML — код. Обратите внимание, здесь есть также JavaScript, но это совсем другая история, о которой я расскажу в будущих статьях. Копируем html 5.

Как создать красивый видеоплеер при помощи html и разместить его на своем сайте

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

Как создать красивый видеоплеер при помощи html и разместить его на своем сайте

Готово. Ролик на сайте.

Как создать красивый видеоплеер при помощи html и разместить его на своем сайте

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

До новых встреч и удачи.

Комментариев к статье: 5

  • Наталья 2016-12-24 в 20:32

    Надо бы вставить какой-нибудь ролик в статью для наглядности.
    За инструкцию благодарю. :smile: :cool:

    • Андрей Зенков 2016-12-24 в 21:12

      Спасибо, Наталья. Планировал, да времени всё пока не хватает.

  • Марина 2017-02-18 в 21:02

    Здравствуйте! Случайно не знаете как убрать надпись в плеере снизу «The You Tube Flash API ………

  • Райм 2017-12-18 в 07:00

    У меня нет кнопки Изменить, что делать?

    • Виктор 2018-03-11 в 19:49

      такая же ситуация

Добавить комментарий

  • ;-)
  • :|
  • :x
  • :twisted:
  • :smile:
  • :shock:
  • :sad:
  • :roll:
  • :razz:
  • :oops:
  • :o
  • :mrgreen:
  • :lol:
  • :idea:
  • :grin:
  • :evil:
  • :cry:
  • :cool:
  • :arrow:
  • :???:
  • :?:
  • :!: