分享一款黑人邀请您微信视频通话html网站源码，电脑打开有背景音乐，手机微信打开默认不开启音乐，打开通话后才显示视频，单页源码无后台。
演示页面（https://www.xiaolanzy.com/68518549/tonghua/）
页面展示
下载地址
https://dmfhy.lanzout.com/ihQRM14f29fc
源码展示
<!DOCTYPE html>
<html lang="zh-CN">
<meta charset="UTF-8">
<meta name="Author" content="小蓝资源网（北京）科技有限公司">
<meta name="Keywords" content="黑人邀请您微信通... 黑人抬棺 专业团队">
<meta name="Description" content="黑人邀请您微信通... 黑人抬棺 专业团队">
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
<meta name="viewport" content="width=device-width,initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0, user-scalable=no,minimal-ui">
<title>黑人邀请您微信通话</title>
<style>
html,
body {
height: 100%;
margin: 0;
background-color: black;
}
img {
display: flex;
justify-content: center;
align-items: center;
}
#container {
height: 100%;
background: url('static/jpg/0.jpg') no-repeat top center/auto 100%;
}
@media screen and (max-width: 700px) {
#container {
height: 100%;
background: url('static/jpg/0.jpg') no-repeat top center/100% 100%;
}
}
#jntm {
display: none;
}
audio,
#jntm_music {
display: none;
}
</style>
</head>
<body>
<div id="container">
<audio id="wx_music" src="static/mp3/call.mp3" controls loop autoplay></audio>
</div>
<div id="jntm"></div>
<div id="hr">
</div>
<audio id="mp32" controls loop src="static/mp3/astronomia.mp3">
您的浏览器不支持 audio 元素。
</audio>
<script>
var ele = document.getElementById("wx_music");
var mp32 = document.getElementById("mp32");
ele.addEventListener('canplay', function () {
setTimeout(function () {
ele.play();
}, 500);
})
document.getElementById("container").onclick = function () {
ele.pause();
this.removeChild(ele);
this.style.display = "none";
var jntm = document.getElementById("jntm");
jntm.style.display = "block";
mp32.play();
hr.innerHTML = '<iframe id="jntm_music" frameborder="no" border="0" marginwidth="0" marginheight="0" width=330 height=86 src="static/mp3/astronomia.mp3"></iframe>';
if (document.body.clientWidth > document.body.clientHeight) {
jntm.innerHTML = '<img src="static/gif/0.gif" width="100%" style="margin: 0" >';
} else {
jntm.innerHTML = '<img src="static/gif/0.gif" width="100%" style="margin:45% 0" >';
} setTimeout(function () {
if (document.body.clientWidth > document.body.clientHeight) {
jntm.innerHTML = '<img id="img1" src="static/jpg/1.jpg" width="100%" style="margin:0">';
} else {
jntm.innerHTML = '<img id="img1" src="static/jpg/1.jpg" width="100%" style="margin:45% 0">';
}
}, 4000);
setTimeout(function () {
var img1 = document.getElementById("img1");
jntm.removeChild(img1);
if (document.body.clientWidth > document.body.clientHeight) {
jntm.innerHTML = '<img src="static/gif/1.gif" width="100%" style="margin: 0" >';
} else {
jntm.innerHTML = '<img src="static/gif/1.gif" width="100%" style="margin:45% 0" >';
}
}, 7500);
};
</script>
</body>
</html>原创文章，作者：李康哲，如若转载，请注明出处：https://www.xiaolanzy.com/114.html
微信扫一扫 
支付宝扫一扫 