<div class="slide-video">
    <video autoplay muted loop preload="true" poster="/statics/images/img01.jpg" >
        <source src="/statics/video.mp4" type="video/mp4">
        您的浏览器不支持 HTML5 视频标签。
    </video>
    <div class="swiper_video_targetarea">
        <img src="/statics/images/icon_play.png" class="play-icon" style="display: none;">
        <img src="/statics/images/icon_suspend.png" class="suspend-icon">
    </div>
    <div class="swiper_video_voice_box">
        <img src="/statics/images/icon_voice-on.png" class="voice-on" style="display: none;">
        <img src="/statics/images/icon_voice-off.png" class="voice-off">
    </div>
</div>

$('.slide-video').hover(
    function() {
        // 鼠标进入时触发的函数
        $('.swiper_video_targetarea').show();
    },
    function() {
        $('.swiper_video_targetarea').hide();
    }
);
// 播放按钮
$('.swiper_video_targetarea .play-icon').on('click', function() {
    $(this).hide(); // 隐藏播放图标
    $(this).siblings('.suspend-icon').show(); // 显示暂停图标
    $('.slide-video video').get(0).play(); 
});
// 暂停按钮
$('.swiper_video_targetarea .suspend-icon').on('click', function() {
    $(this).hide(); // 隐藏暂停图标
    $(this).siblings('.play-icon').show(); // 显示播放图标
    $('.slide-video video').get(0).pause();
});
// 声音按钮
$('.swiper_video_voice_box .voice-on').on('click', function() {
    $(this).hide(); // 隐藏声音图标
    $(this).siblings('.voice-off').show(); // 显示静音图标
    $('.slide-video video').get(0).muted=true; 
});
// 静音按钮
$('.swiper_video_voice_box .voice-off').on('click', function() {
    $(this).hide(); // 隐藏静音图标
    $(this).siblings('.voice-on').show(); // 显示声音图标
    $('.slide-video video').get(0).muted=false;
});

.banner video{
    object-fit: cover;
    width: 100%;
    height: 100%;
}

.banner .swiper_video_targetarea{
    display: none;
    width: 40%;
    height: 30%;
    position: absolute;
    left: 50%;
    top: 50%;
    transform: translate(-50%,-50%);
    -webkit-transform: translate(-50%,-50%);
    -moz-transform: translate(-50%,-50%);
    -ms-transform: translate(-50%,-50%);
    -o-transform: translate(-50%,-50%);
    text-align: center;
}
.banner .swiper_video_targetarea img{
    width: 100px;
    height: 100px;
    cursor: pointer;
}

.swiper_video_voice_box {
    z-index: 9999;
    position: absolute;
    left: 0;
    bottom: 2%;
    width: 60px;
    height: 60px;
}

.swiper_video_voice_box img {
    display: inline-block;
    width: 100%;
    cursor: pointer
}