Javascript 如果已经预先设置了属性，如何防止再次设置属性？

我是Javascript新手，所以如果我使用了错误的术语，或者这很简单，我会提前道歉

我正在创建一个视频背景播放器，它使用Javascript设置视频标记的src值，这样它就可以像使用

@media（minwidth）

和

显示：none一样，只在指定的浏览器窗口宽度以上加载视频文件仍在触发视频src加载。如果浏览器窗口低于此分辨率，然后将其大小调整为等于或高于此特定的指定宽度，则应设置视频src的值

我遇到的一个问题是Javascript onResize事件在页面调整大小的整个过程中都会触发，因此背景视频会反复重新启动。所以我找到了这个，并用它来给它一个延迟，这样它只会在调整大小后设置视频src的值，而不是整个时间。现在，当浏览器窗口的大小从低于此指定宽度调整到高于此宽度时，将加载视频。但是，如果我再次调整它的大小，视频src将再次设置，导致闪烁（同时显示其后面的回退背景图像），视频将从一开始重新启动。由于这将运行循环视频，因此很容易看到此重新启动。如果已加载视频，如何防止视频重新启动？又称作如果已设置视频src，如何防止其被设置

我对Javascript了解不够，不知道下一步要尝试什么。我目前的代码已经从多个来源拼接在一起


// ON LOAD    

window.onload = function() {

    if (window.innerWidth >= 769) { // This only loads the video at or above this resolution. Make sure it matches "Desktop - load video with jpg fallback"

        document.querySelector("video.video-bg-player").src = "video_file.webm"; // WEBM video url (webm appears to be the best cross-browser file) 

    } 

};

// AFTER RESIZE   

var resizeId;
window.addEventListener('resize', function() {
    clearTimeout(resizeId);
    resizeId = setTimeout(doneResizing, 500);
});

function doneResizing(){

    if (window.innerWidth >= 769) { // This only loads the video at or above this resolution. Make sure it matches "Desktop - load video with jpg fallback"

        document.querySelector("video.video-bg-player").src = "video_file.webm"; // WEBM video url (webm appears to be the best cross-browser file) 

    } 

}    



当前在加载视频后调整窗口的大小会导致视频暂停并重新启动（由于视频src被再次设置）。如果视频src已经设置，则不应再次设置。
您应该能够通过将查询存储在一个变量中并检查该变量的
src
是否为空来实现它

// ON LOAD    

window.onload = function() {

    if (window.innerWidth >= 769) { // This only loads the video at or above this resolution. Make sure it matches "Desktop - load video with jpg fallback"

        document.querySelector("video.video-bg-player").src = "video_file.webm"; // WEBM video url (webm appears to be the best cross-browser file) 

    } 

};

// AFTER RESIZE   

var resizeId;
window.addEventListener('resize', function() {
    clearTimeout(resizeId);
    resizeId = setTimeout(doneResizing, 500);
});

function doneResizing(){

    if (window.innerWidth >= 769) { // This only loads the video at or above this resolution. Make sure it matches "Desktop - load video with jpg fallback"

        var el = document.querySelector("video.video-bg-player");
        if (el.src != "beer_bg3.webm")
            el.src = "beer_bg3.webm"; // WEBM video url (webm appears to be the best cross-browser file) 

    } 

}  

例如：

// ON LOAD    
var element;
window.onload = function() {

    if (window.innerWidth >= 769 && !element) { // This only loads the video at or above this resolution. Make sure it matches "Desktop - load video with jpg fallback"

        element = document.querySelector("video.video-bg-player");

        if (element.src != "video_file.webm")
           element.src = "video_file.webm"; // WEBM video url (webm appears to be the best cross-browser file) 

    } 

};

// AFTER RESIZE   

var resizeId;
window.addEventListener('resize', function() {
    clearTimeout(resizeId);
    resizeId = setTimeout(doneResizing, 500);
});

function doneResizing(){

    if (window.innerWidth >= 769 && !element) { // This only loads the video at or above this resolution. Make sure it matches "Desktop - load video with jpg fallback"

        element = document.querySelector("video.video-bg-player");

        if (element.src != "video_file.webm")
            element.src = "beer_bg3.webm"; // WEBM video url (webm appears to be the best cross-browser file) 

    } 

}    

我没有测试代码，但我认为应该是这样。
谢谢您的回答。如果窗口加载超过769px宽度，视频加载和大小调整确实会阻止src重新加载。非常感谢。但是，如果窗口加载低于769px宽度，则视频不会加载（应该加载），但当其大小调整为大于769px宽度时，则视频不会加载。在代码上使用inspect并调整大小时，我看到“src”确实没有改变。起初，我忽略了src，但认为这可能是导致问题的原因，所以我添加了它，但它仍然无法加载视频。你知道为什么吗？是的。视频源在加载时未设置为较小的宽度。请注意，只有一个视频文件名“video_file.webm”。我问题的前一个版本意外地有两个文件名。