dispose function doesn't delete HTMLVideoElement.

videojsuser commented 3 years ago

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>`

welcome[bot] commented 3 years ago

👋 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.

gkatsev commented 3 years ago

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.

stale[bot] commented 2 years ago

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.

ghost commented 1 year ago

@gkatsev Any update here?

jiajiayao commented 2 months ago

m

jiajiayao commented 2 months ago

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.

videojs / video.js