jQuery视频弹窗播放效果代码

视频弹窗播放效果代码

适用于点击按钮后弹窗播放视频效果

使用说明:#playbtn 是按钮的ID

.video-box 是遮罩层,同时也是起到关闭弹窗功能

#video 是视频的ID

当点击 .video-box 时 遮罩层消失,视频影藏且停止播放,再次点击播放按钮,则再接着播放


HTML部分代码

<div class="video-box">
  <video id="video" src="/Public/uploads/5d26d3f4a688f.mp4" controls>
    <source src="/Public/uploads/5d26d3f4a688f.mp4" type="video/mp4" />
    您的浏览器不支持 video 标签。
  </video>
</div>
<img src="../web/images/play.png" alt="播放视频" id="playbtn">


CSS部分代码

.brand-index .container .brand-1 .bq-8 .video-box {
    position: fixed;
    top: 0;
    left: 0;
    display: none;
    background: rgba(0, 0, 0, 0.8);
    width: 100%;
    height: 100%;
    z-index: 999;
}


JS代码

// 视频弹窗播放
$(function(){
    $("#playbtn").click(function(){
        //此处写点击触发的操作
        $(this).css("display","none");
        $(".video-box").show();
        //1、取得播放器的对象
        var video=$('#video').get(0);
        //2、调用视频播放API
        video.play();
        //视频停止API
        //objVideo.pause();
    });
    $(".video-box").click(function(){
        video.pause();
        $(this).css("display","none");
        $("#playbtn").css("display","block");
    });
});