视频的播放

当鼠标放到图片上视频自动播放

HTML

 

                    <div class="spdg-2">
                        <img src="images/tangguo.png" width="402px" height="254px">
                        <i class="oo1"></i>
                        <a class="oo2">新皮肤</a>
                        <p class="oo3">全新皮肤、炫彩礼包上线</p>
                        <p class="oo4">
                            <a>糖果大战2019</a>
                        </p>
                        <div class="sss">
                            <video id="vid1" src="video/shp1.mp4" muted width="402" height="254" controls></video>
                        </div>
                    </div>
                </div>

　　

css

 

.oo1{
    position: absolute;
    bottom: 0;
    left: 0;
    background: url(//game.gtimg.cn/images/lol/v3/pic-mask-0.png) repeat;
    width: 100%;
    height: 133px;
}
.oo2{
    position: absolute;
    display: block;
    left: 9px;
    top: 9px;
    width: auto;
    height: 20px;
    padding: 0 6px;
    border-radius: 2px;
    font-size: 12px;
    text-align: center;
    color: #cdbe91;
    line-height: 19px;
    background-color: #000;
}
.oo3{
    width: 100%;
    padding: 0 17px;
    box-sizing: border-box;
    position: absolute;
    left: 0;
    bottom: 33px;
    font-size: 16px;
    font-weight: 700;
    color: #cdbe91;
}
.oo4{
    width: 100%;
    padding-left: 17px;
    box-sizing: border-box;
    position: absolute;
    left: 0;
    bottom: 12px;
    font-size: 14px;
}
.oo4>a{
    color: #cfcfcf;
}
/* 视频 */
.sss{
    position: absolute;
    top:0;
    width: 100%;
    height: 100%;
    background: #000;
    opacity: 0;
}
.sss.cur{
    opacity: 1;
    transform: scale(1.05);
    transition: transform 1s;
}

　　

 js

 

$('.spdg-2').hover(function(){
  $(this).find('.sss').addClass('cur');
  $('#vid1')[0].play();
},function(){
  $(this).find('.sss').removeClass('cur');
  $('#vid1')[0].pause();
});