В последнее время добавление видео на сайт стало очень актуальным. На каждом третьем сайте в сети присутствуют видеоматериалы.
Люди добавляют к себе на странички видеоролики с описанием своих товаров или услуг, видеоматериалы потихоньку начинают использовать в качестве справки по тому или иному вопросу, появляются все больше и больше сервисов, предоставляющих возможности просмотра фильмов в режиме онлайн и.т.д. Короче говоря видео в сети процветает :)
Так как же вставить видео на сайт?
Вставить видео на сайт можно разными способами, я бы хотел остановиться на трех из них:
Чтобы использовать данный сервис, необходимо сначала там зарегистрироваться. Для этого пройдите по ссылке http://rutube.ru/register.html и введите все необходимые данные.
После успешной регистрации, пройдите по ссылке "Залить видео" в верхней части экрана:
Рис 1. Как залить видео на Rutube
Дальше Вам предложат заполнить небольшую форму, где Вы укажите описание для вашего видеоролика, категорию к которой он относится и выберите сам файл со своего компьютера, который Вы хотите загрузить, используя кнопку Обзор, причем этот файл не должен превышать размер 300 мб.
Рис 2. Форма добавления видео на Rutube
После заполнения всей формы и указания необходимого видеофайла жмем кнопку Загрузить. Когда загрузка файла закончится , необходимо подождать некоторое время, чтобы видео переконвертировалось в нужный формат. Спустя некоторе время, обновляем страницу, кликаем на изображение нашего ролика. Появляется окошко в котором можно посмотреть на то, что получилось, и забрать ссылку и код плеера. В данном случае нас интересует именно код.
Рис 3. Забираем код плеера на Rutube
Копируем код плеера, и вставляем к себе на сайт, в то место, где бы мы хотели видеть данный плеер. Если все сделали верно, то должен появиться плеер, с загруженным Вами видеофайлом. Размеры самого плеера можно поменять, они задаются в исходном коде плеера, параметрами height - высота и width - ширина.
Я загрузил небольшое видео этим способом, чтобы Вы посмотрели как выглядит плеер:
Как вставить видео на сайт с помощью сервиса RuTube мы разобрались.
Первым делом необходимо зарегистрироваться. Здесь иногда возникают проблемы. Если у Вас при попытке зарегистрироваться выдает ошибку мол "Извините. На основании информации, которую вы нам предоставили, вы не можете зарегистрироваться на YouTube.com" то возможны следующие пути решения:
При регистрации возраст указывайте более 18 лет, говорят мол у них там ограничения какие-то.
Если не помогло, то попробуйте зарегистрироваться используя другой браузер. Я, например, не смог зарегистрироваться через браузер Opera, а используя Internet Explorer зарегистрировался без проблем.
После успешной регистрации, переходим по ссылке Добавить Видео, в правом верхнем углу :
Рис 4. Добавляем видео на YouTube
Появляется форма, где используя кнопку Обзор можно загрузить видео со своего компьютера, размер которого не должен превышать 1 Гб:
Рис 5. Форма добавления на YouTube
После успешной загрузки , необходимо подождать некоторое время, чтобы видео перецифровалось в нужный формат.
Теперь в верхней части экрана, нажимаем на свой ник(логин под которым Вы зарегистрировались), выбираем "Мое Видео", затем жмем на уменьшенное изображение видео, и на открывшейся странице в правом верхнем углу копируем HTML код плеера, который затем вставляем к себе на сайт:
Рис 6. Забираем код плеера с YouTube
Вот как выглядит плеер от сервиса Youtube .
Думаю как вставить видео на сайт используя YouTube тоже понятно. Размеры плеера аналогично как и в первом способе задаются атрибутами height и width .
Данный способ отличается от предыдущих. В данном случае видео Вы будете хранить у себя на сайте. Также у Вас будет возможность настроить внешний вид плеера как Вам угодно, создавать свои плейлисты и еще много полезного.
Плеер сделанный данным способом не содержит намеков на то, что это чей то плеер(в предыдущих способах в плеерах видно что это мол Rutube или Youtube) . И еще, обратите внимание, что после окончания проигрывания видео в предыдущих двух способах, внутри плеера появляются предложения посмотреть другие видео на этих сайтах, т.е. возможна ситуация, когда ваш посетитель заинтересовавшись уйдет на этот самый YouTube или RuTube. И наконец, такой плеер будет меньше тормозить,т.к. видео грузится с Вашего сайта.
Как обычно, все начинается с регистрации. После нее делаем следующее:
Создаем в корне вашего сайта(там где лежит главная страница) три папки: video, styles, и player .
Скачиваем файл плеера, нажав по ссылке "
Скачать плеер" в левом верхнем углу.
Распаковываем скачанный архив, берем оттуда файл плеера uppod.swf и закачивем в папку player на нашем сайте.
После этого, зайдя в свой аккаунт, переходим в верхнем меню на вкладку "Мой Плеер" и Нажимаем "Видео" .
Рис 7. Вкладка "Мой плеер" - "Видео"
Появится меню из трех пунктов Стили, Файлы и Плейлисты. Для начала нажимаем на Стили а потом на + (добавить) . Появится форма. в которую нужно ввести название стиля и нажать кнопку сохранить. Дальше появляется сам визуальный редактор, в котором мы и делаем необходимые настройки. После создания собственного стиля, жмем на кнопку сохранить, вновь переходим на вкладку "Мой плеер" - "Видео" - "Стили" выбираем наш стиль и скачиваем его.
Рис 8. Скачивание стиля плеера
Теперь скачанный файл стиля нужно закачать к нам на сайт, в папку styles.
В папку video у нас на сайте, нужно закачать наш видеофайл, у меня это файл prikol.flv .
Теперь переходим во вкладку Файлы, нажимаем на + и добавляем свой файл, указывая название, ссылку и стиль, в моем случае это выглядит так:
Рис 9. Добавление файла для проигрывания
Теперь необходимо проверить правильность путей. Для этого перейдите по ссылке "Настройка путей" в левом верхнем углу. Для моего случая пути прописаны так, у Вас конечно вместо zvirec.com будет что-то другое:)
Рис 10. Настройка путей
В данном случае, мы не используем плейлисты и поэтому не создавали папку pl
Ну и наконец чтобы забрать код, переходим в подменю "Файл" нажимаем на наш видеофайл, в данном случае "прикол", затем выбираем "Код" и копируем HTML код с полной поддержкой IE . Данный код вставляем на страницу сайта, где мы хотим видеть данный плеер.
Рис 11. Забираем код плеера с UPPOD.RU
Вот как выглядит данный плеер:
Но так он выглядит с моим стилем, Вы же можете задать для него совершенно другой внешний вид, создав свой, подходящий под дизайн сайта, стиль.
Надеюсь что Вам понятно как вставить видео на сайт этим способом. Елси вдруг возникли какие-то вопросы, посмотрите еще внимательно этот видеоролик.
Ну что ж, я показал Вам три основные способа добавления видео на сайт . Выбор уже за Вами ...
Спасибо Андрей за этот огромный урок. Это то, что мне было нужно.
Автор: Иван Дата : 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-м вариантом пытаюсь сделать пишет файл не найден. в чем может быть проблема... пересмотрел все. ошибок не должно быть. ответьте на почту плиз bet-ekb@yandex.ru
Автор: Leon Дата : 2010-06-05
Спасибо за пояснения!
Но у меня не получается разместить видео в формате -
MPG, и других.....как поступить?
Автор: Alex Дата : 2010-06-18
супер!! автор, спасибо большое!!
Автор: jake Дата : 2010-06-21
через мейл как вставить
Автор: Надежда Дата : 2010-06-25
У меня третьим способом выдает:Ошибка загрузке video51-340.txt :-)
Это файл загрузки стиля, что делать? :-)
Автор: Надежда Дата : 2010-06-25
Мой адрес: Tsoynadezda@mail.ru :-)
Автор: 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
все сделал как положено,но при открывании страницы пишет-"файл такой-то не найден",может это от того что сайт еще не проиндексирован поисковиками?????а с рутубом все работало!!!!
жду ответа на serega26@inbox.ru
Автор: Кир Дата : 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/ стал мой ролик отображаться. По поводу моего сайта.... я думаю дело именно в укозе. Единственное что я помеял - это когда получаешь когда получаешь код, снял галочку показывать похожие ролики. И по завершению ролика не появляются похожие чужие ролики.
Попробую кому-нибудь помочь.
1. Автор: gater Дата : 2010-10-12
Тебе надо изучать создание сайтов с нуля. Т.к. чтобы создать папки на сайте, нужно зайти на сайт через ftp. А я так понимаю ты даже не представляешь что это такое.
2. Автор: Дмитрий Дата : 2010-10-05.
Напишите ваш сайт и email. Попробуем вам помочь.
3. Автор: Антон Дата : 2010-08-26
Скорей всего ты не вставил какие-нибудь скобки из кода вставки, или попробуй обновить flash-плеер.
Если кому-то ещё нужна будет помощь - пишите. yury_sapr13@mail.ru
Автор: 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
Спасибо огромнейшее за урок! все доступно, у меня сразу все получилось с первого раза!!