在javascript中设置源后未播放视频



我试图在没有任何javascript框架的情况下随机播放两个视频中的一个,但自动播放不起作用。

function event() {
let oldnovid = novid;
let a = Math.round(Math.random() * 100);
let sauce = document.getElementById("sauce");
if (a <= 20) {
document.getElementById("bgvid").mute = true;
sauce.setAttribute("src", "sauce/bg.mp4");
novid = 300000;
} else if (a >= 80) {
document.getElementById("bgvid").mute = true;
sauce.setAttribute("src", "sauce/bg2.mp4");
novid = 207000;
} else {
novid = 1000;
}
document.getElementById("bgvid").play();
document.getElementById("bgvid").mute = false;
console.log(a);
clearInterval(id);
id = setInterval(event, novid);
}
event();
<video id="bgvid" autoplay="" muted="true">
<source src="" id="sauce" type="video/mp4">
</video>

我认为你应该做

document.getElementById("bgvid").autoplay = true
document.getElementById("bgvid").load()

并移除autoplay=""

代替

document.getElementById("bgvid").play()

所以它会自动播放。不确定,但你应该试试

function event() {
let oldnovid = novid
let a = Math.round(Math.random() * 100);
let sauce = document.getElementById("sauce")
if (a <= 20) {
sauce.setAttribute("src", "sauce/bg.mp4")
clearInterval(id)
id = setInterval(event, 30000);
document.getElementById("bgvid").autoplay = true;
document.getElementById("bgvid").muted = false;
document.getElementById("bgvid").load();
let playAttempt = setInterval(() => {
document.getElementById("bgvid")
.play()
.then(() => {
clearInterval(playAttempt);
})
}, 50)
} else if (a >= 80) {
sauce.setAttribute("src", "sauce/bg2.mp4")
clearInterval(id)
id = setInterval(event, 200400);
document.getElementById("bgvid").autoplay = true;
document.getElementById("bgvid").muted = false;
document.getElementById("bgvid").load();
let playAttempt = setInterval(() => {
document.getElementById("bgvid")
.play()
.then(() => {
clearInterval(playAttempt);
})
}, 50)
} else {
clearInterval(id)
id = setInterval(event, 1000);
}
console.log(a);
}

这是在用户与DOM交互之后工作的。

最新更新