设置video标签的muted=true实现静音

最新推荐文章于 2024-08-16 09:46:00 发布

Qlittleboy

最新推荐文章于 2024-08-16 09:46:00 发布

阅读量1.6k

点赞数

文章标签：前端

本文链接：https://blog.csdn.net/qq_21810059/article/details/132851500

版权

这篇文章详细描述了一个基于HTML、CSS和JavaScript开发的移动应用中的互动抽奖环节，包括视觉效果、音频控制和计数提示。使用了Swiper库和JWeixin进行开发，用户通过拍打屏幕参与抽奖，结束后显示感谢消息并播放结束音效。

摘要由CSDN通过智能技术生成

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8" />
    <meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no" />
    <title>一键加油</title>
    <link rel="stylesheet" type="text/css" href="/static/wx/css/common.css"/>
    <link rel="stylesheet" type="text/css" href="/static/wx/css/main.css"/>
    <link rel="stylesheet" type="text/css" href="/static/wx/css/idangerous.swiper.css"/>
    <script src="/static/wx/js/jquery.min.js" type="text/javascript" charset="utf-8"></script>
    <script src="/static/wx/js/common.js" type="text/javascript" charset="utf-8"></script>
    <script src="/static/wx/js/idangerous.swiper.min.js" type="text/javascript" charset="utf-8"></script>
    <script src="/static/wx/js/jweixin.js"></script>
</head>
<body class="drawBody">

<div class="padwarp" onclick="saypad()" >
    <img class="sleepimg" src="/static/wx/img/sleep2.png" alt=""/>
    <img class="sleepz" src="/static/wx/img/sleepZ.gif" alt="">
</div>
<div class="openedwarp"  style="display: none" >
    <img class="clearpng" src="/static/wx/img/clear1.png" alt="">
    <img class="raffttextpng" src="/static/wx/img/raffttext.png" alt="">
    <div class="raffletxtdiv">谢谢参与</div>
</div>
<div class="drawRoules">
    <div class="roultext" >抽奖规则：</div>
    <div>请拍打熊猫10次打开奖品！</div>
    <div class="stseconds">10</div>
    <video src="/static/wx/img/pad.mp3"
           id="pad" controls="controls" preload="auto" style="display: none" ></video>
    <video src="/static/wx/img/opended.mp3"
           id="opended" controls="controls" preload="auto" style="display: none"></video>
    <img class="lbopen lbimg" src="/static/wx/img/lbopen.png" onclick="closeVideo()"  alt="">
    <img class="lbclose lbimg" src="/static/wx/img/lbclose.png" onclick="openVideo()" style="display: none" alt="">
</div>
</body>
<style>
    @media screen and (min-width: 365px) and (max-width: 500px){
        .raffttextpng{
            width: 375px;
            display: table;
            margin: 0 auto;
            z-index: 7;
            position: absolute;
            left: 0;
            right: 0;
        }
        .raffletxtdiv{
            font-size: 35px;
            text-align: center;
            position: absolute;
            width: 100%;
            top: 100px;
            z-index: 12;
        }
    }

    @media screen and (min-width: 300px) and (max-width: 365px){
        .raffttextpng{
            width: 320px;
            display: table;
            margin: 0 auto;
            z-index: 7;
            position: absolute;
            left: 0;
            right: 0;
        }
        .raffletxtdiv{
            font-size: 35px;
            text-align: center;
            position: absolute;
            width: 100%;
            top: 82px;
            z-index: 12;
        }
    }

    .lbimg{
        position: fixed;
        bottom: 20px;
        left: 20px;
        width: 36px;
        height: 36px;
    }
    html,body{
        margin: 0;
        padding: 0;
        height: 100%;
        overflow: hidden;
    }


    .clearpng{
        width: 100%;
        position: absolute;
        bottom: 0;
        display: block;
        z-index: 6;
        opacity: 0.86;
    }
    .drawBody{
        background: #a2c67e;
        position: relative;
    }
    .sleepimg{
        width: 100%;
        position: absolute;
        z-index: 2;
        margin: 0 auto;
        left: 0;
        right: 0;
        top: 41%;
    }
    .sleepz{
        width: 32%;
        position: absolute;
        z-index: 3;
        top: 40%;
        left: 27%;
    }
    .drawRoules{
        text-align: center;
        font-size: 24px;
        padding-top: 30px;
        display: table;
        margin: 0 auto;
        color: #333;
        line-height: 36px;
        z-index: 22;
        position: relative;
    }
    .roultext{
        text-align: left;
    }
    .stseconds{
        padding-top: 30px;
        text-align: center;
        font-size: 60px;
        color: #8b008b;
    }
</style>
<script>




    var count=10;
    var pad=document.getElementById("pad")
    var opended=document.getElementById("opended")
    //拍打音效
    function saypad(){
        if(count<=30&&count>1){
            count--
            $(".stseconds").html(count)
            pad.pause()
            pad.play()
        }else{
            $(".stseconds").html(0)
            opended.play()
            $(".padwarp").hide()
            $(".drawRoules").hide()
            setTimeout(function (){
                $(".openedwarp").show()
            },600)

        }

    }

    function closeVideo(){
        $(".lbopen").hide()
        $(".lbclose").show()
        //设置静音
        pad.muted=true
        opended.muted=true
    }
    function openVideo(){
        $(".lbopen").show()
        $(".lbclose").hide()
        //开启音乐
        pad.muted=false
        opended.muted=false
    }


</script>

</html>