页面后台暂停倒计时

最新推荐文章于 2023-11-09 16:03:05 发布

海天鹰

最新推荐文章于 2023-11-09 16:03:05 发布

阅读量496

点赞数

分类专栏： JS 文章标签： javascript

本文链接：https://blog.csdn.net/sonichty/article/details/128864219

版权

JS 专栏收录该内容

57 篇文章 1 订阅

订阅专栏

<html>
<title>腾讯视频</title>
<head>
<style>
video { display:block; margin:0 auto; }
</style>
</head>
<body>
<div></div>
<p>视频网页广告倒计时，页面后台暂停倒计时。</p>
<video id="video" autoplay muted controlsList="nodownload"></video>
<script>
var visible = true;
var t = 30, vc = 0;
var video = document.getElementById('video');

var list = new Array();
list.push("https://apd-50f75df99d2f733929a09c57e33b67c4.v.smtcdns.com/variety.tc.qq.com/AQ8oIwti3uLftn4-ovdID3LLPCE4SzIqXBFy5iHN07KA/svp_50134/gzc_1000127_0b534yab4aaaxuaew3v6wjr5nzwdd3tqagka.f10201.mp4?platform=10901&fmt=shd&level=0&vkey=A91FDBB417501EE474EF3D802DBD34C18626EACEFFA23AA0690E466C5A88BC206267E97E60BC023DF09752588C9AB9604E6BAAC5C772159E5269F6EE0DED06BE4A01D11A6524DF733B2D73FB3D72193C2C9BDDCE445A1C2D7AD93C6D019A4FF560AB0540E5FA8156B5D40B3C72FCB35A");
list.push("https://video.da.mgtv.com/new_video/2023/01/29/1004/64AC10C63E4F60301CA82DC82F3638D4_20230129_1_1_1220.mp4");

video.addEventListener('ended', play);
play();
function play() {
	video.src = list[vc];
	video.load();
	video.play();	
	vc++;
	if (vc == list.length)
		vc = 0;
}

function countdown() {
	if (visible) {
		document.title = '流浪地球2 - 广告' + t + '秒';
		t--;
	}
	if (t < 0) {
		clearInterval(interval);
		document.title = '流浪地球2';
		video.removeEventListener('ended', play);
		video.src = 'https://vfx.mtime.cn/Video/2023/01/19/mp4/230119113205455198.mp4';
		video.controls = 'controls';
	}
}

var interval = setInterval(countdown, 1000);

document.addEventListener("visibilitychange", function() {            
    if (document.visibilityState === "hidden") {
        visible = false;
    } else if (document.visibilityState === "visible") {
        visible = true;
    }
})
</script>
</body>
</html>

参考：
视频自动播放无效：https://blog.csdn.net/s18813688772/article/details/121103802
多个视频循环播放：https://www.xuewangzhan.net/wenti/65992.html
https://blog.csdn.net/weixin_44154094/article/details/113100241
https://blog.csdn.net/m0_60121436/article/details/121436840