1 плеер ---

===================================================-

2 плеер - Ссылка на сайт https://skillbox.ru/media/code/kak_sozdat_pleer_dlya_sayta/

 #РУКОВОДСТВА 25 фев 2019 Как создать плеер для сайта на HTML5 и JavaScript Контент на сайте можно разнообразить с помощью видео или аудио. Учим использовать HTML5 video- и audio-плееры и работать с ними на JS. Уже прошли те времена, когда для воспроизведения аудио или видео на сайте нужно было подключать сторонний плеер на Flash — в Adobe решили больше не поддерживать эту технологию, а значит, мы можем вздохнуть с облегчением, потому что HTML5 позволяет создавать плееры с помощью тегов.

И задать ему стили: .video-container { background:#000; width:80%; color:#fff; } .video-player { width:100%; margin:0; } .video-hud { margin:0; padding:1px; } .video-hud__element { cursor:pointer; display:inline-block; vertical-align:middle; height:30px; } .video-hud__action { width:30px; } .video-hud__action_play { background:#ccc; border-radius:0 100px 100px 0; } .video-hud__action_pause { background:#c00; } .video-hud__mute { width:30px; border-radius:100px 100px 100px 100px; } .video-hud__mute_true { background:#c00; } .video-hud__mute_false { background:#ccc; } .video-hud__download { background:#ccc; width:30px; border-radius:0 0 100px 100px; } Выглядит это вот так: Нас пока не интересует красивое оформление, но в этом варианте есть всё необходимое: кнопка старта и паузы; текущее время (в том числе и на прогресс-баре); общая длительность; кнопка отключения звука; шкала громкости; выбор скорости; кнопка скачивания. Теперь нужно написать функции, которые будут отдавать команды плееру. Начнем с получения объектов, запуска и паузы: //Получаем объекты //Плеер var videoPlayer = document.getElementById('video-player'); //Время var progressBar = document.getElementById('video-hud__progress-bar'); var currTime = document.getElementById('video-hud__curr-time'); var durationTime = document.getElementById('video-hud__duration'); //Кнопки var actionButton = document.getElementById('video-hud__action'); var muteButton = document.getElementById('video-hud__mute'); var volumeScale = document.getElementById('video-hud__volume'); var speedSelect = document.getElementById('video-hud__speed'); function videoAct() { //Запускаем или ставим на паузу if(videoPlayer.paused) { videoPlayer.play(); actionButton.setAttribute('class','video-hud__element video-hud__action video-hud__action_play'); } else { videoPlayer.pause(); actionButton.setAttribute('class','video-hud__element video-hud__action video-hud__action_pause'); } if(durationTime.innerHTML == '00:00') { durationTime.innerHTML = videoTime(videoPlayer.duration); //Об этой функции чуть ниже } } Сначала идет проверка, стоит ли видео на паузе — информация об этом содержится в переменной paused объекта videoPlayer (плеер). Затем используются функции play и pause, чтобы запустить и остановить видео соответственно. Для кнопки указываются классы, чтобы было понятно, в каком состоянии находится ролик. Также длительность ролика записывается в специальное поле. Чтобы функция работала, нужно перехватывать события нажатий на кнопку и на сам ролик: //Запуск, пауза actionButton.addEventListener('click',videoAct); videoPlayer.addEventListener('click',videoAct); Теперь, когда ролик можно запустить, пора настроить прогресс-бар. Для этого понадобятся 3 функции: перевод секунд в формат «ММ:СС», отображение текущего времени и перемотка. function videoTime(time) { //Рассчитываем время в секундах и минутах time = Math.floor(time); var minutes = Math.floor(time / 60); var seconds = Math.floor(time - minutes * 60); var minutesVal = minutes; var secondsVal = seconds; if(minutes < 10) { minutesVal = '0' + minutes; } if(seconds < 10) { secondsVal = '0' + seconds; } return minutesVal + ':' + secondsVal; } function videoProgress() { //Отображаем время воспроизведения progress = (Math.floor(videoPlayer.currentTime) / (Math.floor(videoPlayer.duration) / 100)); progressBar.value = progress; currTime.innerHTML = videoTime(videoPlayer.currentTime); } function videoChangeTime(e) { //Перематываем var mouseX = Math.floor(e.pageX - progressBar.offsetLeft); var progress = mouseX / (progressBar.offsetWidth / 100); videoPlayer.currentTime = videoPlayer.duration * (progress / 100); } Первая функция получает секунды и возвращает их в формате «ММ:СС». Вторая функция высчитывает текущее время в процентах от общей длительности и двигает полосу прогресса, а также показывает прогресс в виде минут и секунд. При необходимости можно изменить функцию, чтобы она показывала оставшееся время, — для этого нужно отнять текущий момент от длительности и преобразовать с помощью videoTime. А третья функция на основе положения мыши на полосе рассчитывает, куда нужно перемотать видео, и перематывает его. Перехватываем события: //Отображение времени videoPlayer.addEventListener('timeupdate',videoProgress); //Перемотка progressBar.addEventListener('click',videoChangeTime); На очереди — работа со звуком и скоростью: function videoChangeVolume() { //Меняем громкость var volume = volumeScale.value / 100; videoPlayer.volume = volume; if(videoPlayer.volume == 0) { muteButton.setAttribute('class','video-hud__element video-hud__mute video-hud__mute_true'); } else { muteButton.setAttribute('class','video-hud__element video-hud__mute video-hud__mute_false'); } } function videoMute() { //Убираем звук if(videoPlayer.volume == 0) { videoPlayer.volume = volumeScale.value / 100; muteButton.setAttribute('class','video-hud__element video-hud__mute video-hud__mute_false'); } else { videoPlayer.volume = 0; muteButton.setAttribute('class','video-hud__element video-hud__mute video-hud__mute_true'); } } function videoChangeSpeed() { //Меняем скорость var speed = speedSelect.value / 100; videoPlayer.playbackRate = speed; } Звук хранится в переменной volume, а скорость — в playbackRate. Меняем их значения в зависимости от выбора пользователя. //Звук muteButton.addEventListener('click',videoMute); volumeScale.addEventListener('change',videoChangeVolume); //Работа со скоростью speedSelect.addEventListener('change',videoChangeSpeed); Это необходимый минимум для работы с плеером, но еще можно добавить полноэкранный режим, окно в окне, выбор субтитров и дополнительных дорожек — зная принцип взаимодействия с тегами