В этой статье вы прочитаете как сделать на чистом javascript видеоплеер, или на HTML.
Также у нас на сайте есть статья о том, как сделать аудиоплеер на JavaScript и HTML, если вам это интересно, то посмотрите.
Делаем видеоплеер на JavaScript:
Для начала разберём как будем делать видеоплеер на JS и что мы реализуем, с начала мы возьмём элемент <video> и будем брать данные о видео, менять их и выводить при необходимости.
А реализуем мы кнопки перемотки и пауза/плай, также видео дорожку и перемотку на нужную часть видео под средством нажатия на неё.
HTML:
Для начала конечно нужно в HTML объявить элемент <video>, с атрибутом controls, он нужен что бы уже какие то кнопки были для управления видео.
1 | <video id="video" src="./video/video.mp4" controls></video> |
Вот результат.
Как видите в браузере уже, какой то плеер, но опять же это только базовый, поэтому мы уберём атрибут controls, и у нас будет просто видео.
Дальше уже буду показывать как сделать плеер с нуля, что бы вы поняли как можно работать с видео в JavaScript, поэтому сейчас изменю HTML.
1 2 3 4 5 6 7 8 9 10 11 12 13 14 | <div id="videoPlayer"> <video id="video" src="./video/video.mp4"></video> <div id="controls"> <div class="video-track"> <div class="timeline"></div> </div> <div class="buttons"> <button class="play">Play</button> <button class="pause">Pause</button> <button class="rewind"><rewind</button> <button class="forward">forward></button> </div> </div> </div> |
Тут в целом всё понятно, единственное скажу, что элемент с классом video-track, это видео дорожка.
Если вам тут что то не понятно или плохо знаете HTML, то посмотрите наш учебник по HTML.
CSS:
Теперь перейдём к CSS, не много изменим вид, вот вёрстка.
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 | #videoPlayer { width: 800px; } #video { width: 100%; } .video-track { height: 5px; width: 100%; background-color: #b6b6b6; } .timeline { height: 5px; width: 0; background-color: #58b4ff } .buttons { padding: 5px 0; } |
Вот результат.
В целом тут всё просто, но если не понятно, то посмотрите наш учебник по CSS.
JavaScript:
Теперь перейдём к самому главному, это к созданию кода на JavaScript, и логики, сначала посмотрим какие элементы нужно подключить.
1 2 3 4 5 6 7 | let video = document.getElementById("video"); // Получаем элемент video let videoTrack = document.querySelector(".video-track"); // Получаем элемент Видеодорожки let time = document.querySelector(".timeline"); // Получаем элемент времени видео let btnPlay = document.querySelector(".play"); // Получаем кнопку проигрывания let btnPause = document.querySelector(".pause"); // Получаем кнопку паузы let btnRewind = document.querySelector(".rewind"); // Получаем кнопки перемотки назад let btnForward = document.querySelector(".forward"); // Получаем кнопку перемотки вперёд |
Тут мы берём элемент <video> по id остальное берём по селектору.
Дальше будем делать событие кнопок, сначала посмотрим работу с запуском видео.
1 2 3 4 5 6 7 8 9 10 11 12 | btnPlay.addEventListener("click", function() { video.play(); // Запуск проигрывания // Запуск интервала videoPlay = setInterval(function() { // Создаём переменную времени видел let videoTime = Math.round(video.currentTime) // Создаём переменную всего времени видео let videoLength = Math.round(video.duration) // Вычисляем длину дорожки time.style.width = (videoTime * 100) / videoLength + '%'; }, 10) }); |
Давайте разберём этот код, в начале через video.play() запускаем проигрывание видео, а потом запускаем интервал, он нам нужен для отображение сколько прошло времени от начала видео, на видео дорожке.
Внутри него создаём две переменных, videoTime отвечает за то, сколько уже секунд проигрывается видео, videoLength содержит сколько всего секунд длится видео, потом по формуле определяем сколько процентов видео прошло, и отображаем это на видео дорожке с помощью элемента с классом timeline, назначив ему этот процент в качестве ширины.
Теперь посмотрите на код нажатия на кнопку паузы.
1 2 3 4 | btnPause.addEventListener("click", function() { video.pause(); // Останавливает воспроизведение clearInterval(videoPlay) // убирает работу интервала }); |
Как видите с помощью video.pause(), останавливаем воспроизведение и потом удаляем работу интервала.
Дальше идёт код для перемотки видио, но он очень простой.
1 2 3 4 5 6 7 8 9 | // Нажимаем на кнопку перемотать назад btnRewind.addEventListener("click", function() { video.currentTime -= 5; // Уменьшаем время на пять секунд }); // Нажимаем на кнопку перемотать вперёд btnForward.addEventListener("click", function() { video.currentTime += 5; // Увеличиваем время на пять секунд }); |
Тут всё так просто, что даже не буду говорить что тут написано, так как всё из комментариев должно быть понятно.
Последнее что осталось сделать, так это что бы при нажатие на видео дорожку автоматически переключалось время.
1 2 3 4 5 6 | videoTrack.addEventListener("click", function(e) { let posX = e.clientX - 8; // Вычисляем позицию нажатия let timePos = (posX * 100) / 800; // Вычисляем процент перемотки time.style.width = timePos + '%'; // Присваиваем процент перемотки video.currentTime = (timePos * Math.round(video.duration)) / 100 // Перематываем }); |
На мой взгляд эта самая интересная часть программы, сначала мы присваиваем переменной posX, позицию клика по «X», и вычитаем из него восемь, это нужно, так как левый отступ у нас равен восьми, а вычисляет e.clientX от размеров всего экрана.
Дальше определяем по формуле, на какой процент записи мы хотим переключится, и присваиваем это значение ширине линии таймлайна, потом точно также вычисляем сколько на какую секунду видео надо переключится, вот результат.
Также ниже можете скачать файлы этого плеера, что бы проверить как он работает.
Вывод:
В этой статье вы прочитали как сделать на javascript видеоплеер, и на HTML тоже, думаю вам понравилось.
Но если вы заметили, там есть много не доработок, например, видео не делается на полный экран или не показывается сколько времени осталось до окончания.
Если вы хотите это исправить, то скачайте файлы и используя сайты по этим ссылкам (сайт 1, сайт 2), они вам помогут.
Подписываетесь на соц-сети:
Оценка:
Средняя оценка: 2,33
Загрузка...