Overlay Play button over video

前端 未结 3 693
没有蜡笔的小新
没有蜡笔的小新 2020-12-14 10:40

I currently have a script that plays and pauses a video onclick. What I would like to do is overlay a play button over the video at the start and when it is paused, and for

3条回答
  •  借酒劲吻你
    2020-12-14 11:19

    If you want to have an actual overlay with content you could edit, maybe this will suit you: https://jsfiddle.net/svArtist/9ewogtwL/

    $('.video').parent().click(function () {
        if($(this).children(".video").get(0).paused){
            $(this).children(".video").get(0).play();
            $(this).children(".playpause").fadeOut();
        }else{
           $(this).children(".video").get(0).pause();
            $(this).children(".playpause").fadeIn();
        }
    });
    .video {
        width: 100%;
        border: 1px solid black;
    }
    .wrapper{
        display:table;
        width:auto;
        position:relative;
        width:50%;
    }
    .playpause {
        background-image:url(http://png-4.findicons.com/files/icons/2315/default_icon/256/media_play_pause_resume.png);
        background-repeat:no-repeat;
        width:50%;
        height:50%;
        position:absolute;
        left:0%;
        right:0%;
        top:0%;
        bottom:0%;
        margin:auto;
        background-size:contain;
        background-position: center;
    }
    
    

提交回复
热议问题