Как сделать чтобы плеер был на сайте

Добавлено: 27.01.2018, 01:51 / Просмотров: 63461

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

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

Так как же вставить видео на сайт?

Вставить видео на сайт можно  разными способами, я бы хотел остановиться на трех из них:

 

СПОСОБ 1: Использовать сервис RuTube

Чтобы использовать данный сервис, необходимо сначала там зарегистрироваться. Для этого пройдите по ссылке http://rutube.ru/register.html и введите все необходимые данные.

После успешной регистрации, пройдите по ссылке "Залить видео" в верхней части экрана:

как добавить видео на сайт Rutube

Рис 1. Как залить видео на Rutube


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

процесс добавления видеоролика

Рис 2. Форма добавления видео на Rutube


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

Рис 3. Забираем код плеера на Rutube


Копируем код плеера, и вставляем к себе на сайт, в то место, где бы мы хотели видеть данный плеер. Если все сделали верно, то должен появиться плеер, с загруженным Вами видеофайлом. Размеры самого плеера можно поменять, они задаются в исходном коде плеера, параметрами height - высота и width - ширина.

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

Как вставить видео на сайт с помощью сервиса RuTube мы разобрались.

 

СПОСОБ 2: Использовать сервис YouTube

Первым делом необходимо зарегистрироваться. Здесь иногда возникают проблемы. Если у Вас при попытке зарегистрироваться выдает ошибку мол "Извините. На основании информации, которую вы нам предоставили, вы не можете зарегистрироваться на YouTube.com" то возможны следующие пути решения:

  1. При регистрации возраст указывайте более 18 лет, говорят мол у них там ограничения какие-то.
  2. Если не помогло, то попробуйте зарегистрироваться используя другой браузер. Я, например, не смог зарегистрироваться через браузер Opera, а используя Internet Explorer зарегистрировался без проблем.

После успешной регистрации, переходим по ссылке Добавить Видео, в правом верхнем углу :

как вставить видео на сайт

Рис 4. Добавляем видео на YouTube


Появляется форма, где используя кнопку Обзор можно загрузить видео со своего компьютера, размер которого не должен превышать 1 Гб:

Рис 5. Форма добавления на YouTube


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

Теперь в верхней части экрана, нажимаем на свой ник(логин под которым Вы зарегистрировались), выбираем "Мое Видео", затем жмем на уменьшенное изображение видео, и на открывшейся странице в правом верхнем углу копируем HTML код плеера, который затем вставляем к себе на сайт:

добавление видео на сайт

Рис 6. Забираем код плеера с YouTube


Вот как выглядит плеер от сервиса Youtube .

Думаю как вставить видео на сайт используя YouTube тоже понятно. Размеры плеера аналогично как и в первом способе задаются атрибутами height и width .

 

СПОСОБ 3: Используя сервис uppod.ru

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

Плеер сделанный данным способом не содержит намеков на то, что это чей то плеер(в предыдущих способах в плеерах видно что это мол Rutube или Youtube) . И еще, обратите внимание, что после окончания проигрывания видео в предыдущих двух способах, внутри плеера появляются предложения посмотреть другие видео на этих сайтах, т.е. возможна ситуация, когда ваш посетитель заинтересовавшись уйдет на этот самый YouTube или RuTube. И наконец, такой плеер будет меньше тормозить,т.к. видео грузится с Вашего сайта.

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

Как обычно, все начинается с регистрации. После нее делаем следующее:

  1. Создаем в корне вашего сайта(там где лежит главная страница) три папки: video, styles, и player .
  2. Скачиваем файл плеера, нажав по ссылке " Скачать плеер" в левом верхнем углу.
  3. Распаковываем скачанный архив, берем оттуда файл плеера uppod.swf и закачивем в папку player на нашем сайте.
  4. После этого, зайдя в свой аккаунт, переходим в верхнем меню на вкладку "Мой Плеер" и Нажимаем "Видео" .
как вставить видео на сайт с помощью uppod.ru

Рис 7. Вкладка "Мой плеер" - "Видео"


  1. Появится меню из трех пунктов Стили, Файлы и Плейлисты. Для начала нажимаем на Стили а потом на + (добавить) . Появится форма. в которую нужно ввести название стиля и нажать кнопку сохранить. Дальше появляется сам визуальный редактор, в котором мы и делаем необходимые настройки. После создания собственного стиля, жмем на кнопку сохранить, вновь переходим на вкладку "Мой плеер" - "Видео" - "Стили" выбираем наш стиль и скачиваем его.
как добавить видео на сайт

Рис 8. Скачивание стиля плеера


  1. Теперь скачанный файл стиля нужно закачать к нам на сайт, в папку styles.
  2. В папку video у нас на сайте, нужно закачать наш видеофайл, у меня это файл prikol.flv .
  3. Теперь переходим во вкладку Файлы, нажимаем на + и добавляем свой файл, указывая название, ссылку и стиль, в моем случае это выглядит так:
добавление файла в плеер uppod

Рис 9. Добавление файла для проигрывания


  1. Теперь необходимо проверить правильность путей. Для этого перейдите по ссылке "Настройка путей" в левом верхнем углу. Для моего случая пути прописаны так, у Вас конечно вместо zvirec.com будет что-то другое:)
Правильные пути для добавлени видео на сайт

Рис 10. Настройка путей


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

  1. Ну и наконец чтобы забрать код, переходим в подменю "Файл" нажимаем на наш видеофайл, в данном случае "прикол", затем выбираем "Код" и копируем HTML код с полной поддержкой IE . Данный код вставляем на страницу сайта, где мы хотим видеть данный плеер.

Рис 11. Забираем код плеера с UPPOD.RU


Вот как выглядит данный плеер:

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

 

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

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

Есть вопрос? Получи ответ на ФОРУМЕ ПОДДЕРЖКИ

 Создан: 2009-01-30      Просмотров: 221608      Автор:Андрей Галямов

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

Автор: Евгений
Дата : 2009-01-31

Спасибо Андрей за этот огромный урок. Это то, что мне было нужно.

Автор: Иван
Дата : 2009-01-31

Спасибо, за урок.

Автор: vol110
Дата : 2009-01-31

классно

Автор: Евгенийс
Дата : 2009-01-31

Спасибо!!!!!!!!!!

Автор: Nina
Дата : 2009-01-31

Спасибо! Супер! (я искала flash menu builder,е-рый вызывается с сайта), здесь, по сути, нечто подобное, да еще несколько вариантов!

Автор: Анастасия Коновалова
Дата : 2009-02-01

Спасибо Вам большое, это как раз то что мне нужно.

Автор: Игорь
Дата : 2009-02-02

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

Автор: Владимир
Дата : 2009-02-02

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

Автор: andrij-ka
Дата : 2009-02-02

Cупер!!! то что надо

Автор: Наталья
Дата : 2009-02-04

Огромное Спасибо! Полезно, разумно, удобно. Системно и точно.

Автор: Bars
Дата : 2009-02-11

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

Автор: Валентина
Дата : 2009-02-15

Спасибо, Андрей! Очень мне нужен этот урок и вовремя.

Автор: AHTOXA
Дата : 2009-02-22

Спасибо, Андрей!

Автор: Максим
Дата : 2009-02-28

Не устаю удивляться, нахожу на этом сайте все, что интересует.

Автор: Карен
Дата : 2009-03-16

Добрый день, Андрей. Не подскажете, как быть? С RuTube у меня никаких проблем не было. Всё загружается. А вот с Uppod появились - ролик не загружается. Спасибо за уроки) С уважением, Карен Арутюнянц.

Автор: marina
Дата : 2009-03-25

blin nu nicego neponjala..:((

Автор: Александр
Дата : 2009-03-31

пасиба, за урок, долго искал как создат ьи засунуть свой плеер, но у меня вопрос, на некоторых сайтах имеется web-DivX плеер и качество там лютое, смотришь как у себя в плеере на компе, как можно такой плеер и где его достать(код там и прочее) ??? пример онлайн плеера: http://kino-online-dts.ru/ просто хочу на своём сайте держать качественное видео) если можно расскажите что знаете об этом плеере и как его можно установить на свой сайт

Автор: Гаджи
Дата : 2009-05-10

На сайте www.3dmir05.ucoz.ru Можно тоже добавить видео на сайт

Автор: Мария
Дата : 2009-05-25

Автору статьи ГРОМАДНЕЙШЕЕ спасибо!!!! Спасибо за ее размещение!!!! Мне все очень помогло.

Автор: Анастасия
Дата : 2009-05-27

Автору ОГРОМНОЕ спасибо ! Безумно полезная статья, написана очень понятным языком, справится даже новичек ! Ещё раз СПАСИБО !!!

Автор: Александр
Дата : 2009-06-11

Большое спасибо за столь подробное описание, я думаю что даже " Чайнику " сам разберется. Большое спасибо!!! Удачи Вам!

Автор: lyuba
Дата : 2009-06-19

В третьем способе даже у вас на странице не отображается плеер

Автор: Алексей
Дата : 2009-06-23

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

Автор: Vft
Дата : 2009-06-28

Все на Видео конструктор http://3dmir05.ucoz.ru/index/0-61

Автор: Сергей
Дата : 2009-06-29

Вы не поверите но всё получилось

Автор: Денис
Дата : 2009-07-02

Данный код вставляем на страницу сайта, где мы хотим видеть данный плеер. ??? Это куда??Если у меня Ucoz то это через панель управления??

Автор: Денис
Дата : 2009-07-02

аа все разобрался!!! А как сделать чтобы нажать на оопределенную надпись(видео) и тебе сразу это видео началось воспроизводить??

Автор: Павел
Дата : 2009-07-17

Андрей, а есть ли какой-нибудь способ не пользоваться хостингами третих лиц а сделать все своими ручками? ведь есть же замечательные тэги object и embed

Автор: Мистер
Дата : 2009-07-22

ЛЮДИ если у вас UCOZ или неееетт то вам сюда http://3dmir05.ucoz.ru/Konstructor/Videokonstruktor.htm очень удобный конструктор во всем!!! и бесплатный !

Автор: Мистер
Дата : 2009-07-22

ну хотябы зацените его ((((((((((((((( не кто его не любит )))

Автор: Пашко
Дата : 2009-07-26

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

Автор: Slon29
Дата : 2009-08-07

спасибо огромное андрей как всегда обьяснил как никто

Автор: айрат
Дата : 2009-09-12

Всё отлично,но, что касается 3-го урока: никак плеер не хочет видеть файл(пробовал в разных форматах),а так же пл.лист! не знаю что делать!=((((((

Автор: Дмитрий
Дата : 2009-09-21

Спасибо :)

Автор: Дмитрий
Дата : 2009-09-22

"Автор: айрат Дата : 2009-09-12 Всё отлично,но, что касается 3-го урока: никак плеер не хочет видеть файл(пробовал в разных форматах),а так же пл.лист! не знаю что делать!=((((((" Что бы не было подобных глюков нужно вставлять ссылки на сайт, например "http://turbo-pascal1993.narod.ru/Audio/2/10.mp3", если ввести ссылку, например "http://narod.ru/disk/13393583000/1.mp3.html" то проигрыватель не сможет найти данный файл

Автор: Света
Дата : 2009-11-11

у меня пишет ошибка доступа к стилям, не подскажите что делать?

Автор: Нияз
Дата : 2009-11-17

Про то то что можно воровать ссылки и всатвлять на сайт это я заню!А вот как вставить видео в свой проигрыватель!?

Автор: Андрей
Дата : 2009-11-30

Прикольное видео!!!) Андрюха, ты молодец!!!!

Автор: Анжела
Дата : 2009-12-02

Пожалуйста, еще раз объясните, что делать если на плеере появляется надпись - файл не найден

Автор: калян
Дата : 2009-12-02

спасибо

Автор: Григорий
Дата : 2009-12-27

Пасиб

Автор: Дмитрий
Дата : 2010-01-04

Объясните в чем причина-ставю в блоге код на страницу а плеер не показывается в чем может быть ошибка!!! Я пока тренируюсь на локальном сервере! Подскажите пожалуств может что я неправильно сделал!!????

Автор: Рустам Душаев
Дата : 2010-01-06

Андрюха, спасибо! То что нужно! Зачет!

Автор: Владислав
Дата : 2010-01-23

Сделал все как написано в 3-м способе. Скачал именно код для IE. Но ничего не показывает. При этом Опера номрально все показала без глюков. Я бы забил на проблему, но целевая аудитория сайта в основном использует Ишака. В чем может быть пробелма? Может быть отказаться от стилей?

Автор: Владислав
Дата : 2010-01-23

Еще одно дополнение, Сейчас загрузил эту тсраничку в IE и видео пример тоже не пашет. Может это что-то в настройках?

Автор: Владислав
Дата : 2010-01-23

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

Автор: LynxBIT
Дата : 2010-01-26

Андрей, спасибо за материал. А вот у меня такой вопрос, как сделать так же? http://www.zvirec.com/uro ki_onlain/firebug/index.html

Автор: Рысик
Дата : 2010-02-27

Автор, Большое Человеческое Спасибо!!

Автор: Максим
Дата : 2010-03-16

Спасибо огромнейшее Вам, Андрей! Вы очень мне помогли!

Автор: Сергей
Дата : 2010-03-24

поставил себе на сайт видео, в опере показывает а в ехплорере нифига, грят что надо еще какой то модуль ставить!!!

Автор: Роман
Дата : 2010-04-02

биг спс кул мануал

Автор: Roman-mix-pro
Дата : 2010-04-10

а как сделать только с аудио форматом, мр3

Автор: коля
Дата : 2010-05-05

супер

Автор: Axio
Дата : 2010-05-07

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

Автор: Алексей
Дата : 2010-05-08

А если у меня локальный сервер то будет плеер работать (т.е у меня в путях ща стоит без домена типо com/ru и дт.) ? И еще вопросик без разници какой формат видио (т.е если после названия файла дописать .avi то все норм будет) ? Очень прашу хоть ктонить ответте хотя бы на 1 вопрос(

Автор: Aivar
Дата : 2010-05-12

Thanks

Автор: саня
Дата : 2010-05-17

http://depositfiles.com/files/ y5rj6d5t3

Автор: BEt
Дата : 2010-05-24

делаю все как показано ибо проще объяснить нельзя. 3-м вариантом пытаюсь сделать пишет файл не найден. в чем может быть проблема... пересмотрел все. ошибок не должно быть. ответьте на почту плиз

Автор: Leon
Дата : 2010-06-05

Спасибо за пояснения! Но у меня не получается разместить видео в формате - MPG, и других.....как поступить?

Автор: Alex
Дата : 2010-06-18

супер!! автор, спасибо большое!!

Автор: jake
Дата : 2010-06-21

через мейл как вставить

Автор: Надежда
Дата : 2010-06-25

У меня третьим способом выдает:Ошибка загрузке video51-340.txt :-) Это файл загрузки стиля, что делать? :-)

Автор: Надежда
Дата : 2010-06-25

Мой адрес: :-)

Автор: cfif
Дата : 2010-06-26

http://csworldnet.ucoz.ru/

Автор: Нина
Дата : 2010-06-30

Спасибо Андрей! Все что надо, можно найти у тебя на сайте, ты как будто читаешь мысли!!!

Автор: Никита
Дата : 2010-07-10

Сенкью :)

Автор: Felen
Дата : 2010-07-17

Спасибо, молодец, автор!

Автор: STUDENT-AS.NAROD2.RU
Дата : 2010-07-21

СУПЕР!!!!!!!!!!!!!!!!!!!!!!!!! !ВОТ ЭТО ЧЕЛ!!!!!!!

Автор: серега26
Дата : 2010-07-30

все сделал как положено,но при открывании страницы пишет-"файл такой-то не найден",может это от того что сайт еще не проиндексирован поисковиками?????а с рутубом все работало!!!! жду ответа на

Автор: Кир
Дата : 2010-08-20

Огромное спасибо!) Какой раз вы меня спасаете) 1 вопрос - что на счёт плэй листов?

Автор: Антон
Дата : 2010-08-26

у меня тупо код отображается вместо плеера, ппц, устал))

Автор: Александр
Дата : 2010-09-06

Спасибо за идею и объяснения!!!

Автор: Андрей
Дата : 2010-09-08

Спасибо)

Автор: Евгений
Дата : 2010-09-15

Спасибо

Автор: Дмитрий
Дата : 2010-09-27

Как правило никогда не комментирую ничего, в целях экономии времени, однако данный урок - замечательный, полезный, очень удобный и понятный! Большое спасибо за него, ценные знания всегда приятно получить бесплатно. p/s: уже кликнул на рекламу от гуга))) для поддержки сайта:) Успехов, больших успехов желаю

Автор: Дмитрий
Дата : 2010-10-05

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

Автор: Дмитрий
Дата : 2010-10-05

Помогите кто нибудь)) время поджимает

Автор: gater
Дата : 2010-10-12

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

Автор: Юрий
Дата : 2010-10-13

Сделал как написано. Делал мозиле. http://www.kondach.ucoz.ru/pho to/produkcija/mebel/krovat/11- 0-26. На youtube работает. третий способ - нет. видео просто не отображается. В итоге пришлось вернуться к ютубу. Пробывал сначала файл avi. Ничего не получалось. Скачал конвентор avi to flv. И тогда по крайне мере на http://uppod.ru/player/my/ стал мой ролик отображаться. По поводу моего сайта.... я думаю дело именно в укозе. Единственное что я помеял - это когда получаешь когда получаешь код, снял галочку показывать похожие ролики. И по завершению ролика не появляются похожие чужие ролики.

Автор: Юрий
Дата : 2010-10-13

http://www.kondach.ucoz.ru/pho to/produkcija/mebel/krovat/11- 0-26

Автор: Юрий
Дата : 2010-10-13

Попробую кому-нибудь помочь. 1. Автор: gater Дата : 2010-10-12 Тебе надо изучать создание сайтов с нуля. Т.к. чтобы создать папки на сайте, нужно зайти на сайт через ftp. А я так понимаю ты даже не представляешь что это такое. 2. Автор: Дмитрий Дата : 2010-10-05. Напишите ваш сайт и email. Попробуем вам помочь. 3. Автор: Антон Дата : 2010-08-26 Скорей всего ты не вставил какие-нибудь скобки из кода вставки, или попробуй обновить flash-плеер. Если кому-то ещё нужна будет помощь - пишите.

Автор: fankymonkey
Дата : 2010-10-14

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

Автор: Елена
Дата : 2010-10-19

Спасибо за урок! То, что надо! Только в 3-ем варианте выдает: Ошибка загрузки video59-506.txt. На самом сайте все в порядке. Подскажите, пажайлуста, в чем может быть ошибка.

Автор: Елена
Дата : 2010-10-19

Спасибо за урок! То, что надо! Только в 3-ем варианте выдает: Ошибка загрузки video59-506.txt. На самом сайте все в порядке. Подскажите, пажайлуста, в чем может быть ошибка.

Автор: Елена
Дата : 2010-10-19

Спасибо за урок! То, что надо! Только в 3-ем варианте выдает: Ошибка загрузки video59-506.txt. На самом сайте все в порядке. Подскажите, пажайлуста, в чем может быть ошибка.

Автор: naonline
Дата : 2010-10-22

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

Автор: Андрей
Дата : 2010-10-22

ТулБар сервиса Uppod видоизменился

Автор: Санёк
Дата : 2010-10-25

Спасибо Андрей урок реально нужный, но You Tube Ru Tube это не важно вот про Uppod нужно

Автор: Toma
Дата : 2010-10-28

Спасибо огромнейшее за урок! все доступно, у меня сразу все получилось с первого раза!!

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


Источник: http://zvirec.com/view_post.php?id=28


Поделись с друзьями



Рекомендуем посмотреть ещё:


Закрыть ... [X]

Лайфхак как сделать свой плеер из плеера YouTube. Читайте на Укладка на очень короткие волосы в домашних условиях


Как сделать чтобы плеер был на сайте Как сделать чтобы плеер был на сайте Как сделать чтобы плеер был на сайте Как сделать чтобы плеер был на сайте Как сделать чтобы плеер был на сайте Как сделать чтобы плеер был на сайте Как сделать чтобы плеер был на сайте Как сделать чтобы плеер был на сайте

ШОКИРУЮЩИЕ НОВОСТИ


Back to Top