How can I prevent the property from being set again if it is already pre-set?
I'm new to the Java language, so I apologize in advance if I'm using the wrong terminology, or if it's simple.
I'm creating a video background player that uses Javascript to set the value of the video tag's src so that it only loads the video file above a certain specified browser window width, as using with @media (min-width)will display: none;still trigger the loading of the video src . The value of video src should be set if the browser window is lower than this resolution and then resized to be equal to or larger than this specified width.
One issue I'm having is that the Javascript onResize event is firing the entire time the page is resized, so the background video restarts repeatedly. So I found this code and used it to give a delay so that the value of the video src is only set after the resize, not the whole time. The video will now load when the browser window is resized from below the specified width to above it. However, if I resize it again, the video src is set again and causes flickering (while it shows a fallback background image behind it), and the video starts over again from the beginning. Since this will run a looping video, it's easy to see a restart. How can I prevent the video from restarting if it is already loaded? aka how to prevent the video src from being set if it is already set?
I don't know enough about Javascript to know what to do next. The code I currently have is stitched together from multiple sources.
// 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)
}
}
After the video has loaded, currently resizing the window causes the video to pause and restart (due to the video src being set again). If the video src is already set, it should not be set again.
You should be able to achieve this by storing the query in a variable and checking if the in of that variable srcis empty .
E.g:
// 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)
}
}
I haven't tested the code, but this is what I think it should be.