Day07（HTML5 demo 視頻，遮罩）

視頻

<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <title></title>

    </head>
    <body>

            <video id="video" controls="controls">
                <source src="fun.mp4"></source>             
            </video>

        
        <button id="btn1">播放</button><button id="btn2">暫停</button>
    </body>
    <script type="text/javascript">
        var video = document.getElementById("video");
        var bf = document.getElementById("btn1");
        var zt = document.getElementById("btn2");
        bf.onclick=function(){
            video.play();
        }
        zt.onclick=function(){
            video.pause();
        }
        var flag = true;
        video.onclick=function(){
            
            if(flag){
                this.play();
                flag = false;
            }else{
                this.pause();
                flag = true;
            }
        }
                
    </script>
</html>

視頻遮罩

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8" />
        <title></title>
        <style type="text/css">
            *{margin: 0;padding: 0;}
            html{
                height: 100%;
            }
            body{
                overflow: hidden;
                height: 100%;
            }
            .main{
                height: 100%;
                width: 100%;
                position: relative;
                display: block;
            }
            .lop{
                width: 100%;
                height: 100%;
                position: absolute;
                z-index: 10;
                background: rgba(0,0,0,0.4);
                top: 0;
                left: 0;
            }
            .vd{
                position: absolute;
                z-index: 1;
                top: 0;
                left: 0;
            }
            .btn{
                height: 0px;
                width: 0px;
                border: 25px solid #efefef;
                
                border-right-color: transparent;
                border-top-color: transparent;
                border-bottom-color: transparent;
                position: absolute;
                top: 45%;
                left: 50%;
                margin-left: -25px;

                cursor: pointer;
                z-index: 15;
            }
            .but{
                height: 100px;
                width: 100px;
                background: rgba(0,0,0,.5);
                font-size: 80px;
                position: absolute;
                z-index: 50;
                right: 30px;
                top: 30px;
            }
            .vp{
                position: absolute;
                z-index: 20;
            }
            .nav{
                display: none;
            }
        </style>
    </head>
    <body>
        <div class="nav">
            <video class="vp">
            <source src="pc-fullvideo.mp4"></source>
            </video>
            <button class="but">X</button>
        </div>
        
        <div class="main">
            <video id="vd" autoplay="autoplay" loop="loop">
                <source src="http://a.img.pp.cn/upload_files/2016/12/19/wdj_topic/min-video.mp4"></source>
            </video>
            <div class="lop"></div>
            <div class="btn"></div>
        </div>
    </body>
    <script type="text/javascript" src="jquery-3.2.1.min.js" ></script> 
    <script type="text/javascript">
        $('.btn').on('click',function(){
                $('#vd')[0].pause();
                $('.main').css('display','none');
                $('.nav').css('display','block');
                $('.vp')[0].play();
        });
        $('.but').on('click',function(){
            $('.vp')[0].pause();
            $('.nav').css('display','none');
            $('.main').css('display','block');
            $('#vd')[0].play();
        });
    </script>
</html>
最后編輯于 ：
?著作權(quán)歸作者所有,轉(zhuǎn)載或內(nèi)容合作請聯(lián)系作者
【社區(qū)內(nèi)容提示】社區(qū)部分內(nèi)容疑似由AI輔助生成，瀏覽時請結(jié)合常識與多方信息審慎甄別。
平臺聲明：文章內(nèi)容（如有圖片或視頻亦包括在內(nèi)）由作者上傳并發(fā)布，文章內(nèi)容僅代表作者本人觀點，簡書系信息發(fā)布平臺，僅提供信息存儲服務(wù)。

相關(guān)閱讀更多精彩內(nèi)容

友情鏈接更多精彩內(nèi)容