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


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


видеоплеер для сайта

Доброго времени суток всем читателям – 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. Не пугайтесь что он не русскоязычный, там есть выбор перевода.

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

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

 

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




Сделайте, пожалуйста, доброе дело, расскажите о блоге своим друзьям:




27 комментариевА что думаете Вы?

  1. Владимир

    Денис,спасибо.Пообещал ,сделал.

    С уважением,Владимир.

    [Ответить]

    Денис Черников ответил:

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

    [Ответить]

  2. Vadar

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

    [Ответить]

    Денис Черников ответил:

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

    [Ответить]

  3. Николай Гижицкий

    Классный плеер получился, Денис!

    Оформление на уровне!

    Это очень и очень. :)

    Аудио-плеер тоже очень порадовал.

    Спасибо, Денис!

    Удачи тебе и огромного трафика на блог.

    [Ответить]

    Денис Черников ответил:

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

    [Ответить]

    Техноблоггер ответил:

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

    Успехов Вам и сайту!

    С уважением...

    [Ответить]

    Денис Черников ответил:

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

    [Ответить]

  4. Владимир

    Здравствуй Денис.

    У меня получилось не за 5 минут правда но это

    для меня теперь не важно . Моя ссылка на видеоплеер.

    http: //www.deda.co/SINEMA/SINIMA_4/4.html

    Денис,как сделать чтобы после просмотра видео

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

    Без всяких кликов по ссылки.

    С уважением,Владимир.

    [Ответить]

    Денис Черников ответил:

    Здравствуйте, Владимир!

    Что-то не работает Ваш плеер!

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

    [Ответить]

    Владимир ответил:

    Мой плеер работает в брузерах «Opera» и «Google Chrome» .

    Спасибо за совет. Поищу.

    С уважением,Владимир.

    [Ответить]

    Денис Черников ответил:

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

    [Ответить]

    Владимир ответил:

    Денис я рад,что в двух браузерах заработал.

    Спасибо за ссылку Video Converter.Мне тоже понравился.

    Есть русский вариант.

    http: //www.online-convert.com/ru?fl=ru

    С уважением,Владимир.

    [Ответить]

    Денис Черников ответил:

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

  5. serge

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

    [Ответить]

    Денис Черников ответил:

    Здравствуйте, Сергей!

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

    [Ответить]

  6. mark

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

    [Ответить]

    Денис Черников ответил:

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

    [Ответить]

  7. андрей

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

    [Ответить]

    Денис Черников ответил:

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

    [Ответить]

  8. Александр

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

    [Ответить]

    Денис Черников ответил:

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

    [Ответить]

  9. Кристина

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

    [Ответить]

    Денис Черников ответил:

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

    [Ответить]

  10. Панфилов Сергей

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

    [Ответить]

    Денис Черников ответил:

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

    [Ответить]

  11. Лия

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

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

    И ещё один вопрос непосредственно по данной статье. Плеер есть, но как туда видео прикрепить?.. (простите, повторюсь, я чайник).

    [Ответить]

Оставить комментарий!

Вверх