javascript - javascript/html:替换嵌入式视频的内存泄漏？

Question

我想知道如何最好地替换网页上的嵌入式视频。我有一堆访问者可以选择和观看的视频文件(avi)。

我非常新的JavaScript和HTML，但什么我目前做的是嵌入在网页上为对象的影片，当选择一个新的视频，我改变对象的URL PARAM。这样可以正确更改视频，但是在播放了一些视频后，浏览器将无法响应。查看任务管理器，打开每个视频都会增加内存使用率。

我最初以为，由于该对象具有相同的ID，因此它将删除第一个视频并加载下一个视频。但是，似乎第一个视频仍在内存中。有一个更好的方法吗？

我正在使用Windows 7，Windows Media Player 12，IE8。我还想知道这是否与这些技术有关，因为当我在较旧的PC(Windows XP，WMP 9，IE8)上运行内存时，它似乎不会泄漏内存。

这基本上是我在做什么:
html中的视频标签:

    <object width="100%" height="100%" id="video"
    classid="CLSID:6BF52A52-394A-11d3-B153-00C04F79FAA6">
    <param name="url" value="video1.avi">
    <param name="autostart" value="1">
    <param name="uiMode" value="full" />
    </object>

然后，当用户选择新视频时(javascript-假设newVideoPath包含要播放的下一个视频的路径):

    $("video").url = newVideoPath;

我应该注意清理内存吗？

Answer 1

首先，我想提一下，我对跨浏览器视频嵌入没有太多经验。也许这些解释还是有帮助的。

基本上有两种播放视频的方法:使用浏览器播放视频和使用插件。

使用浏览器意味着您需要为不同的浏览器提供不同的视频文件。有用于Firefox的WebM或OGV，用于IE9和Safari的Chrome，Opera和H264。 IE8及以下版本完全不支持视频。

插件方法的优势在于您可以满足插件的需求。问题是您根本不知道是否存在诸如Windows Media Player，Flash或其他插件。

由此得出的结论是，您需要提供不同的媒体文件(不同的文件格式)才能获得相当高的视频播放可能性。 John Dyer's tutorial列出了要采取的重要步骤–但是，在尝试使用插件之前，您还应该提供WebM服务。提供AVI文件没有多大意义，因为该格式只是可以包含任何视频和音频编解码器的容器。

<video>
    <source src="myfile.mp4">
    <source src="myfile.ogg">
    <object src="flashplayer.swf?file=myfile.mp4">
        <embed src="flashplayer.swf?file=myfile.mp4">
    </object>
</video>

这段代码会尝试提供 myfile.mp4，如果 myfile.ogg失败，或者如果同样失败，则使用Adobe Flash提供 myfile.mp4。您可以使用可用的文件格式添加带有 source标记的文件。然后，浏览器将使用它理解的第一个文件。

本教程具有扩展版本，该版本首先使用JavaScript检测视频支持，并在必要时向Flash添加备用。您将用Windows Media Player替换Flash部件。
classid属性上的一个字:此属性引用指定的ActiveX控件。这有两个问题。 ActiveX仅在Windows上可用，在所有其他平台上都将失败。由于 classid指定了特定的控件，因此在没有完全插件实现的情况下Windows系统也将失败-因此请避免此类情况。因此，我建议先将HTML5方法与视频标签一起使用，然后再提供一些文件。这样做可以使浏览器选择合适的播放器，从而增加视频播放的变化。然后，需要添加一些JavaScript以提供备用。

最后，我们得到类似于以下内容:

<video id="video">
    <source src="myfile.webm">
    <source src="myfile.mp4">
    <source src="myfile.ogg">
</video>
<script type="text/javascript">
(function(){
    var dummy = document.createElement("video");
    // See if native video support is not available
    if(typeof(video.canPlayType)===undefined || video.canPlayType('video/webm') == '' || add other video types here corresponding to source tags){
        var videoElement = document.getElementById('video');
        var fallbackContainer = document.createElement('div');
        // Insert your HTML string for Windows Media, Flash, MPlayer or whatever else here
        var fallback = '…';
        fallbackContainer.innerHTML = fallback;
        // This replaces the native (not available) video player with the plugin
        videoElement.parentNode.replaceChild(fallbackContainer, videoElement);
    }
})();
</script>

您也可以使用 MediaElement.js之类的东西，从而避免自己处理所有不同的环境。

现在，让我们回到有关内存泄漏和更换视频的问题。如果脚本导致内存泄漏，则您使用的实现存在一些严重问题。但是在责怪实现之前，您应该确保确实存在泄漏。

垃圾收集(释放内存的过程)需要时间，因此只能在“合适的”时间进行，而不能尽快进行。因此，很可能是您的浏览器(或插件)在一段时间或内存不足时才清理。然后，无论何时更改视频，您都会看到内存增加，但这不会造成泄漏，因为最终会清除它。尝试通过多次更改视频来触发垃圾回收，直到用完内存–清理会发生吗？尝试在浏览器中更改标签或关闭标签-是否进行清理？如果您现在看过清理，则可能无需担心泄漏。该实现只是认为您的测试用例不需要释放内存。

如果发现确实有泄漏，您可以尝试分离视频以使用新视频，而不是替换旧视频。为此，请使用与以前相同的方法:

var oldVideoElement = document.getElementById('video');
// Add some video element creation here for the new video
var newVideoElement = …;
// Replace video but make the browser aware of the replacement by using DOM methods
oldVideoElement.parentNode.replaceChild(newVideoElement, oldVideoElement);
// Get rid of the reference to the old video (just in case IE8 has still problems with discarding references)
var oldVideoElement = null;

使用DOM方法可以使浏览器从内存中完全删除插件。幸运的是，您的泄漏现在消失了。使用相同的技术通过创建新视频来切换文件，并使用它来替换旧视频(整个元素，而不仅仅是文件名)。

如果这样做没有帮助，则您需要提供更多信息:您要针对哪些操作系统和浏览器？您知道存在特定的插件吗？ AVI文件中包含哪些视频和音频编解码器？