时间戳

首页 > 解决方案 > [JavaScript]为什么进度条 addeventlistener 不起作用？

javascript - [JavaScript]为什么进度条 addeventlistener 不起作用？

问题描述

在基本 javascript 的帮助下，我正在尝试制作一个自定义视频播放器，尽管所有控件都工作正常，进度条会根据时间更新事件进行更新，但是当我尝试添加用户点击时的功能时在进度条上，视频 currentTime 应该到那个时间，进度条应该相应地显示进度但是当我尝试为进度条上的点击事件添加事件监听器时它不起作用，我只是使用所有引导程序版本 4 类和一些基本的 CSS代码如下，为什么 addeventlistener 不起作用请在评论中查看，我在评论的帮助下标记了根本没有调用的 scrub（函数名称）函数，我不知道为什么帮我解决这个问题......如果有人知道如何在不更改 HTML 的情况下添加我上面描述的功能

let videoelement = document.querySelector('.videos')
let pausebutton = document.querySelector('.fas');
let skipbutton = document.querySelector('.forward');
let backbutton = document.querySelector('.backward');
let speed = document.querySelector('#playbackspeed');
let vol = document.querySelector('#volume');
let controls = document.querySelector('.controlplayer')
let progress = document.querySelector('.progress-bar')
vol.addEventListener('change', setvol)
vol.addEventListener('mousedown', setvol)
function setvol(e) {
    videoelement.volume = vol.value;
}
speed.addEventListener('change', rate)
speed.addEventListener('mousedown', rate)
function rate(e) {
    //  console.dir(speed);
    videoelement.playbackRate = speed.value;
}
pausebutton.addEventListener('click', playing)
videoelement.addEventListener('mouseenter', function () {
    controls.style.display = 'block';
})
videoelement.addEventListener('click', playing)
videoelement.addEventListener('play', updatebutton)
videoelement.addEventListener('pause', updatebutton)
videoelement.addEventListener('timeupdate', handleprogress)
function updatebutton() {
    if (videoelement.paused) {
        pausebutton.classList.remove('fa-pause')
        pausebutton.classList.add('fa-play')
    }
    else {
        pausebutton.classList.remove('fa-play')
        pausebutton.classList.add('fa-pause')
    }
}
function playing(e) {
    console.dir(videoelement)
    if (videoelement.paused) {
        // console.log("pause hai ")
        videoelement.play();
        playing
        videoelement.controls = null;
        videoelement.firstChild.nodeValue = 'Play';
        pausebutton.classList.remove('fa-play')
        pausebutton.classList.add('fa-pause')
    } else {
        //console.log("play ho gya")
        videoelement.pause();
        videoelement.firstChild.nodeValue = 'Pause';
        pausebutton.classList.remove('fa-pause')
        pausebutton.classList.add('fa-play')
    }
    //  this.preventDefault();
}
skipbutton.addEventListener('click', function (e) {
    let t = videoelement.currentTime;
    if ((t + 25) < videoelement.duration)
        videoelement.currentTime = t + 25;
    else
        videoelement.currentTime = videoelement.duration;
})
backbutton.addEventListener('click', function (e) {
    let t = videoelement.currentTime;
    if ((t - 10) >= 0)
        videoelement.currentTime = t - 10;
    else
        videoelement.currentTime = 0;
})
function handleprogress() {
    let percent = (videoelement.currentTime / videoelement.duration) * 100;
    progress.style.width = `${percent}%`;

}
progress.addEventListener('click', scrub)
progress.addEventListener('mousemove', scrub)
function scrub(e) {// this is the function which is not getting called at all 
    console.log('sigjeg')
    // const scrubtime = (e.offsetX / progress.offsetWidth) * videoelement.duration;
    // videoelement.currentTime = scrubtime
}
body
{
    background-color: blueviolet
}
.videos
{
    width: 50%;
    margin-left:20%;
    margin-right: 20%;
    margin-top:10%;
}
.controlplayer
{
    display:none;
    width: 50%;
    margin-left: 20%;
    margin-right: 20%;
    background-color: ;
}
#volume
{
    width: 36%;
    /* margin-left: 42%;
    margin-right: 40%; */
    margin-top: 0%;
    position: relative;
    display: inline;
}
#playbackspeed
{
    width:36%;
    /* margin-left:25%;
    margin-right:40%;
    margin-top:0; */
    position: relative;
    display: inline;
}
.r
{
     background-color: Transparent;
    border: none;           
    cursor:pointer; 
    width: 9%;
    /* margin-left: 60%;
    margin-right: 20%; */
    position: relative;
    display: inline;
}
<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Video Player</title>

    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css"
        integrity="sha384-Gn5384xqQ1aoWXA+058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm" crossorigin="anonymous">
    <link rel="stylesheet" href="videplayercss.css">
</head>

<body>
    <div class="videoplayer">
        <video src="yourvideo.mp4" autoplay class="videos"> </video>

    </div>
    <div class="controlplayer">
        <div class="progress">
            <div class="progress-bar  progress-bar-animated" role="progressbar" aria-valuenow="12" aria-valuemin="0"
                aria-valuemax="100" style="width: 25%; margin-bottom:5%;"></div>
        </div>
        <i class="fas fa-play"></i>
        <input type="range" min="0" max="1" value="1" step="0.01" id="volume">
        <input type="range" min="0.1" max="3" value="1" step="0.01" id="playbackspeed">
        <i class="fa fa-angle-double-left backward r">10s</i>
        <i class="fa fa-angle-double-right forward r">25s</i>
    </div>
    <script src="videoplayerjs.js"></script>
    <script src="https://code.jquery.com/jquery-3.2.1.slim.min.js"
        integrity="sha384-KJ3o2DKtIkvYIK3UENzmM7KCkRr/rE9/Qpg6aAZGJwFDMVNA/GpGFF93hXpG5KkN"
        crossorigin="anonymous"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.12.9/umd/popper.min.js"
        integrity="sha384-ApNbgh9B+Y1QKtv3Rn7W3mgPxhU9K/ScQsAP7hUibX39j7fakFPskvXusvfa0b4Q"
        crossorigin="anonymous"></script>
    <script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/js/bootstrap.min.js"
        integrity="sha384-JZR6Spejh4U02d8jOt6vLEHfe/JQGiRRSQQxSfFWpi1MquVdAyjUar5+76PVCmYl"
        crossorigin="anonymous"></script>
    <script src="https://kit.fontawesome.com/eb0a94b8cf.js" crossorigin="anonymous"></script>
</body>

</html>

标签： javascripthtmlcss

解决方案

我已经清理了您的代码，发现事件的目标是错误的元素（进度条填充而不是进度条本身）。

除了我刚刚看到的另一个答案之外，由于事件传播的工作方式（父元素将接收从嵌套元素冒泡的所有事件），因此无需同时定位两个元素（条形和填充）。

const videoElement = document.querySelector('.videos');
const pauseButton = document.querySelector('.fas');
const skipButton = document.querySelector('.forward');
const backButton = document.querySelector('.backward');
const speed = document.querySelector('#playbackSpeed');
const vol = document.querySelector('#volume');
const controls = document.querySelector('.control-player');
const progress = document.querySelector('.progress');

vol.addEventListener('change', setVol);
vol.addEventListener('mousedown', setVol);

function setVol() {
    videoElement.volume = vol.value;
}

speed.addEventListener('change', rate);
speed.addEventListener('mousedown', rate);

function rate() {
    videoElement.playbackRate = speed.value;
}

pauseButton.addEventListener('click', playing);

videoElement.addEventListener('click', playing);
videoElement.addEventListener('play', updateButton);
videoElement.addEventListener('pause', updateButton);
videoElement.addEventListener('timeupdate', handleProgress);
videoElement.addEventListener('mouseenter', () => {
    controls.style.display = 'block';
});

function updateButton() {
    if (videoElement.paused) {
        pauseButton.classList.remove('fa-pause');
        pauseButton.classList.add('fa-play');
    } else {
        pauseButton.classList.remove('fa-play');
        pauseButton.classList.add('fa-pause');
    }
}

function playing() {
    if (videoElement.paused) {
        videoElement.play();
        videoElement.controls = null;
        videoElement.firstChild.nodeValue = 'Play';
        pauseButton.classList.remove('fa-play');
        pauseButton.classList.add('fa-pause');
    } else {
        videoElement.pause();
        videoElement.firstChild.nodeValue = 'Pause';
        pauseButton.classList.remove('fa-pause');
        pauseButton.classList.add('fa-play');
    }
}

skipButton.addEventListener('click', function () {
    const t = videoElement.currentTime;
    if (t + 25 < videoElement.duration) {
        videoElement.currentTime = t + 25;
    } else {
        videoElement.currentTime = videoElement.duration;
    }
});

backButton.addEventListener('click', function () {
    let t = videoElement.currentTime;
    if (t - 10 >= 0) {
        videoElement.currentTime = t - 10;
    } else {
        videoElement.currentTime = 0;
    }
});

function handleProgress() {
    const percent = (videoElement.currentTime / videoElement.duration) * 100;
    progress.style.width = `${percent}%`;
}

progress.addEventListener('click', scrub);
progress.addEventListener('mousemove', scrub);

function scrub(e) {
    if (e.type === 'click') {
        console.log('click');
    } else {
        console.log('mousemove');
    }
}
body {
    background-color: #8a2be2;
}

.videos {
    width: 50%;
    margin-left: 20%;
    margin-right: 20%;
    margin-top: 10%;
}

.control-player {
    display: none;
    width: 50%;
    margin-left: 20%;
    margin-right: 20%;
}

#volume {
    width: 36%;
    margin-top: 0;
    position: relative;
    display: inline;
}

#playbackSpeed {
    width: 36%;
    position: relative;
    display: inline;
}

.r {
    background-color: transparent;
    border: none;
    cursor: pointer;
    width: 9%;
    position: relative;
    display: inline;
}

.progress-bar {
  height: 100%;
}
<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    
    <title>Video Player</title>

    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" integrity="sha384-Gn5384xqQ1aoWXA+058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm" crossorigin="anonymous">
</head>

<body>
<div class="video-player">
    <video src="" autoplay class="videos"> </video>
</div>

<div class="control-player">
    <div class="progress">
        <div class="progress-bar  progress-bar-animated" role="progressbar" aria-valuenow="12" aria-valuemin="0" aria-valuemax="100" style="width: 25%; margin-bottom: 5%;"></div>
    </div>
    <i class="fas fa-play"></i>
    
    <input type="range" min="0" max="1" value="1" step="0.01" id="volume">
    <input type="range" min="0.1" max="3" value="1" step="0.01" id="playbackSpeed">
    
    <i class="fa fa-angle-double-left backward r">10s</i>
    <i class="fa fa-angle-double-right forward r">25s</i>
</div>

<script src="https://code.jquery.com/jquery-3.2.1.slim.min.js" integrity="sha384-KJ3o2DKtIkvYIK3UENzmM7KCkRr/rE9/Qpg6aAZGJwFDMVNA/GpGFF93hXpG5KkN" crossorigin="anonymous"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.12.9/umd/popper.min.js" integrity="sha384-ApNbgh9B+Y1QKtv3Rn7W3mgPxhU9K/ScQsAP7hUibX39j7fakFPskvXusvfa0b4Q" crossorigin="anonymous"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/js/bootstrap.min.js" integrity="sha384-JZR6Spejh4U02d8jOt6vLEHfe/JQGiRRSQQxSfFWpi1MquVdAyjUar5+76PVCmYl" crossorigin="anonymous"></script>
<script src="https://kit.fontawesome.com/eb0a94b8cf.js" crossorigin="anonymous"></script></body>

</html>

推荐阅读