javascript - 在 html5 视频中切换音量
问题描述
我正在尝试构建 HTML5 视频播放器,但目前的音量似乎对我来说是个问题。
我希望音量栏根据用户单击音量图标而改变。目前,如果您单击音量按钮,它会将音量值设置为 0,但如果我再次单击,它应该将其设置为 1。不幸的是,它始终保持在 0 并且在我单击时不会改变。我的 js 看起来像:
window.onload = function() {
//video
var video = document.getElementsByClassName("js-video-container__video")[0];
//Buttons
var playButton = document.getElementsByClassName("js-video-controls__play-pause")[0];
var timer = document.getElementsByClassName("js-video-controls__timer")[0];
var seconds = document.getElementsByClassName("js-video-controls__timer__seconds")[0];
var minutes = document.getElementsByClassName("js-video-controls__timer__minutes")[0];
var fullScreenButton = document.getElementsByClassName("js-video-controls__full-screen")[0];
var volumeButton = document.getElementsByClassName("js-video-controls__volume-icon")[0];
//sliders
var seekBar = document.getElementsByClassName("js-video-controls__seek-bar")[0];
var volumeBar = document.getElementsByClassName("js-video-controls__volume-bar")[0];
//event listener for the play and pause button
playButton.addEventListener("click", function() {
if (video.paused == true) {
video.play();
//button text will change to Pause
playButton.style.backgroundImage='url("https://image.flaticon.com/icons/svg/64/64485.svg")';
playButton.style.backgroundSize="13px";
} else {
//pause the video
video.pause();
//button will update its text to play
playButton.style.backgroundImage='url("https://image.flaticon.com/icons/svg/149/149657.svg")';
playButton.style.backgroundSize="13px";
// playButton.style.backgroundPositionY="4px";
}
});
// Event listener for the full-screen button
fullScreenButton.addEventListener("click", function() {
if (video.requestFullscreen) {
video.requestFullscreen();
} else if (video.mozRequestFullScreen) {
video.mozRequestFullScreen(); // Firefox
} else if (video.webkitRequestFullscreen) {
video.webkitRequestFullscreen(); // Chrome and Safari
}
});
// Event listener for the volume button
volumeButton.addEventListener("click", function() {
if (volumeBar.value !== 0) {
console.log("clicked the right button");
volumeBar.value = 0;
volumeButton.style.backgroundImage='url("https://image.flaticon.com/icons/svg/2089/2089815.svg")';
volumeButton.style.backgroundSize="13px";
} else {
volumeBar.value = 1;
}
});
//event listener for the change bar
seekBar.addEventListener("change", function() {
//calculate the new time
var time = video.duration * (seekBar.value / 100);
//update the video time
video.currentTime = time;
});
//the change bar will move as the video plays
video.addEventListener("timeupdate", function() {
//Calculate the slider value
var value = (100 / video.duration) * video.currentTime;
//Update the slider value
seekBar.value = value;
console.log(video.currentTime);
console.log(video.duration)
seconds.innerHTML = 0 + ":" + Math.floor(video.currentTime) + " / ";
minutes.innerHTML = Math.floor(video.duration / 60) + ":00";
});
//pause the video when the slider handle is being dragged
seekBar.addEventListener("mousedown", function() {
video.pause();
});
//play the video when the
seekBar.addEventListener("mouseup", function() {
video.play();
});
volumeBar.addEventListener("change", function() {
//update the video volume
video.volume = volumeBar.value;
});
}
我的html目前是:
<div class="video-controls">
<button type="button" class="video-controls__play-pause js-video-controls__play-pause"></button>
<input type="range" class="video-controls__seek-bar js-video-controls__seek-bar" value="0">
<div class="video-controls__space"></div>
<div class="video-controls__timer js-video-controls__timer">
<div class="video-controls__timer__seconds js-video-controls__timer__seconds">0:00 /</div>
<div class="video-controls__timer__minutes js-video-controls__timer__minutes"> 0:00</div>
</div>
<button class="video-controls__volume-icon js-video-controls__volume-icon"> </button>
<input type="range" class="video-controls__volume-bar js-video-controls__volume-bar" min="0" max="1" step="0.1" value="1">
<button type="button" class="video-controls__full-screen js-video-controls__full-screen"></button>
</div>
</div>
解决方案
嘿,这是我的解决方案,我认为这就是您想要的 :) https://jsfiddle.net/nb5Lcmvh/
var volumeButton = $(".js-video-controls__volume-icon");
//sliders
var seekBar = $(".js-video-controls__seek-bar");
var volumeBar = $(".js-video-controls__volume-bar");
$(volumeButton).click(function(){
if ($(volumeBar).val() != 0) {
$(volumeBar).val(0);
}
else{
$(volumeBar).val(1);
}
});
推荐阅读
- ms-access - 在 Access 2016 字段中发布 $0.00 的结果
- c# - 合并通用枚举的标志
- ms-access - 在表单过滤器中使用 OR
- c# - DNN / ASP.NET - 如何从文本字段中提取数字?
- spring - Spring Security 和 CAS。认证成功后的匿名用户
- r - 使用 R,如何从数据集中的字符串中提取多个 URL/模式匹配,然后将每个 URL 放在其自己的相邻列中?
- permissions - 服务帐户的 Keycloak uma-grant 类型票证似乎不适用于策略
- python - 如果该单词在文件中,我将如何读取用户在文件中给出的单词,并用用户给定 msg 的星号替换单词?
- swift - 向核心数据添加记录
- python-3.x - 仅在串口设备输出数据时写入