更新 2:已经在 video.js github 上报告了错误。不过我还是没找到这个bug的原因。所以这个问题仍然悬而未决。
不得不说,给-2的那两个人都是不讲理、不顾一切的蠢人。
<小时/>更新:我不知道谁给了这个问题-1,尤其是他无法回答。
我尝试打印出所有创建的新组件和废弃的 video-js 组件。
我发现,调用player.dispose后,虽然大部分组件,包括外层DIV、内层VIDEO都被释放了,但还有一些内层组件,包括2个DIV、3个LI、2个BUTTON和很多SELECT都被释放了未处理。
我认为那些未处理的元素保留在 vjs.cache 中,并且因为事件监听器回调(可能是闭包)依赖于玩家对象本身的上下文。因此,即使主 DIV 和 VIDEO 从 vjs.cache 中删除,主播放器也永远不会被释放。
具体来说,未从 vjs.cache 中删除的项目包括:
1. DIV with contents: <ul class="vjs-menu-content"></ul>
2. Another DIV with contents: <ul class="vjs-menu-content"></ul>
3. LI with contents: subtitles off, captions off, and English
4. BUTTONs with contents: done and defaults
5. SELECTs with contents:
5.1) <option value="">---</option><option value="#FFF">White</option><option value="#000">Black</option><option value="#F00">Red</option><option value="#0F0">Green</option><option value="#00F">Blue</option><option value="#FF0">Yellow</option><option value="#F0F">Magenta</option><option value="#0FF">Cyan</option>
5.2) <option value="">---</option><option value="1">Opaque</option><option value="0.5">Semi-Opaque</option>
5.3) <option value="0.50">50%</option><option value="0.75">75%</option><option value="1.00" selected="">100%</option><option value="1.25">125%</option><option value="1.50">150%</option><option value="1.75">175%</option><option value="2.00">200%</option><option value="3.00">300%</option><option value="4.00">400%</option>
5.4) <option value="none">None</option><option value="raised">Raised</option><option value="depressed">Depressed</option><option value="uniform">Uniform</option><option value="dropshadow">Dropshadow</option>
5.5) <option value="">Default</option><option value="monospaceSerif">Monospace Serif</option><option value="proportionalSerif">Proportional Serif</option><option value="monospaceSansSerif">Monospace Sans-Serif</option><option value="proportionalSansSerif">Proportional Sans-Serif</option><option value="casual">Casual</option><option value="script">Script</option><option value="small-caps">Small Caps</option>
我仍在寻找如何删除它们。
我只是想知道为什么video.js直到5.0.0版本都没有考虑过这样的内存泄漏。
<小时/>原始问题:
我只有 2 个按钮,1 个用于添加视频,1 个用于删除视频。
视频源在我的本地机器上,您可以更改视频源进行测试。
源码如下,简单易懂。
这段代码(使用chrome内存快照)的问题是,
- 初始:内存 5.5MB
- 点击添加后,内存:6.5MB(我的视频每个视频大约800k-1MB)
- 点击删除时,内存:6.3MB
- 再次点击添加时,内存:6.8MB
- 点击删除时,内存:6.7MB
- 再次点击添加时,内存:7.0MB
等等
内存只是堆积起来。
video-js 版本是 4.12.7。我尝试了 video-js 5.0.0,但没有运气,都是一样的。
有人知道我的代码有什么问题或者 video-js 有什么问题吗?如何防止这种泄漏?
谢谢。
<link href="/js/video-js/video-js.css" rel="stylesheet">
<script src="/js/video-js/video.dev.js"></script>
<script src="/js/jquery-1.11.2.min.js"></script>
<script>
function video_html(id) {
return '<video id="video-js-player" class="video-js vjs-default-skin" ' +
' preload="auto" width="960" height="540" crossorigin="anonymous" ' +
'data-setup=\'{"example_option":true}\'>' +
'\t<source src="http://192.168.101.1:20001/live/' + id + '.mp4" type="video/mp4" /> \n' +
'\t\t<track id="video-vtt" kind="subtitle" label="english" srclang="en" src="http://192.168.101.1:20001/live/' + id + '.vtt" default></track>\n ' +
'\t\t<p class="vjs-no-js">To view this video please enable JavaScript, and consider upgrading to a web browser that <a href="http://videojs.com/html5-video-support/" target="_blank">supports HTML5 video</a></p>\n' +
'</video>';
};
var player;
var insertVideo = function(){
console.log("insert video");
$.ajax({
method:"GET",
data:{},
url: "http://192.168.101.1:20001/live/list",
success: function(list){
keys = list["keys"];
newest_key = keys[keys.length - 1];
$("#video-container").html(video_html(newest_key));
player = videojs("video-js-player", {}, function() {} );
}
});
};
var removeVideo = function() {
console.log("remove video");
$('#video-container').html('');
if (player) {
player.dispose();
player = null;
}
}
$(document).ready(function() {
$('#delete').click(function(e){
e.preventDefault();
removeVideo();
});
$('#add').click(function(e){
e.preventDefault();
removeVideo();
insertVideo();
});
});
</script>
<a id="add" href="#add">Add</a>
<a id="delete" href="#delete">Delete</a>
<div class="container" id="video-container">
</div>
最佳答案
我已经找到了这个bug,并向video-js提交了bug报告。了解更多信息,请阅读
https://github.com/videojs/video.js/issues/2686
希望它对任何使用 video.js 的人有所帮助。
关于javascript - 所有浏览器上的 javascript 和 video-js 中的内存泄漏(以最简单的示例),我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/32980125/