xgplayer根据当前点击的进度条位置,修改播放位置
时间: 2024-02-24 16:53:55 浏览: 149
Vue中使用XgPlay.js播放 flv视频
要根据当前点击的进度条位置修改播放位置,可以通过以下步骤实现:
1.获取进度条元素和播放器容器元素
```javascript
var progress = document.querySelector('.xgplayer-progress');
var player = document.querySelector('.xgplayer');
```
2.监听进度条的点击事件
```javascript
progress.addEventListener('click', function(e) {
// 获取点击位置和进度条总长度
var x = e.pageX - progress.getBoundingClientRect().left;
var width = progress.offsetWidth;
// 计算出点击位置所对应的播放时间
var newTime = player.duration * (x / width);
// 修改播放器的当前时间
player.currentTime = newTime;
});
```
通过监听进度条的点击事件,可以获取到点击位置和进度条总长度,从而计算出点击位置所对应的播放时间。然后,将计算出的播放时间赋值给播放器的`currentTime`属性,即可实现修改播放位置的功能。
阅读全文