如何在HTML中仅加载适当的视频？

<video src="video.mp4" controls></video>

<div id="video-container"></div>

<script>
    var video = document.createElement('video');
    video.src = 'video.mp4';
    video.controls = true;
    document.getElementById('video-container').appendChild(video);
</script>

<video data-src="video.mp4" controls></video>

<script>
    var videos = document.getElementsByTagName('video');
    var windowHeight = window.innerHeight;

    function lazyLoad() {
        for (var i = 0; i < videos.length; i++) {
            var video = videos[i];
            var rect = video.getBoundingClientRect();

            if (rect.top >= 0 && rect.bottom <= windowHeight) {
                video.src = video.getAttribute('data-src');
            }
        }
    }

    window.addEventListener('scroll', lazyLoad);
    window.addEventListener('resize', lazyLoad);
    lazyLoad();
</script>