从 DOM 中删除后视频还在播放,如何完全删除?
Video still playing after removal from DOM, how to eliminate completely?
我的网站上有一个容器,每当某种类型的 link 出现时,我就会通过 jQuery Ajax/XHR
动态注入新内容点击。
对于某些页面,此容器包含一个网格,其中有多个 HTML5 <video>
元素循环播放。
在某些时候,我遇到了几次 XHR requests
替换容器内的内容后性能下降的情况。将我的视频取消静音后,我仅通过扬声器发出的音频才意识到它们实际上一直在 播放 ,即使它们已完全从 DOM
中移除(这意味着我有很多在我的容器中进行几次 XHR
替换后播放的视频数量,这些视频实际上已经不在 DOM
中了)。
我现在尝试了一些方法,none 其中似乎有帮助:
- 对
XHR request
之前的所有视频使用 jQuery 的 .remove()
在我注入新内容之前从 DOM
中删除视频
- 在加载新内容之前通过
Javascript
暂停视频
这似乎只是随机工作,这让我抓狂。有时一些或所有视频从关闭的某个地方继续播放,与新视频内容重叠。此外,它们没有出现在 Chrome DevTool 的网络选项卡中……
我觉得由于缓冲的东西只是经典 DOM-querying
和操作在这里不起作用......我可以在我的 pre-XHR 请求函数中放入什么的任何提示以确保任何当前 [= DOM
中的 12=] 内容(和关闭,在缓冲区和其他地方)真的被 100% 删除,换句话说“被杀死”?
编辑: 这是我的问题的简化演示,尝试单击 links 将 div
的内容与 ID
#content
http://www.letrip.de/html5video-problem/
你可以通过在 URL
中添加 /js/app.js 来查看 Javascript
添加视频作为模板..并将此模板分配给一个变量并使用它,当您要删除它时将其设为空。
例如。 var vdo=
做你的操作然后让它为空
Vdo = null;
变化:
var content = $(data).find('#content');
html = content.html();
$('#content').html(html);
至:
var = content = $("#content",data);
$('#content').html(content);
此致
更新
只要你这样做:$(data) 问题就会 return。
尝试对 return 标题执行此操作:
var titledata = data.match("(.*?)")[1];
console.log(titledata);
我的网站上有一个容器,每当某种类型的 link 出现时,我就会通过 jQuery Ajax/XHR
动态注入新内容点击。
对于某些页面,此容器包含一个网格,其中有多个 HTML5 <video>
元素循环播放。
在某些时候,我遇到了几次 XHR requests
替换容器内的内容后性能下降的情况。将我的视频取消静音后,我仅通过扬声器发出的音频才意识到它们实际上一直在 播放 ,即使它们已完全从 DOM
中移除(这意味着我有很多在我的容器中进行几次 XHR
替换后播放的视频数量,这些视频实际上已经不在 DOM
中了)。
我现在尝试了一些方法,none 其中似乎有帮助:
- 对
XHR request
之前的所有视频使用 jQuery 的 .remove()
在我注入新内容之前从DOM
中删除视频 - 在加载新内容之前通过
Javascript
暂停视频
这似乎只是随机工作,这让我抓狂。有时一些或所有视频从关闭的某个地方继续播放,与新视频内容重叠。此外,它们没有出现在 Chrome DevTool 的网络选项卡中……
我觉得由于缓冲的东西只是经典 DOM-querying
和操作在这里不起作用......我可以在我的 pre-XHR 请求函数中放入什么的任何提示以确保任何当前 [= DOM
中的 12=] 内容(和关闭,在缓冲区和其他地方)真的被 100% 删除,换句话说“被杀死”?
编辑: 这是我的问题的简化演示,尝试单击 links 将 div
的内容与 ID
#content
http://www.letrip.de/html5video-problem/
你可以通过在 URL
中添加 /js/app.js 来查看 Javascript添加视频作为模板..并将此模板分配给一个变量并使用它,当您要删除它时将其设为空。
例如。 var vdo=
做你的操作然后让它为空
Vdo = null;
变化:
var content = $(data).find('#content'); html = content.html(); $('#content').html(html);
至:
var = content = $("#content",data); $('#content').html(content);
此致
更新 只要你这样做:$(data) 问题就会 return。 尝试对 return 标题执行此操作:
var titledata = data.match("(.*?)")[1]; console.log(titledata);