dplayer使用for循环生成,怎么添加 const progress = document.querySelector('.dplayer-bar-wrap'); progress.addEventListener('click', (e) => { const percent = e.offsetX / progress.offsetWidth; player.seek(player.duration * percent); }); }
时间: 2023-06-19 12:07:34 浏览: 74
你可以将这段代码放在dplayer的初始化代码之后。例如:
```javascript
const dp = new DPlayer({
// dplayer的配置
});
const progress = document.querySelector('.dplayer-bar-wrap');
progress.addEventListener('click', (e) => {
const percent = e.offsetX / progress.offsetWidth;
dp.seek(dp.video.duration * percent);
});
```
这样,当用户点击进度条时,就会触发这段代码,将视频跳转到相应的位置。注意,这里的 `player` 要改成 `dp`,因为我们是用 `const dp = new DPlayer()` 定义的 dplayer 实例。
相关问题
多个播放器怎么调用 const progress = document.querySelector('.dplayer-bar-wrap'); progress.addEventListener('click', (e) => { const percent = e.offsetX / progress.offsetWidth; dp.seek(dp.video.duration * percent); });
如果你有多个播放器,你需要为每个播放器分别调用这个代码。你可以将代码包装在一个函数中,然后在需要的时候调用该函数。例如:
```
function initProgressListener(dp) {
const progress = dp.container.querySelector('.dplayer-bar-wrap');
progress.addEventListener('click', (e) => {
const percent = e.offsetX / progress.offsetWidth;
dp.seek(dp.video.duration * percent);
});
}
// 初始化第一个播放器
const dp1 = new DPlayer({
container: document.getElementById('dplayer1'),
video: {
url: 'video1.mp4'
}
});
initProgressListener(dp1);
// 初始化第二个播放器
const dp2 = new DPlayer({
container: document.getElementById('dplayer2'),
video: {
url: 'video2.mp4'
}
});
initProgressListener(dp2);
```
在上面的代码中,我们定义了一个 `initProgressListener` 函数,它接受一个播放器实例作为参数,并为该播放器添加进度条点击事件监听器。然后我们在初始化每个播放器时调用该函数,以添加相应的事件监听器。
const dplayerClick = document.querySelector('.dplayer') dplayerClick.onClick(()=>{ console.log('点击了播放器'); })
你的代码几乎正确,只是 `onClick` 方法应该是小写的 `onclick`,并且应该使用 `addEventListener` 方法来添加事件监听器。以下是一个修正后的代码:
```javascript
const dplayerClick = document.querySelector('.dplayer');
dplayerClick.addEventListener('click', () => {
console.log('点击了播放器');
});
```
在上面的代码中,我们首先使用 `querySelector` 方法获取了 `.dplayer` 类名的元素,并将其保存在 `dplayerClick` 变量中。然后我们使用 `addEventListener` 方法来添加 `click` 事件监听器,并在监听器的回调函数中输出了一条消息。请注意,我们不需要使用箭头函数来定义回调函数,你也可以使用普通函数来定义。