我想根據一天中的時間顯示 4 個不同的視頻（我知道我只有兩個），我嘗試過這種方式，但不知何故它不起作用，有人可以告訴我原因或以另一種有效的方式幫助我嗎？
setInterval(function() {
var Today = new Date();
var H = Today.getHours();
if (H >= 5 && H < 12) {
console.log("morning");
document.getElementById("vid1").style.display = "block";
document.getElementById("vid2").style.display = "none";
} else if (H >= 12 && H < 21) {
console.log("evening");
document.getElementById("vid2").style.display = "block";
document.getElementById("vid1").style.display = "none";
} else {
console.log("night");
}
}, 3000);<div>
<video id="vid1" muted autoplay>
<source src="video/goodmorning.mp4" type="video/mp4">
</video>
</div>
<div>
<video id="vid2" controls>
<source src="video/teste.mp4" type="video/mp4">
</video>
</div>uj5u.com熱心網友回復：
更好的方法是直接改變src的<source>標簽，你可以申請muted，controls并且autoplay它。
let video = document.querySelector('video')
let source = document.querySelector('source')
setInterval(function () {
var Today = new Date();
var H = Today.getHours();
if (H >= 5 && H < 12 ) {
source.src='video/goodmorning.mp4'
video.muted = true
video.autoplay =true
video.controls = false;
video.load()
}
else if (H >= 12 && H < 21) {
video.muted = false
video.autoplay = false;
video.controls = true
video.load();
source.src="video/teste.mp4"
console.log("evening");
console.log(source.src)
}
else {
console.log("night");
}
}, 3000);<video id="vid1">
<source src="video/goodmorning.mp4" type="video/mp4">
</video>
<div>
</div>uj5u.com熱心網友回復：
而不是制作兩個視頻元素，而是根據一天中的時間更改視頻元素的 src。
<div>
<video id="vid" controls>
<source src="video/goodmorning.mp4" type="video/mp4">
</video>
</div>
然后在你的js中根據你的條件設定src。我已經提取了函式并將其設定為變數。這樣我們可以在頁面加載時呼叫該函式，以便播放正確的視頻，然后我們使用間隔函式定期檢查。
const playVideo = function() {
var Today = new Date();
var H = Today.getHours();
var videoElement = document.getElementById("vid");
videoElement.muted = true;
videoElement.autoplay = true;
videoElement.controls = true;
if (H >= 5 && H < 12) {
// If morning video is already set, do nothing and return
if (videoElement.getElementsByTagName("source")[0].src === "video/goodmorning.mp4") {
return
}
console.log("morning");
videoElement.getElementsByTagName("source")[0].src = "video/goodmorning.mp4"
} else if (H >= 12 && H < 21) {
// If evening video is already set, do nothing and return
if (videoElement.getElementsByTagName("source")[0].src === "video/teste.mp4") {
return
}
console.log("evening");
videoElement.getElementsByTagName("source")[0].src = "video/teste.mp4"
} else {
console.log("night");
}
video.load();
video.play();
}
// call playVideo when the page loads so the correct video starts
// set interval to check every 3000ms and update accordingly.
playVideo();
setInterval(playVideo, 3000)
這樣您就不必擔心他們兩個都在玩，或者不得不隱藏一個。
我還添加了一項檢查，以查看該特定時間的當前視頻是否已經正確。由于您將此設定為每 3000 毫秒運行一次，因此它將不斷更新。如果您希望發生這種情況，請省略我添加的條件
轉載請註明出處，本文鏈接：https://www.uj5u.com/net/407060.html
標籤：