Sozdaiblog.ru
Назад

Как сделать видеоплеер для сайта Без Плагинов за 5 минут?

Опубликовано: 24.03.2013
Время на чтение: 8 мин
27
12

Доброго времени суток всем читателям – Sozdaiblog.ru!

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

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

До недавнего времени, как и многие Веб-мастера, чтобы отобразить на страницах своего ресурса необходимый видео контент я использовал видеоплеер для сайта, который любезно предоставляют всевозможные видеохостинги. Самым распространённым примером, который можно наблюдать на большинстве сайтов является всеми любимый You Tube (как добавить видео на сайт).

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

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

Как и в предыдущей статье всё разрешилось при помощи одного из тегов, позаимствованных у HTML5.

Его публичное имя — <video>.

Итак.

 

Как работает тег <video>.

Здесь всё просто. Чтобы замутить видеоплеер для сайта, который будет отображать видео ролик на любой странице Вашего ресурса, достаточно в HTML прописать следующее:

 

<video width="800" height="374" controls>
        <source src="1.mp4" type="video/mp4" />
        <source src="1.ogg" type="video/ogg" />
        <source src="1.webm" type="video/webm" />
</video>

 

 

 

ДЕМО

 

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

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

 

Таблица совместимости форматов.

Browser .mp4 .webm .ogg
Mozzila Firefox 3.6
Opera 10.63
Google Chrome 8.0
Apple Safari 5.0.3 (with QuickTime)
Microsoft IE 9 Beta

 

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

Так же в данном коде присутствует атрибут «controls». Он подключает  панель управления  видеоплеером.

Ну и соответственно width и height, которые отвечают за размер окна воспроизведения.

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

Если Вам потребуется автозапуск видеоплеера при попадании посетителя на Веб-страницу, то для этого необходимо рядом с атрибутом  «controls» через пробел дописать «autoplay».

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

 

AddType video/ogg .ogg
AddType video/mp4 .mp4
AddType video/webm .webm

 

Это нужно для Вашего сервера.

В завершении этого поста мне снова захотелось порадовать Вас сладкой плюшкой.

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

 

ДЕМО СКАЧАТЬ

 

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

 

P. S.

Для конвертирования видео Вы можете использовать любой онлайн сервис. Лично мне понравился — Video Converter. Не пугайтесь что он не русскоязычный, там есть выбор перевода.

Если возникнут вопросы, пожалуйста, задавайте!

На сегодня это всё. До следующей встречи…

 

С уважением, Денис Черников!

Поделиться
Похожие записи
Комментарии:
  • Владимир
    Опубликовано: 23.04.2013 Ответить на сообщение

    Денис,спасибо.Пообещал ,сделал.
    С уважением,Владимир.

    • Денис Черников
      Опубликовано: 23.04.2013 Ответить на сообщение

      Пожалуйста, Владимир! Пацан сказал, пацан сделал!))) Как говорится, чем мог тем помог!

  • Vadar
    Опубликовано: 23.04.2013 Ответить на сообщение

    Клёво сделано! Молодец! Спасибо, что поделились и с нами!

    • Денис Черников
      Опубликовано: 23.04.2013 Ответить на сообщение

      Пожалуйста, Vadar! Рад, что Вы оценили.

  • Николай Гижицкий
    Опубликовано: 23.04.2013 Ответить на сообщение

    Классный плеер получился, Денис!
    Оформление на уровне!
    Это очень и очень.
    Аудио-плеер тоже очень порадовал.
    Спасибо, Денис!
    Удачи тебе и огромного трафика на блог.

    • Денис Черников
      Опубликовано: 23.04.2013 Ответить на сообщение

      Пожалуйста, Николай! Может он и Вам пригодится!

      • Техноблоггер
        Опубликовано: 25.04.2013 Ответить на сообщение

        Давно я тут не был у Вас. Обещал не забывать. Пришёл сказать, что я не забыл и рад видеть здесь оживление, как и прежде.
        Успехов Вам и сайту!
        С уважением...

        • Денис Черников
          Опубликовано: 26.04.2013 Ответить на сообщение

          Спасибо! Рад присутствию старых знакомых!

  • Владимир
    Опубликовано: 02.05.2013 Ответить на сообщение

    Здравствуй Денис.
    У меня получилось не за 5 минут правда но это
    для меня теперь не важно . Моя ссылка на видеоплеер.
    http: //www.deda.co/SINEMA/SINIMA_4/4.html
    Денис,как сделать чтобы после просмотра видео
    запускалась автоматически другая страница и так далее.
    Без всяких кликов по ссылки.
    С уважением,Владимир.

    • Денис Черников
      Опубликовано: 02.05.2013 Ответить на сообщение

      Здравствуйте, Владимир!
      Что-то не работает Ваш плеер!
      Насчёт последующего запуска — есть специальный тег, но на вскидку я его не помню. Поищите в Интернете! Я когда всё это делал, что-то подобное мне попадалось.

      • Владимир
        Опубликовано: 02.05.2013 Ответить на сообщение

        Мой плеер работает в брузерах «Opera» и «Google Chrome» .
        Спасибо за совет. Поищу.
        С уважением,Владимир.

        • Денис Черников
          Опубликовано: 02.05.2013 Ответить на сообщение

          А почему под Мозилу не стали делать?

          • Владимир
            Опубликовано: 02.05.2013 Ответить на сообщение

            Денис я рад,что в двух браузерах заработал.
            Спасибо за ссылку Video Converter.Мне тоже понравился.
            Есть русский вариант.
            http: //www.online-convert.com/ru?fl=ru
            С уважением,Владимир.

          • Денис Черников
            Опубликовано: 02.05.2013 Ответить на сообщение

            Пожалуйста, Владимир! Если Вам достаточно двух, пусть так и будет. А про русскую версию я знаю, там переключатель языков сверху есть. Но, всё равно спасибо!

  • serge
    Опубликовано: 01.03.2014 Ответить на сообщение

    здравствуйте есть огромная проблема,сайт у меня на wordpresse когда мне его делали (сайт www. teatrserge.ru) на странице ВИДЕО каждое видео было в своем окошке нажимая на него воспроизводилось как с ютюба было и с рутюба и вк, потом я что то обновил и как оказалось все видео исчезло/ естественно что в html было написано до вставки кода ссылки на видео я знать незнаю ( мне было сказано это скопировать ,сюда вставит html код видео обновить и все будет работать) помогите мне пожалуста с этим видео чтоб работало напишите мне какой нибудь плеер и куда вставить код видео.заранее спасибо Serge

    • Денис Черников
      Опубликовано: 03.03.2014 Ответить на сообщение

      Здравствуйте, Сергей!
      Я бы рад помочь, но как Вы себе это представляете? Я ведь не знаю что и как Вы там делали! Каким образом с Ваших слов я смогу разобраться в этой проблеме! Это всё не просто! Просто Вам нужно добавлять не ссылки на видео из Ютуба, а код плеера, тогда плеер будет на Вашем сайте, а не будет открывать окно Ютуба!

  • mark
    Опубликовано: 26.07.2014 Ответить на сообщение

    а что нет ни одного общего формата для IE11 & Mozilla Firefox? спасибо

    • Денис Черников
      Опубликовано: 28.07.2014 Ответить на сообщение

      А зачем Вам IE11, кто им пользуется!

  • андрей
    Опубликовано: 01.10.2014 Ответить на сообщение

    Привет, ты знаешь какой плеер использует мегого? и можно как-то поставить защиту на видео ссылки, чтоб все желающие не могли воспользоваться)?

    • Денис Черников
      Опубликовано: 01.10.2014 Ответить на сообщение

      Привет, нет не знаю!

  • Александр
    Опубликовано: 14.10.2014 Ответить на сообщение

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

    • Денис Черников
      Опубликовано: 15.10.2014 Ответить на сообщение

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

  • Кристина
    Опубликовано: 07.12.2014 Ответить на сообщение

    Добрый вечер! можно ли этот код вставлять в модуль видео слайдера?

    • Денис Черников
      Опубликовано: 08.12.2014 Ответить на сообщение

      Здравствуйте! Не пробовал, но думаю возможно!

  • Панфилов Сергей
    Опубликовано: 22.02.2015 Ответить на сообщение

    Подскажите, пожалуйста, чайнику, а куда закачивать эту папку video 2 и как ее инсталлировать, чтобы заработал тег?

    • Денис Черников
      Опубликовано: 22.02.2015 Ответить на сообщение

      Её никуда не надо закачивать, это просто папка с демонстрационными файлами!

  • Лия
    Опубликовано: 09.03.2016 Ответить на сообщение

    Простите, я чайник, поэтому вопрос вероятно покажется глупым, но очень надеюсь на вашу помощь.
    Я делаю переводы азиатских клипов и трейлеров и очень хотела бы иметь на своём сайте собственный плеер, который можно будет ставить на другие сайты, так же как плееры ВК, МуВи, Ютуб и тп. Чтобы копировали код на моём сайте и добавляли на свои. Это хорошая реклама и никто не присвоит себе мою работу (что очень обидно). Не могли бы Вы рассказать, как сделать такой плеер?
    И ещё один вопрос непосредственно по данной статье. Плеер есть, но как туда видео прикрепить?.. (простите, повторюсь, я чайник).

Имя
Укажите своё имя и фамилию
E-mail
Без СПАМа, обещаем
Текст сообщения
Отправляя данную форму, вы соглашаетесь с политикой конфиденциальности и правилами нашего сайта.