Великий Путь Вебмастера от идеи до интернет бизнеса
Блог Романа Чуешова
Начни зарабатывать на создании сайтов, лендингов, мобильных приложениях и новейших интернет технологиях
Рубрика:Основы HTML

Создаем собственный видеоплеер для сайта без плагинов и модулей


Доброго времени суток, гости моего обучающего блога и любимые подписчики. Сегодня мы с вами будем программировать свой собственный видеоплеер для сайта. Звучит сложно, но поверьте, после прочтения текущей публикации вы легко сможете реализовать его самостоятельно.

А для этого я расскажу вам, какие элементы языка разметки html и новой спецификации html5 следует использовать, как изменить стилевое оформление видеоплеера и конечно же приведу код программы. Давайте приступим!

Короткий путь к получению видео

Самый простой способ установки видео на сайт – это использовать готовые плагины видеоплееров. На сегодняшний день таких дополнений пруд пруди во Всемирной паутине: с уникальными дизайном контролов, с плейлистами, с дополнительными элементами управления и т.д. Вам остается только найти подходящий для себя плеер, скачать установочные файлы на компьютер и подключить к своему проекту.

К тому же есть и другая возможность простой вставки видео. Думаю, каждый из вас видел такую картину, когда на веб-сервисе запускаются видео с YouTube. Так вот это достаточно простой «финт ушами» для разнообразия своего контента роликом и при этом с минимальным количеством затрачиваемых усилий.

НО! Всегда есть и негативные стороны на коротком и простом пути к внедрению видеофайлов. Используя такие варианты решения, вы ограничиваете свой сайт и себя в выборе дизайна видеоплееров.

Так, видео с YouTube нельзя видоизменить. У вас на странице будет висеть плеер с абсолютно стандартным оформлением, в котором вы сможете менять только размер окна. С плагинами дело обстоит аналогично.

Youtube видеоплеер

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


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

Реализация персонального видеоплеера

Чтобы создать приложение для проигрывания видеороликов, необходимо для начала познакомиться с такими тегами html5, как <video> и <source>.

Video

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

Атрибут Предназначение
Controls Добавляет панель управления.
Autoplay После загрузки веб-страницы видео стартует автоматически.
Height Устанавливает высоту окна, в котором воспроизводится видео.
Loop Зацикливает показ ролика.
Poster Пока видео не запущено или в случае если оно недоступно, отображается картинка (постер).
Preload Во время загрузки сайта загружается и сам видеоролик.
Src Отвечает за адрес ролика.
width Устанавливает ширину окна, в котором воспроизводится видео.

Source

Данный тег используется для вставки необходимых файлов (аудио или видео) в элементы <audio> и <video>.

Для source создателями языка было предусмотрено всего лишь 3 атрибута:

  • Media – используется для определения устройства, на котором запускается мультимедиа. Используется не очень часто;
  • Src – отвечает за адрес вставляемого файла;
  • Type – указывает типы данных (MIME-типы) источников.

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

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
<!DOCTYPE html>
<html>
 <head>
  <meta charset="utf-8">
  <title>video</title>
<style>
body {
background: #8B7355;
}
video {
 max-width: 50%;
 margin-left:25%;
 border: 2px solid #8B4513;
 
}
h2 {
text-align: center;
color: #8B4513;
}
</style>
 </head>
 <body>
  <video id="movie" controls poster="http://datakogda.ru/wp-content/uploads/2015/07/Kogda-vyydet-Graviti-Folz-3-sezon-data-vykhoda.jpg" preload="none">
   <source src="… " type='video/mp4'> /*на месте этой ссылки вы вставите путь к своему видеофайлу*/
</video>
 <h2>Ссылка для скачивания видео 
здесь.</h2>
  <script>
   var v = document.getElementById("movie");
document.getElementById("movie").volume = 0.5;
   v.onclick = function() {
    if (v.paused) {
     v.play();
    } else {
     v.pause();
    }
   };
  </script>
 </body>
</html>

Желаю вам удачи в создании собственного плеера. Подписывайтесь на мой блог и не забывайте рассказывать о нем своим знакомым и друзьям. До встречи! Пока-пока!

С уважением, Роман Чуешов


Прочитано: 151 раз
Этот блог уже читают
читай и ты!
Оставить коментарий
:p :-p 8) 8-) :lol: =( :( :-( :8 ;) ;-) :(( :o:
  • Денис

    Не знал, что самому можно плеер ставить на сайт безо всяких плагинов. Про тег source знал, он часто используется, а про тег video не знал. Что плохо, долго на каждую страницу код ставить и если статью придётся дополнять, то надо кодом и плеер сдвигать.

    03.04.2017 в 23:42
  • Денис

    Плеер как я понял, под браузерами с html5 работает, а с html4 и ниже не будут. Не понял, если поставить ссылку в свой плеер с ютуб, дизайн плеера сменится на стандартный ютубовский или своим останется?

    03.04.2017 в 23:46
    • Роман

      Ютубовский будет.

      06.04.2017 в 00:15
    • Денис

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

      06.04.2017 в 06:05
      • Роман

        Если много видосов то ютуб однозначно. Ну, не знаю, плеер ютуба меня устраивает польностью.

        06.04.2017 в 11:32
  • Николай

    как сделать плейлист и возможно ли отображение перекрывающегося контента HTML 5

    27.06.2017 в 14:05