Как создать видеоплеер на HTML5 с нуля

Сегодня мы заглянем за кулисы HTML5, и вы узнаете, как разработать плеер для веб-сайта с нуля. Цель этого урока заключается в том, чтобы объяснить код таким образом, чтобы любой мог создать собственный видеоплеер:

Как создать видеоплеер на HTML5 с нуля

Создание документа

Перед началом проекта необходимо подготовить исходные материалы. Вам понадобятся:

  • Пустой html документ;
  • Два видеоролика(вы можете загрузить примеры видеороликов с бесплатных онлайн-источников, таких как PixaBay.com или Videezy.com). Убедитесь, что они оба формата.mp4;
  • Обложка(изображение для презентации видео). Для этого можно без труда скачать соответствующее изображение с Pexels.com или FreeImages.com;
  • Иконки для управления плеером(можно легко воспользоваться такими веб-сайтами, как FlatIcon.com или IconArchive.com).

Результат должен выглядеть примерно так:

Как создать видеоплеер на HTML5 с нуля В уроке я буду использовать:

  • Изображение Белка;
  • Архив контурных медиа кнопок;
  • Шрифт Awesome стилизованный под видеоплеер;
  • Бесплатный редактор кода Brackets, меня привлекла в нем удобная кнопка « Live Preview »(Предварительный просмотр), расположенная в правом верхнем углу, которая показывает результат работы на веб-странице после того, как вы сохранили отредактированный html-файл.

Сейчас, когда мы выбрали и собрали все необходимые материалы, можно легко приступить к работе над кодом плеера для веб-сайта HTML5.

Вставка видео на веб-страницу

Как создать видеоплеер на HTML5 с нуля Это базовый скелет HTML5 будущего видеоплеера. Он использует 10 основных строк кода, которые смогут видео выводиться на любой веб-странице с основными кнопками управления.

Начнем с разметки HTML, в ней используется универсальное объявление doctype <! DOCTYPE html>. Это первое, с чего начинается любой HTML-документ. Оно необходимо для того, чтобы браузер был в курсе, какой документ вы используете.

Сейчас перейдем к элементам, которые необходимо включить в HTML: <head> и <body>. Теперь мы должны сосредоточиться на том, что происходит в body. Вы не сможете легко создать видео без тега <video>. Внутри <head> вставляем <video>.

Сейчас в теге <video> необходимо указать, какие размеры должен иметь плеер(рекомендуется установить размеры плеера, чтобы избежать мерцания). Источник видео, которое вы хотели бы воспроизвести в плеере, и изображение обложки. Это будет презентацией видео, которое зрители увидят, прежде чем нажмут кнопку « Play ».

Сейчас рассмотрим доступные атрибуты и посмотрим, как они работают.

Атрибут poster — он нужен для создания изображения-презентации видео. В нем надо указать папку с изображением(в данном случае « Images ») и название файла. Далее необходимо выбрать ширину и высоту плеера. Я решил выбрать симметричную форму.

Чтобы собрать плеер для веб-сайта, важно вставить атрибут « controls ». Без него вы можете без труда управлять вашим видео только правой кнопкой мыши, а далее выбрать «Воспроизвести» или иные основные возможности. Тег <controls> выводит основной массив элементов управления: кнопки «Воспроизвести», «Пауза», «Громкость» и кнопку полноэкранного режима для более удобного использования возможностей.

Далее идет тег <source>, в котором надо указать атрибут src с источником видео. Так как вы создали папку для видеоплеера, источник видео будет без труда распознаваться кодом, достаточно просто указать имя конкретного видеофайла.

Так как тег <video> поддерживает три формата видео(MP4, WebM и Ogg) надо указать в атрибуте type, какой из них используется. Для удобства посетителей рекомендуется использовать как можно больше версий видео. Так что, если у вас есть .ogg-версия видео, необходимо открыть ещё один тег <source>. К примеру: <source src = «videoexample.ogg» type = video / ogg>.

Сейчас, если вы нажмете кнопку « Video Preview »(Предварительный просмотр видео), то увидите базовый видеоплеер с обложкой, кнопками управления и видео, которое корректно воспроизводится в пределах выбранного размера.

Позиционирование видеоплеера при помощи CSS

Создаваемый плеер для веб-сайта будет находиться в <div>, который в очередь будет содержать два иных <div>:

Как создать видеоплеер на HTML5 с нуля Далее мы собираемся построить площадку для CSS-кода. Для этого я создал три идентификатора внутри большого тега div с именем video-player, так как — это цель нашего проекта.

Первый div-контейнер отвечает за скелет видео. Сюда необходимо перенести первоначальные строки тега <video>, который мы создали на втором этапе данного руководства. Второй div-контейнер включает индикатор просмотра, а третий — кнопки видеоплеера. Помните, что каждый тег <div> должен иметь уникальный идентификатор:

Как создать видеоплеер на HTML5 с нуля Далее я задаю каждому <div> необходимые атрибуты. Таким образом, у div video-tree есть video теги.

<Div> progress-tree отвечает за индикатор выполнения, так что имеет в себя идентификатор «progress».

<Div> button-tree требует больше внимания. Я вставил три кнопки: play(воспроизвести), back(назад) и next(вперед). Таким образом, каждая кнопка заключена в собственный тег <div>, имеет в себя собственный идентификатор(« play-button », « backward-button » и « forward-button ») и размеры(100 на 100 пикселей для каждой кнопки).

У кнопки воспроизведения есть временная шкала, которую я вставил в <div> с идентификатором « time-factor ». Не забудьте также использовать ограничения времени « 0: 00/0: 00 », которые представляют собой время начала и момент времени, которого достигло видео.

После всего этого « Live Preview » (Предварительный просмотр) должен выглядеть так:

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

Стили видеоплеера

Сохраните файл html и откройте новый файл с именем « video-player.css ». Не забудьте сохранить файл css в той же папке, где html .

Сейчас вернитесь в файл html и добавьте в тег <head> атрибуты, которые свяжут файл html с css-файлом : <link rel = «stylesheet» type = «text / CSS» href = «video -player.css»>.

Независимо от структуры, которую вы хотели бы использовать в файле css , просто указываете элемент с id , который отметили в html-файле , указав в начале # . Так вы сообщите редактору кода, какую часть надо стилизовать первой:

Как создать видеоплеер на HTML5 с нуля Выше показан скриншот файла css . Я показал основной CSS , но при помощи этого языка можно сконструировать видеоплеер более сложными методами. Когда понятны основы, можно легко исследовать более сложные стили самостоятельно.

Я последовательно настроил все элементы создаваемого плеера в файле css .

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

У видеоплеера синий фон, он ограничен размерами дисплея плеера, поскольку функцию display имеет в себя значение inline-block . Так что веб-страница не станет в полном объеме синей, поскольку синий фон будет ограничен размерами видеоплеера.

Следующий элемент проектирования — это video-tree , для которого я выбрал нужные размеры, и указал, чтобы видео выводилось на весь экран.

Для progress-tree я выбрал только цвет, и больше сосредоточился на ветке « progress », определяющей индикатор просмотра. Вам необходимо выбрать для прогресс-бара цвет отличный от progress-tree , чтобы посетители могли видеть, сколько осталось видео.

Для button-tree я создал две различные записи. Первая запись фокусируется только на ширине кнопок. Вторая запись управляет кнопками при горизонтальной перестройке при помощи команды « display: inline-block » и центрируется атрибутом « vertical-align: middle ».

Этот CSS может изменить плеер для веб-сайта на усмотрение.

Создание функциональности при помощи JavaScript

На этом этапе вы должны снова сохранить проект, создать новый файл и назвать его « video-player.js ». Сохраните файл в той папке, которую используете для этого проекта.

Далее необходимо связать файл JavaScript с исходным файлом HTML5 строкой между тегом <link> и закрывающим тегом <head>. К примеру: <script type = «text / javascript» src = «video-player.js»> </ script>:

Как создать видеоплеер на HTML5 с нуля В приведенных выше строках JavaScript-кода я сосредоточился только на кнопке воспроизведения.

Сначала мы вводим идентификатор элемента, с которым хотим работать в первую очередь. В нашем случае это идентификатор « play-button ». Далее надо прописать форму кнопке через GetElementbyID .

Далее, когда зритель нажимает на кнопку воспроизведения, мы обрабатываем « Click » при помощи способа addEventListener . Функцию « playOrPause » заставляет кнопку «Воспроизвести» работать, как обычную кнопку воспроизведения, а также как кнопку «Пауза».

Далее в коде создания плеера для веб-сайта вы описываете возможность playOrPause . Если видео приостановлено, нажатие кнопки активирует воспроизведение. Если не приостановлено (блок «else»), нажатие кнопки «Воспроизвести» остановит воспроизведение.

Вы можете легко поделиться опытом и мыслями относительно создания видеопроигрывателя в комментариях!

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

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