Я создал видеоплеер, используя методы воспроизведения мультимедиа, которые прекрасно работают. Вот ресурсы, которые я использовал:
Я использую метод воспроизведения, чтобы вызвать значок паузы или воспроизведения. Как бы я go сделал то же самое для кнопки отключения звука? Например, по умолчанию он должен быть отключен, и после щелчка должна отобразиться не отключенная версия.
Здесь вы можете увидеть рабочую скрипку скрипта, просто запустите его локально и замените его собственным mp4.
const video = document.getElementById('video');
console.log(video);
const play = document.getElementById('play');
const stop = document.getElementById('stop');
const progress = document.getElementById('progress');
const timestamp = document.getElementById('timestamp');
const mute = document.getElementById('mute');
const unmute = document.getElementById('unmute');
// Play & pause video
function toggleVideoStatus() {
if (video.paused) {
video.play();
} else {
video.pause();
}
}
// Update play/pause icon
function updatePlayIcon() {
if (video.paused) {
play.innerHTML = '<i class="fas fa-play"></i>';
} else {
play.innerHTML = '<i class="fas fa-pause"></i>';
}
}
// Update mute/unmute icon
function updateMuteIcon() {
console.log("update mute icon clicked");
// if muted
// show mute icon
// if unmuted
// show unmuted icon
}
// Update Progress & Timestamp
function updateProgress() {
console.log("current time: " + video.currentTime);
console.log("video duration: " + video.duration);
progress.value = (video.currentTime / video.duration) * 100;
// Get minutes
let mins = Math.floor(video.currentTime / 60);
if (mins < 10) {
mins = '0' + String(mins);
}
// Get seconds
let secs = Math.floor(video.currentTime % 60);
if (secs < 10) {
secs = '0' + String(secs);
}
timestamp.innerHTML = `${mins}:${secs}`
}
// Time progress
function setVideoProgress() {
video.currentTime = (+progress.value * video.duration) / 100;
}
// Stop Video
function stopVideo() {
video.currentTime = 0;
video.pause();
}
// Unmute Video
function unmuteVideo() {
console.log("unmute video")
video.muted = false;
}
// Mute Video
function muteVideo() {
console.log("mute video")
video.muted = true;
}
// Event listener
// Video Status
video.addEventListener('click', toggleVideoStatus);
// Play/Pause Icon
video.addEventListener('pause', updatePlayIcon);
video.addEventListener('play', updatePlayIcon);
// Mute/Unmute Icon
mute.addEventListener('click', updateMuteIcon);
// Mute/Unmute
unmute.addEventListener('click', unmuteVideo);
mute.addEventListener('click', muteVideo);
// Update Time
video.addEventListener('timeupdate', updateProgress);
// Play/Stop Video
play.addEventListener('click', toggleVideoStatus);
stop.addEventListener('click', stopVideo);
// Video Progress
progress.addEventListener('change', setVideoProgress);
input[type='range'] {
-webkit-appearance: none;
/* Hides the slider so that custom slider can be made */
width: 100%;
/* Specific width is required for Firefox. */
background: transparent;
/* Otherwise white in Chrome */
}
input[type='range']::-webkit-slider-thumb {
-webkit-appearance: none;
}
input[type='range']:focus {
outline: none;
/* Removes the blue border. You should probably do some kind of focus styling for accessibility reasons though. */
}
input[type='range']::-ms-track {
width: 100%;
cursor: pointer;
/* Hides the slider so custom styles can be added */
background: transparent;
border-color: transparent;
color: transparent;
}
/* Special styling for WebKit/Blink */
input[type='range']::-webkit-slider-thumb {
-webkit-appearance: none;
border: 1px solid #000000;
height: 36px;
width: 16px;
border-radius: 3px;
background: #ffffff;
cursor: pointer;
margin-top: -14px;
/* You need to specify a margin in Chrome, but in Firefox and IE it is automatic */
box-shadow: 1px 1px 1px #000000, 0px 0px 1px #0d0d0d;
/* Add cool effects to your sliders! */
}
/* All the same stuff for Firefox */
input[type='range']::-moz-range-thumb {
box-shadow: 1px 1px 1px #000000, 0px 0px 1px #0d0d0d;
border: 1px solid #000000;
height: 36px;
width: 16px;
border-radius: 3px;
background: #ffffff;
cursor: pointer;
}
/* All the same stuff for IE */
input[type='range']::-ms-thumb {
box-shadow: 1px 1px 1px #000000, 0px 0px 1px #0d0d0d;
border: 1px solid #000000;
height: 36px;
width: 16px;
border-radius: 3px;
background: #ffffff;
cursor: pointer;
}
input[type='range']::-webkit-slider-runnable-track {
width: 100%;
height: 8.4px;
cursor: pointer;
box-shadow: 1px 1px 1px #000000, 0px 0px 1px #0d0d0d;
background: #000000;
border-radius: 1.3px;
border: 0.2px solid #010101;
}
input[type='range']:focus::-webkit-slider-runnable-track {
background: #000000;
}
input[type='range']::-moz-range-track {
width: 100%;
height: 8.4px;
cursor: pointer;
box-shadow: 1px 1px 1px #000000, 0px 0px 1px #0d0d0d;
background: #000000;
border-radius: 1.3px;
border: 0.2px solid #010101;
}
input[type='range']::-ms-track {
width: 100%;
height: 8.4px;
cursor: pointer;
background: transparent;
border-color: transparent;
border-width: 16px 0;
color: transparent;
}
input[type='range']::-ms-fill-lower {
background: #000000;
border: 0.2px solid #010101;
border-radius: 2.6px;
box-shadow: 1px 1px 1px #000000, 0px 0px 1px #0d0d0d;
}
input[type='range']:focus::-ms-fill-lower {
background: #000000;
}
input[type='range']::-ms-fill-upper {
background: #000000;
border: 0.2px solid #010101;
border-radius: 2.6px;
box-shadow: 1px 1px 1px #000000, 0px 0px 1px #0d0d0d;
}
input[type='range']:focus::-ms-fill-upper {
background: #000000;
}
* {
box-sizing: border-box;
}
body {
background-color: #999;
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
max-height: 100vh;
}
h1 {
color: #fff;
}
.screen {
cursor: pointer;
width: 70%;
background-color: #000 !important;
}
.controls .fa-play {
color: rgb(155, 137, 36);
}
.controls .fa-stop {
color: rgb(155, 36, 36);
}
.controls .fa-pause {
color: rgb(255, 255, 255);
}
.controls .fa-volume-mute {
color: rgb(83, 83, 83);
}
.controls .fa-volume-up {
color: rgb(255, 255, 255);
}
.controls .timestamp {
color: #fff;
font-weight: bold;
margin-left: 10px;
}
.controls .btn {
border: 0;
background: transparent;
cursor: pointer;
}
.controls {
background: #333;
color: #fff;
display: flex;
justify-content: center;
align-items: center;
padding: 10px;
width: 70%;
}
.btn:focus {
outline: 0;
}
@media (max-width: 800px) {
.screen,
.controls {
width: 90%;
}
}
<div class="video-wrapper">
<h1>Video Player</h1>
<video id="video" class="screen" poster="poster.png" autoplay muted loop>
<source src="#replacewithlocalmp4video">
</video>
<div class="controls">
<button class="btn" id="play">
<i class="fas fa-play"></i>
</button>
<button class="btn" id="stop">
<i class="fas fa-stop"></i>
</button>
<button class="btn" id="mute">
<i class="fas fa-volume-mute"></i>
</button>
<button class="btn" id="unmute">
<i class="fas fa-volume-up"></i>
</button>
<input type="range" id="progress" class="progress" min="0" max="100" step="0.1" value="0">
<span class="timestamp" id="timestamp">00.00</span>
</div>
</div>