video.js dispose function doesn't delete HTMLVideoElement.

Description

The video element is actually removed on UI but the HTMLVideoElement is still in memory.

Steps to reproduce

Explain in detail the exact steps necessary to reproduce the issue.

Load the html file on chrome
Open DevTools(F12) and go to Memory tab
Take snapshot
Toggle button 5 times
Take snapshot again
Compare the number of HTMLVideoElement between 2 snaptops.

Results

Expected

Expected result would be the number of HTMLVideoElement should be the same regardless of deleting and recreating the video.

Before toggle videojs error1

After toggle 5 times videojs error2

Actual

The video element is actually removed on UI but HTMLVideoElement is still in memory.

Error output

Additional Information

Videojs version : 7.10.2 Jquery version : 3.5.1 Browsers : Chrome Version 86.0.4240.198 (Official Build) (64-bit) OS : Windows 10 Professional

Tested HTML

<html lang="en">
<head>
    <meta charset="UTF-8">
    <link href="https://vjs.zencdn.net/7.10.2/video-js.css" rel="stylesheet" />
    <script src="https://code.jquery.com/jquery-3.5.1.js"></script>
    <script src="https://vjs.zencdn.net/7.10.2/video.js"></script>
    <title>Title</title>
    <script>
	    $(document).ready(function(){
	    	let videoObj;
		    $("#toggle").click(() => {
		    	const toggle = $("#toggle").prop("checked");
			    if(toggle){
			    	$("#videoArea").append("<video id=\"videoElement\"></video>");
                    videoObj = videojs("videoElement");
                    videoObj.src("https://multiplatform-f.akamaihd.net/i/multi/will/bunny/big_buck_bunny_,640x360_400,640x360_700,640x360_1000,950x540_1500,.f4v.csmil/master.m3u8");
                    videoObj.play();
                }
			    else {
				    videoObj.dispose();
				    videoObj = null;
                }
		    });
        });
    </script>

    <style>
        .switch {
            position: relative;
            display: inline-block;
            width: 60px;
            height: 34px;
        }

        .switch input {
            opacity: 0;
            width: 0;
            height: 0;
        }

        .slider {
            position: absolute;
            cursor: pointer;
            top: 0;
            left: 0;
            right: 0;
            bottom: 0;
            background-color: #ccc;
            -webkit-transition: .4s;
            transition: .4s;
        }

        .slider:before {
            position: absolute;
            content: "";
            height: 26px;
            width: 26px;
            left: 4px;
            bottom: 4px;
            background-color: white;
            -webkit-transition: .4s;
            transition: .4s;
        }

        input:checked + .slider {
            background-color: #2196F3;
        }

        input:focus + .slider {
            box-shadow: 0 0 1px #2196F3;
        }

        input:checked + .slider:before {
            -webkit-transform: translateX(26px);
            -ms-transform: translateX(26px);
            transform: translateX(26px);
        }

        .slider.round {
            border-radius: 34px;
        }

        .slider.round:before {
            border-radius: 50%;
        }
    </style>
</head>
<body>
    <div>
        <label class="switch">
            <input type="checkbox" id="toggle">
            <span class="slider round"></span>
        </label>
    </div>
    <div id="videoArea">
    </div>
</body>
</html>`

Nov 19 '20 18:11 videojsuser

👋 Thanks for opening your first issue here! 👋

If you're reporting a 🐞 bug, please make sure you include steps to reproduce it. We get a lot of issues on this repo, so please be patient and we will get back to you as soon as we can. To help make it easier for us to investigate your issue, please follow the contributing guidelines.

Nov 19 '20 18:11 welcome[bot]

Hm... it's possible we still have some reference to it somewhere. We've recently when through and did a survey of such things and removed them. I guess it's time to do so again.

Nov 30 '20 21:11 gkatsev

This issue has been automatically marked as stale because it has not had recent activity. It will be closed if no further activity occurs. Thank you for your contributions.

Apr 29 '22 04:04 stale[bot]

@gkatsev Any update here?

Oct 29 '22 03:10 venomone

m

Apr 10 '24 03:04 jiajiayao

I find a way to delete HTMLVideoElement in the memory,which uses document.getElementsByYagName("video")[0].removeAttribute("src"); before destroy the player by using videoObj.dispose();videoObj = null;.HTMLVideoElement in the memeory will be recycled.

Apr 11 '24 01:04 jiajiayao

video.js video.js copied to clipboard

dispose function doesn't delete HTMLVideoElement.

Description

Steps to reproduce

Results

Expected

Actual

Error output

Additional Information

video.js
video.js copied to clipboard