html5播放七牛,七牛云video视频列表鼠标移入播放当前案例开发

width:100%;

overflow: hidden;float: left;

height: 500px;

}

.video-boxs {

width: 1300px;

height: 600px;

}

.video-boxs .list {

display: inline-block;

margin-right: 10px;

}

.video-list,.list{

width: 288px;

height: 512px;float: left;

position: relative;

margin:0 15px 15px 0;

z-index: 99;

overflow: hidden;

}

.video-bgs{

background: center no-repeat;

position: absolute;

width:100%;

height:100%;

left:0;

top:0;

}/*背景模糊*/.preview-bg{

background: center no-repeat;

background-size: cover;-webkit-filter: blur(15px);-moz-filter: blur(15px);-o-filter: blur(15px);-ms-filter: blur(15px);

filter: blur(15px);

z-index: 8;

}/*展示图片*/.preview-img{

background-size: contain;

z-index: 9;

}

{"videoSrc": "http://video-haodanku-com.cdn.fudaiapp.com/c2de482d83f8c523141eb57218e44e52.mp4?attname=15857922052278.mp4","bg": "https://video.ffquan.com/video/5e630d30d9a5c.jpg","img": "https://video.ffquan.com/video/5e630d30d9a5c.jpg"},

{"videoSrc": "http://video-haodanku-com.cdn.fudaiapp.com/20a090abe4031e356e0c960057172b64.mp4?attname=15857922053056.mp4","bg": "https://video.ffquan.com/video/5e630d30d9a5c.jpg","img": "https://video.ffquan.com/video/5e630d30d9a5c.jpg"},

{"videoSrc": "http://video-haodanku-com.cdn.fudaiapp.com/2ebacbc33db42b699e9c5f19dd2ef101.mp4?attname=15857922052251.mp4","bg": "https://video.ffquan.com/video/5e630d30d9a5c.jpg","img": "https://video.ffquan.com/video/5e630d30d9a5c.jpg"}

];

window.οnlοad= function() {var box = document.querySelector('.video-boxs');for (let i = DATA.length; i--;) {

item= document.createElement('div');

item.className= 'list';

findSpan=document.createElement('span');

findSpan.className='video-bgs preview-bg';

findSpan.style="background-image:url("+DATA[i].bg+")";

sblsSpan=document.createElement('span');

sblsSpan.className='video-bgs preview-img';

sblsSpan.style="background-image: url("+DATA[i].img+")";

initPlayer(item, DATA[i]);

box.insertBefore(item,box.childNodes[0]);//box.appendChild(item);

item.appendChild(findSpan);

item.appendChild(sblsSpan);

}functioninitPlayer(item, data) {

console.log(item)

const player= newQPlayer({

url: data.videoSrc,

container: item,

defaultViewConfig: {

noControls:true},

});

item.addEventListener('mouseenter', function(e) {//console.log(this.querySelectorAll('.video-bgs'))//console.log(this.getElementsByClassName("video-bgs"))

for (var i=0;i

}//$(this).find('.video-bgs').hide();

//播放位置

player.seek(0);

player.play();

});

item.addEventListener('mouseleave', function(e) {//$(this).find('.video-bgs').show();

for (var i=0;i

}

player.pause();

});

}

};