diff --git a/docs/guide.md b/docs/guide.md index 159cef2..97866b3 100644 --- a/docs/guide.md +++ b/docs/guide.md @@ -412,15 +412,56 @@ const dp = new DPlayer({ }); ``` +When using `customType` ([Work with other MSE library](#work-with-other-mse-library)), you should listen for the `destroy` and `quality_end` events to destroy the MSE library instance in a timely manner to avoid memory leaks. + +```js +const dp = new DPlayer({ + container: document.getElementById('dplayer'), + video: { + quality: [ + { + name: 'HD', + url: 'demo_hd.m3u8', + type: 'Hls', + }, + { + name: 'SD', + url: 'demo_sd.m3u8', + type: 'Hls', + }, + ], + defaultQuality: 0, + customType: { + Hls: (video, player) => { + const hls = new window.Hls(); + hls.loadSource(video.src); + hls.attachMedia(video); + + hls.sessionId = crypto.randomUUID(); + player.sessionId = hls.sessionId; + player.events.on('destroy', () => { + hls.destroy(); + }); + player.events.on('quality_end', () => { + if (hls.sessionId !== player.sessionId) { + hls.destroy(); + } + }); + }, + }, + }, +}); +``` + ## Danmaku ### Danmaku API `danmaku.api` -**Ready-made API** + Daily backup data: [DPlayer-data](https://github.com/DIYgod/DPlayer-data) @@ -788,4 +829,4 @@ For full browser support it should look like this: ### Why can't player autoplay in some mobile browsers? -Most mobile browsers forbid video autoplay, you wont be able to achieve it without hacks. +Most mobile browsers forbid video autoplay, you wont be able to achieve it without hacks. \ No newline at end of file diff --git a/docs/zh/guide.md b/docs/zh/guide.md index 113ca6f..6e17247 100644 --- a/docs/zh/guide.md +++ b/docs/zh/guide.md @@ -396,15 +396,56 @@ const dp = new DPlayer({ }); ``` +在使用 `customType` [配合其他 MSE 库使用](#配合其他-mse-库使用)时,需要监听 `destroy` 和 `quality_end` 事件及时销毁 MSE 库实例,避免内存泄漏 + +```js +const dp = new DPlayer({ + container: document.getElementById('dplayer'), + video: { + quality: [ + { + name: 'HD', + url: 'demo_hd.m3u8', + type: 'Hls', + }, + { + name: 'SD', + url: 'demo_sd.m3u8', + type: 'Hls', + }, + ], + defaultQuality: 0, + customType: { + Hls: (video, player) => { + const hls = new window.Hls(); + hls.loadSource(video.src); + hls.attachMedia(video); + + hls.sessionId = crypto.randomUUID(); + player.sessionId = hls.sessionId; + player.events.on('destroy', () => { + hls.destroy(); + }); + player.events.on('quality_end', () => { + if (hls.sessionId !== player.sessionId) { + hls.destroy(); + } + }); + }, + }, + }, +}); +``` + ## 弹幕 ### 弹幕接口 `danmaku.api` -**现成的接口** + 每日备份: [DPlayer-data](https://github.com/DIYgod/DPlayer-data) @@ -772,4 +813,4 @@ dp.danmaku.draw(danmaku); ### 为什么播放器不能在手机上自动播放? -大多数移动端浏览器禁止了视频自动播放。 +大多数移动端浏览器禁止了视频自动播放。 \ No newline at end of file diff --git a/src/js/player.js b/src/js/player.js index a877236..b1343f2 100644 --- a/src/js/player.js +++ b/src/js/player.js @@ -382,6 +382,7 @@ class DPlayer { this.type = 'normal'; } + const src = this.quality.url; // 真实的视频 url, 用于切换清晰度时销毁实例 switch (this.type) { // https://github.com/video-dev/hls.js case 'hls': @@ -396,6 +397,12 @@ class DPlayer { hls.destroy(); delete this.plugins.hls; }); + // 切换清晰度时销毁实例 + this.events.on('quality_end', () => { + if (src !== this.quality.url) { + hls.destroy(); + } + }); } else { this.notice('Error: Hls is not supported.'); } @@ -424,6 +431,14 @@ class DPlayer { flvPlayer.destroy(); delete this.plugins.flvjs; }); + // 切换清晰度时销毁实例 + this.events.on('quality_end', () => { + if (src !== this.quality.url) { + flvPlayer.unload(); + flvPlayer.detachMediaElement(); + flvPlayer.destroy(); + } + }); } else { this.notice('Error: flvjs is not supported.'); } @@ -444,6 +459,12 @@ class DPlayer { window.dashjs.MediaPlayer().reset(); delete this.plugins.dash; }); + // 切换清晰度时销毁实例 + this.events.on('quality_end', () => { + if (src !== this.quality.url) { + window.dashjs.MediaPlayer().reset(); + } + }); } else { this.notice("Error: Can't find dashjs."); } @@ -473,6 +494,13 @@ class DPlayer { client.destroy(); delete this.plugins.webtorrent; }); + // 切换清晰度时销毁实例 + this.events.on('quality_end', () => { + if (src !== this.quality.url) { + client.remove(torrentId); + client.destroy(); + } + }); } else { this.notice('Error: Webtorrent is not supported.'); }