javascript - 如果已经预先设置了一个属性，如何防止再次设置该属性？

Question

我是 Javascript 的新手，所以如果我使用了错误的术语或者这很容易做到，我提前道歉。

我正在创建一个视频背景播放器，它使用 Javascript 来设置视频标签的 src 值，以便它只加载特定浏览器窗口宽度以上的视频文件，如使用 @media (min- width) 与 display: none; 仍然触发视频 src 加载。如果浏览器窗口低于此分辨率，然后将其大小调整为等于或高于此特定指定宽度，则视频 src 应设置其值。

我遇到的一个问题是 Javascript onResize 事件在整个调整页面大小时触发，因此背景视频反复重新启动。所以我找到了这个 code并用它来给它一个延迟，这样它只会在调整大小完成后设置视频 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) 

    } 

}    

当前在视频加载后调整窗口大小会导致视频暂停并重新开始(由于再次设置了视频源)。如果已经设置了视频源，则不应再次设置。

Answer 1

您应该能够通过将查询存储在一个变量中并检查该变量的 src 是否为空来实现它。

例如:

// 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) 

    } 

}    

我没有测试代码，但我认为应该是这样。