😡 MuiPlayer && Hls.js 播放m3u8视频,销毁后依然不断请求 ts 文件

此问题MuiPlayer作者已在新版本修复

问题描述

• 在使用 MuiPlayer 播放器配合 Hls.js 播放 m3u8 视频时,会不断的请求 ts 文件,即时离开了当前播放页面,依然会不断的请求 ts 文件
  • 如图:
• 刚开始遇到这个问题的时候,面向百度看了很多帖子,大部分解决办法都是, 在页面销毁前生命周期 beforeDestroy 中先调用 Hls.js 的销毁方法 Hls.destroy(),然后调用播放器本身的销毁方法 muiplayer.destory()
• 这个时候就出现了和臆想画面不一样的错误,按照上面的解决办法写下来你会发现 MuiPlayer播放器在使用 Hls.js时是没有在外部 实例化 Hls 的,这样就会导致你想要销毁 Hls 时,发现直接调用 Hls.destroy 会发生报错 , 因为 Hls没有在你的播放页去进行实例化,也就是说在你的播放页面是获取不到播放器里使用的那个 Hls 的所以调用 Hls.destroy 会报错

解决问题

• 既然在当前页面找不到 你真正使用的那个 Hls ,那就想想 Hls 被谁使用了 -- MuiPlayer
• MuiPlayer 使用了 Hls 来播放 m3u8 视频,那我们就得去看看 在 MuiPlayer 里调用 Hls.destroy 是否能不报错并达到销毁对ts文件请求的效果
  • 在 mui-player.min.js 文件中找到传入的 Hls,然后发现 这个 形参 o 就是我们传入的 Hls,然后它实例化之后赋值给了 i ,那么此时这个 i 就是我们要找的那个 "大宝贝",我们创建一个变量把它存储起来
    • 
• 之后我的想法是:在调用播放器的销毁事件时,同步销毁掉 Hls,然后我就去找播放器的销毁方法 --destory
• 我在 destory 中加入了我刚才存储的 Hls对象然后调用 Hls 的 destroy方法去进行销毁
  • 
• 当操作进行到这里的时候,我们文章的标题 销毁m3u8不断请求ts文件 的问题就解决了

萌新第一次写文章,记录一下遇到的问题,如果碰巧能帮助到同学们就再好不过啦~