vue+dplayer,播放hls视频,切换视频后,但是还是在一直发请求数据 ,如何解决
时间: 2024-06-09 21:07:42 浏览: 227
vue2.0+vue-dplayer实现hls播放的示例
5星 · 资源好评率100%
这个问题可能是由于切换视频后,DPlayer 没有正确的销毁旧的视频资源导致的。你可以在切换视频的时候,先调用 `DPlayer.destroy()` 方法销毁旧的视频资源,然后再创建新的 DPlayer 实例来播放新的视频。
具体的实现方法可以参考以下示例代码:
```js
// 创建 DPlayer 实例
var dp = new DPlayer({
container: document.getElementById('dplayer'),
video: {
url: 'https://example.com/video1.m3u8',
type: 'hls'
}
});
// 切换视频
function switchVideo() {
// 销毁旧的 DPlayer 实例
dp.destroy();
// 创建新的 DPlayer 实例
dp = new DPlayer({
container: document.getElementById('dplayer'),
video: {
url: 'https://example.com/video2.m3u8',
type: 'hls'
}
});
}
// 绑定切换视频事件
var switchBtn = document.getElementById('switch-btn');
switchBtn.onclick = function() {
switchVideo();
};
```
这样就可以避免切换视频后一直发请求数据的问题。
阅读全文