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

Как загрузить видео файл на сайт и разместить его для просмотра на странице сайта

20 августа 2018

Советы

Обращаем ваше внимание!

Все описанное в данной статье, предназначено ТОЛЬКО для использования в системе управления сайтом ТСАдмин 3 и выше.

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

Часто существует потребность разместить тот или иной видео ролик на сайте, но не использовать для этого различные видео ресурсы: ютуб, рутуб, и т.д. В данной статье мы вам расскажем, как загрузить видео файл в системе управления сайтом ТСАдмин и в текстовом редакторе разместить его на странице сайта с видео плеером для просмотра.

1. Выбираем и подготавливаем видео файл

Чтобы воспроизводить видео файл на сайте, его необходимо загрузить на сайт, т.е. на хостинг.

Как правило все видео файлы имеют большой объем, поэтому перед загрузкой, такой файл необходимо обработать и уменьшить его вес. «Компрессовать» видео вы можете с помощью бесплатной версии программы Any Video Converter (ссылка откроется в новом окне) или использовать для этого любую другую программу на ваше усмотрение.

Файл необходимо переименовать: правильное название должно содержать только строчные латинские символы, цифры, дефис «-» и подчеркивание (земля) «_». Использование пробелов и других символов запрещено! Это приведет к «битой ссылке» и ролик не будет воспроизводиться на сайте.

Пример правильного названия файла: video_na_sayt.mp4

Пример НЕ правильного названия: Видео на сайт.mp4

Итак, когда вы «сжали» свое видео, правильно его переименовали, пришла пора его загрузить на хостинг.

2. Загружаем видео файл на сайт (на хостинг)

Открываем систему управления сайтом ТСАдмин и переходим в раздел «Файлы» (файловый менеджер):

В разделе переходим во вкладку «Показать файлы»:

Для хранения видео, создаем папку «video». Для этого на папку «files» кликаем правой клавишей мыши и выбираем «Создать папку».

Папку называем «video» маленькими буквами без пробелов и других символов.

Выделяем папку для загрузки в нее видео файла и кликаем на кнопку «Загрузить».

Выбираем на компьютере подготовленный файл и ждем когда он загрузится. После окончания процесса загрузки, у вас должно выглядеть примерно так: видео файл размещен в папке «video».

3. Размещение видео плеера на страницу сайта

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

Сначала мы установим сам плеер.

Копируем от сюда код плеера как есть:

Для установки кода, текстовой редактор переключаем на «Источник»:

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

Сейчас нам необходимо узнать путь размещения видео файла, чтобы указать его в коде плеера. Для этого мы открываем еще одну вкладку (вкладку браузера с плеером не закрываем). В новой вкладке, так же открываем редактор, кликаем на иконку «Ссылка» (цепочка):

В открывшемся окне кликаем «Выбрать на сервере»:

В следующем окне выбираем папку «video’ и в ней кликаем 2 раза на загруженный видео файл.

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

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

Тут:

Чтобы получилось так:

Страницу с плеером необходимо сохранить кликнув на «Сохранить» в левом верхнем углу.

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

После сохранения, страница с установленным видео плеером в системе управления должна выглядеть примерно так:

Откроем страницу на сайте, чтобы проверить как работает установленный плеер. Для этого можно кликнуть «Открыть на сайте» в правом верхнем углу.

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

Размер видео и картинка-заставка, автоматически берутся из самого видео файла.

Кликаем «Воспроизвести», смотрим видео. Видео размещено!

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

Три способа как вставить видео на сайт

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

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

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

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

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

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

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

Рис 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. После этого, зайдя в свой аккаунт, переходим в верхнем меню на вкладку «Мой Плеер» и Нажимаем «Видео» .

Рис 7. Вкладка «Мой плеер» — «Видео»

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

Иван
Дата : 2009-01-31

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

vol110
Дата : 2009-01-31

классно

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

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

Nina
Дата : 2009-01-31

Анастасия Коновалова
Дата : 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

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

Спасибо 🙂

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

Света
Дата : 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

Рысик
Дата : 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

Нина
Дата : 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-плеер. Если кому-то ещё нужна будет помощь — пишите. 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 нужно

Урок 15. Как вставить видео на страницу сайта средствами HTML?

Как вставить видео на сайт средствами HTML?

Есть два вида вставки видео на сайт: видео с другого ресурса (Youtube, Yandex video, Rutube и другие) и видеофайл, который уже загружен на сайт и открывающийся прямой ссылкой.
Самый простой в исполнении — первый способ. Однако у него есть как плюсы, так и минусы. В случае загрузки видео со специального видеосервиса нужно выполнить три пункта:
1. Зарегистрироваться на видеосервисе (Например: , , )
2. После регистрации у Вас появится возможность загрузить видео
3. Получить код видео и вставить к себе на сайт
После этого Вы вставляете полученный код к себе на страницу. Получается примерно следующий отрезок кода:
Код HTML
<object width=»470″ height=»353″>
<param name=»movie» value=»http://video.rutube.ru/7c806393a9705797d7e92c4a05493d5d»>
<param name=»wmode» value=»window»>
<param name=»allowFullScreen» value=»true»>
<embed src=»http://video.rutube.ru/7c806393a9705797d7e92c4a05493d5d» type=»application/x-shockwave-flash» wmode=»window» allowfullscreen=»true» width=»470″ height=»353″>
</object>

Настройки окна видео подстраиваете под себя: width (ширина в пикселях), height (высота в пикселях). В ссылке http://video.rutube.ru/7c806393a9705797d7e92c4a05493d5d при выборе другого видео достаточно поменять код видео, который подчёркнут. Тег embed используется для старых настроек браузеров, поэтому там также не забываем поменять размеры видео и тд, иначе при просмотре через другой браузер окно с видео будет отличаться.

Второй способ покажется немного сложнее. Во-первых, видео целиком нужно залить на хостинг, а он, как известно, не резиновый, во-вторых, для проигрывания даного видео (кроссбраузерного — так, чтобы во всех браузерах всё было одинаково!) следует использовать видео-проигрыватель, который уже не надо скачивать, а достаточно только подключить в head Вашего документа.
Поскольку простых путей не ищем, то предположим, что Вы хотите вставить SWF-файл. Существует множество плееров доступных он-лайн. Например, FlowPlayer (). После скачивания архива загрузите его на сайт в папку с соответствующим названием flowplayer. После этого надо прикрепить к странице с видео данный плеер, для этого вставляем в head следующую строку:
Код HTML
<script type=»text/javascript» src=»flowplayer/flowplayer-3.2.2.min.js»></script>
Останется только на самой стране вставить код для проигрывания видео. В href не забудьте вставить путь к видео.
<a href=»путь_к_swf_видео» style=»display: block; width: 500px; height: 400px;» id=»player»></a>
<script language=»JavaScript»>
flowplayer(«player», {src : «http://адрес_вашего_сайта/flowplayer/flowplayer-3.2.2.swf», wmode: «transparent»});
</script>
Из плюсов данного метода хотел бы отметить отсутствие рекламы при проигрывании видео и, при нормальной работающем хостинге(!), быструю загрузку видео.

Короткий код вставки видео с Youtube на сайт

На этот случай достаточно одной строки кода с использованием iframe. В коде будет менять только http://www.youtube.com/embed/WRtAVxqacQM короткий идентификационный код для видео. Также по желанию можно изменить размеры окна видео: width (ширина в пикселях), height (высота в пикселях).
Код HTML (вставляем куда угодно в body документа)
<iframe width=»500″ height=»300″ src=»http://www.youtube.com/embed/ysSxxIqKNN0″ frameborder=»0″ allowfullscreen></iframe>
И наслаждаемся клипом LP!)

Вставка видео или тег video в HTML5

Позволяет встраивать, воспроизводить и управлять настройками видеоролика на веб-странице.
Синтаксис
<video>
<source src=»URL»>
</video>
Атрибуты тега video
autoplay — Видео начинает воспроизводиться автоматически после загрузки страницы.
controls — Добавляет панель управления к видеоролику.
height — Задает высоту области для воспроизведения видеоролика.
loop — Повторяет воспроизведение видео с начала после его завершения.
poster — Указывает адрес картинки, которая будет отображаться, пока видео не доступно или не воспроизводится.
preload — Используется для загрузки видео вместе с загрузкой веб-страницы.
src — Указывает путь к воспроизводимому видеоролику.
width — Задает ширину области для воспроизведения видеоролика.
Пример кода тега video
<!DOCTYPE html>
<html>
<head>
<meta charset=»utf-8″>
<title>video</title>
</head>
<body>
<video width=»400″ height=»300″ controls=»controls» poster=»video/duel.jpg»>
<source src=»video/duel.ogv» type=’video/ogg; codecs=»theora, vorbis»‘>
<source src=»video/duel.mp4″ type=’video/mp4; codecs=»avc1.42E01E, mp4a.40.2″‘>
<source src=»video/duel.webm» type=’video/webm; codecs=»vp8, vorbis»‘>
Тег video не поддерживается вашим браузером.
<a href=»video/duel.mp4″>Скачайте видео</a>.
</video>
</body>
</html>

Вставка видео с помощью в html-страницу при помощи embed

Элемент embed используется для загрузки и отображения объектов (например, видеофайлов, флэш-роликов, некоторых звуковых файлов и т.д.), которые исходно браузер не понимает. Чем метод отличается от предыдущих? В большинстве случаев, подобные объекты требуют подключения к браузеру специального модуля, который называется плагин, или запуска вспомогательной программы.
К слову, спецификация HTML 4.0 рекомендует использовать тег object для загрузки внешних данных вместо тега embed. Однако некоторые браузеры не отображают таким образом нужную информацию, поэтому наилучшим вариантом будет поместить embed внутрь контейнера object.
<!DOCTYPE html>
<html>
<head>
<meta charset=»utf-8″>
<title>Пример кода с тегом EMBED</title>
</head>
<body>
<embed src=»images/examle.swf» width=»400″ height=»300″
type=»application/x-shockwave-flash»
pluginspage=»http://www.macromedia.com/go/getflashplayer»>
</body>
</html>
Используемые атрибуты тега embed
align — определяет как объект будет выравниваться на странице и способ его обтекания текстом
height — высота объекта
hidden — указывает, скрыть объект на странице или нет
hspace — горизонтальный отступ от объекта до окружающего контента

Как показывать видео на сайте?

Размещение видео на сайте становится нормой. Количество сайтов, размещающих на своих страницах видеоролики, растет с каждым днем. Однако, показывать видео не так легко, как другие виды контента. Поэтому многие веб-мастера идут по пути наименьшего сопротивления и размещают свое видео на видеохостингах, в основном на сервисе YouTube. Однако, размещение видео на YouTube имеет существенные недостатки и ограничения, перечисленные под катом. Там же находится и краткая инструкция о том, как разместить видео на сайте, не прибегая к услугам внешних видеохостеров.
Размещение видеороликов на YouTube имеет следующие отрицательные последствия:
1. Потеря аудитории. Размещая видео на YouTube, вы теряете аудиторию сайта: после того, как посетители вашего сайта просмотрят ваше видео на YouTube, им покажут ссылки на множество других роликов, никакого отношения к вашему сайту не имеющих. Велика вероятность, что пользователь кликнет на один из этих роликов и покинет ваш сайт.
2. Отсутствие монетизации. Разместив видео на YouTube, вы не сможете показывать рекламу вашим пользователям или брать с них деньги за просмотр роликов.
3. Низкое качество. Видеоролики на YouTube хранятся с низким разрешением и битрейтом и потому качество видео оставляет желать лучшего.
4. Потеря контроля. Размещая ролики на YouTube, вы никак не можете влиять на их доступность, и поэтому в самый нужный момент из-за технических сбоев на серверах YouTube вы можете лишить ваших пользователей возможности просмотра видео.
5. Чужой бренд. На всех ваших видеороликах посетители вашего сайта будут видеть будет стоять логотип YouTube, а не ваш собственный.
Из всего вышесказанного можно сделать достаточно однозначный вывод: YouTube подходит для размещения любительского видео на домашних страницах. Если же ваш сайт является важным элементом вашего бизнеса, лучше отказаться от размещения видеороликов на YouTube и научиться размещать видео на собственных серверах. Тем более, что это не так сложно сделать — ниже приведен пошаговый список действий для показа интернет-видео. Итак, чтобы начать размещать видео на своем сайте, надо:
А. Определиться с форматом и кодеком для видео (обычно используют формат Adobe Flash Video, т.к. он стоит на 99,5% компьютеров и кодек H.264, так как он дает наилучшее сжатие) Приобрести программу-кодек, которая бы перекодировала видео в необходимый формат.
Б. Решить, с каким битрейтом (а следовательно — качеством) будете передавать видео. Это зависит как от самого контента (например, футбольный матч требует лучшего качества, чем интервью «говорящей головы»), так и от возможностей конечных потребителей (например, в Москве средняя скорость подключения к Интернет 5 Мбит/с, а в регионах — 500 кбит/с, поэтому ваш битрейт надо «подстроить» в соответствии с предполагаемой аудиторией сайта. Я бы рекомендовал скорость видеопотока 1 Мбит/с для сайтов, ориентированных на московскую аудиторию и 256 Кбит/с для всего Рунета. Если же хочется показывать видео с большим битрейтом — используйте услуги сетей доставки контента (CDN, Content Delivery Network);
В. Спрогнозировать, сколько пользователей смотреть видео одновременно, и в соответствии с этим рассчитать пропускную способность сервера. Если ожидаете больше 10-20 одновременных просмотров видео — вставать на Dedicated / Co-Location (желательно — в том городе, где живет большая часть вашей аудитории), либо опять-таки использовать CDN;
Г. Решить, нужна ли вам потоковая доставка (streaming) видео (в этом случае ролик не остается на компьютере пользователя). Если нужен стриминг — купить и установить ПО для стриминга видео (Adobe FMS, Wowza, Red5), либо пользоваться стриминг-серверами CDN. Если стриминг не нужен — использовать обычный HTTP-сервер, но желательно — обладающий возможность отдавать файлы с произвольного места, чтобы пользователи могли перематывать видео до его полной загрузки. Такой функциональностью обладает, например, HTTP-сервер nginx.
Д. Написать самим или взять готовый Flash-плеер (например, плеер Uppod) — программу на языке ActionScript, который будет загружаться на компьютеры клиентов и использоваться для управления показом видео.
Вознаграждением за работу будут полный контроль над вашими видеороликами и возможность проявить креативность при выборе модели их монетизации 🙂

Здравствуйте читатели блога mixprise.ru. Если вы являетесь активным пользователем интернета, то вы не раз сталкивались с проблемой рода: скачивания понравившегося видео.

Но как это сделать?

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

1 способ:

Что бы скачать видео с youtube, одноклассники или же в контакте достаточно воспользоваться сервисом которые доступны в интернете, один из самый популярных это ru.savefrom.net, заходим на этот сайт, после чего вам необходимо будет скопировать адрес ссылки проигрываемого видео

После чего вставляем адрес в строку для скачивания и сервис предлагает нам варианты для загрузки MP4, 3GP и т.д

После того как вы выберете формат произойдет загрузка видео

Данный сервис позволяет скачивать видео из самых разных источников!

2 способ:

Помимо 1 способа есть еще и более профессиональный способ скачивания любого видео с любого сайта без программ! В качестве браузера я буду использовать Google Chrome, о том какой браузер лучше выбрать активным пользователям интернета читайте в статье: Какой браузер лучше для Windows 10!

Тот инструмент, через который мы будем загружать видео есть во многих браузерах и называется он инструменты разработчика.
Что бы запусти эту панель в браузере Google Chrome нужно перейти в Меню затем нажать Дополнительные инструменты и Инструменты разработчика

В открывшимся окне как вы видите появились инструменты разработчика, и нам необходимо перейти на вкладку Network

После того как мы перешли мы нажимаем на кнопку Play того видео который хотим скачать, как вы видите на вкладке Network отображаются все запросы, которые были отправлены через браузер.
Ищите файл формата MP4 или что-то похожее, обычно эти файлы долго загружаются…
После того как нашли нужный файл жмете по нему правой кнопкой мыши и выбираете пункт Copy Link Address

После чего откройте новую вкладку и вставьте ранее скопированную ссылку и нажмите Enter

После того как вы нажали Enter, кликните правой кнопкой по видео и нажмите Сохранить видео как…

Как вы можете наблюдать загрузка видео произошла успешно

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

Ваш адрес email не будет опубликован. Обязательные поля помечены *