如何在Safari中无错误停止HTML5视频HLS流？

直接清空或移除video的src属性会触发Safari的error事件，这是因为Safari对无效媒体源的处理逻辑与其他浏览器存在差异。以下是两种可靠的解决方法：

方法一：使用空Blob作为临时媒体源 #

通过创建空的HLS类型Blob替换原视频源，既能终止原HLS流的后台请求，又不会触发error事件：

video.pause();
// 创建空的HLS格式Blob
const emptyHlsBlob = new Blob([], { type: 'application/x-mpegURL' });
// 设置临时Blob URL作为视频源
video.src = URL.createObjectURL(emptyHlsBlob);
video.load();
// 延迟释放Blob URL，避免内存泄漏
setTimeout(() => {
  URL.revokeObjectURL(video.src);
}, 1000);

方法二：克隆并替换video元素 #

克隆一个不含src的video元素替换原元素，原元素的资源会被浏览器自动清理，不会触发错误：

video.pause();
// 克隆不含src的video元素（false表示不克隆子节点）
const newVideo = video.cloneNode(false);
// 按需保留原有的事件监听器
newVideo.addEventListener('error', (e) => {
  console.error(e);
});
// 替换原元素
video.parentNode.replaceChild(newVideo, video);
// 更新变量指向新元素，方便后续操作
video = newVideo;

内容的提问来源于stack exchange，提问作者jacob_frankovic