如何正确卸载/销毁视频元素

基础概念

视频元素（<video>）是HTML5中用于嵌入视频内容的标准元素。正确卸载/销毁视频元素意味着释放与之相关的资源，以避免内存泄漏和其他潜在问题。

类型

手动卸载：通过JavaScript手动移除视频元素及其相关资源。
自动卸载：利用浏览器的垃圾回收机制自动处理不再使用的视频元素。

应用场景

页面切换：当用户从一个包含视频的页面跳转到另一个页面时，需要卸载当前页面的视频元素。
组件销毁：在单页应用（SPA）中，当某个包含视频的组件被销毁时，需要卸载该组件的视频元素。

如何正确卸载/销毁视频元素

以下是一个示例代码，展示如何正确卸载/销毁视频元素：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Video Unload Example</title>
</head>
<body>
    <div id="video-container">
        <video id="my-video" width="320" height="240" controls>
            <source src="movie.mp4" type="video/mp4">
            Your browser does not support the video tag.
        </video>
    </div>
    <button onclick="unloadVideo()">Unload Video</button>

    <script>
        function unloadVideo() {
            const videoElement = document.getElementById('my-video');
            if (videoElement) {
                // 停止播放
                videoElement.pause();
                // 清除源
                videoElement.src = '';
                videoElement.load();
                // 移除视频元素
                videoElement.parentNode.removeChild(videoElement);
            }
        }
    </script>
</body>
</html>