黑人抬棺视频通话h5网页（gif图+背景mp3实现）

HTML基础

下载此实例

开发语言：CSS
实例大小：1.91M
下载次数：26
浏览次数：486
发布时间：2020-06-06
实例类别：HTML基础
发布人：1105602752
文件格式：.zip
所需积分：2

实例介绍

【实例简介】快手ID：MYQQ1105602752 (快手关注我加Q给免费源码）

【实例截图】

from clipboard

【核心代码】<!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>

标签： 通话视频

实例下载地址