Видеоплеер на JavaScript и HTML

javascript и HTML видеоплеер
Метки: / /

В этой статье вы прочитаете как сделать на чистом javascript видеоплеер, или на HTML.

Также у нас на сайте есть статья о том, как сделать аудиоплеер на JavaScript и HTML, если вам это интересно, то посмотрите.

Делаем видеоплеер на JavaScript:

Для начала разберём как будем делать видеоплеер на JS и что мы реализуем, с начала мы возьмём элемент <video> и будем брать данные о видео, менять их и выводить при необходимости.

А реализуем мы кнопки перемотки и пауза/плай, также видео дорожку и перемотку на нужную часть видео под средством нажатия на неё.

HTML:

Для начала конечно нужно в HTML объявить элемент <video>, с атрибутом controls, он нужен что бы уже какие то кнопки были для управления видео.

Вот результат.

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

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

Дальше уже буду показывать как сделать плеер с нуля, что бы вы поняли как можно работать с видео в JavaScript, поэтому сейчас изменю HTML.

Тут в целом всё понятно, единственное скажу, что элемент с классом video-track, это видео дорожка.

Если вам тут что то не понятно или плохо знаете HTML, то посмотрите наш учебник по HTML.

CSS:

Теперь перейдём к CSS, не много изменим вид, вот вёрстка.

Вот результат.

В целом тут всё просто, но если не понятно, то посмотрите наш учебник по CSS.

JavaScript:

Теперь перейдём к самому главному, это к созданию кода на JavaScript, и логики, сначала посмотрим какие элементы нужно подключить.

Тут мы берём элемент <video> по id остальное берём по селектору.

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

Давайте разберём этот код, в начале через video.play() запускаем проигрывание видео, а потом запускаем интервал, он нам нужен для отображение сколько прошло времени от начала видео, на видео дорожке.

Внутри него создаём две переменных, videoTime отвечает за то, сколько уже секунд проигрывается видео, videoLength содержит сколько всего секунд длится видео, потом по формуле определяем сколько процентов видео прошло, и отображаем это на видео дорожке с помощью элемента с классом timeline, назначив ему этот процент в качестве ширины.

Теперь посмотрите на код нажатия на кнопку паузы.

Как видите с помощью video.pause(), останавливаем воспроизведение и потом удаляем работу интервала.

Дальше идёт код для перемотки видио, но он очень простой.

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

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

На мой взгляд эта самая интересная часть программы, сначала мы присваиваем переменной posX, позицию клика по «X», и вычитаем из него восемь, это нужно, так как левый отступ у нас равен восьми, а вычисляет e.clientX от размеров всего экрана.

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

видеоплеер на js

Также ниже можете скачать файлы этого плеера, что бы проверить как он работает.

Вывод:

В этой статье вы прочитали как сделать на javascript видеоплеер, и на HTML тоже, думаю вам понравилось.

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

Если вы хотите это исправить, то скачайте файлы и используя сайты по этим ссылкам (сайт 1, сайт 2), они вам помогут.

Подписываетесь на соц-сети:

Оценка:

1 Звезда2 Звезды3 Звезды4 Звезды5 Звезд
(Пока оценок нет)
Загрузка...

Поделится:

Также рекомендую: