<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
</head>
<style type="text/css">
.video-boxs{
100%;
overflow: hidden;
float: left;
height: 500px;
}
.video-boxs {
1300px;
height: 600px;
}
.video-boxs .list {
display: inline-block;
margin-right: 10px;
}
.video-list,.list{
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;
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;
}
</style>
<body>
<!--<div class="video-list">
<span class="video-bgs preview-bg" style="background-image:url(https://video.ffquan.com/video/5e630d30d9a5c.jpg)"></span>
<span class="video-bgs preview-img" style="background-image: url(https://video.ffquan.com/video/5e630d30d9a5c.jpg);"></span>
<div id="player" data-video="0" style="288px; height: 512px;"></div>
</div>-->
<div class="video-boxs">
</div>
<input type="button" name="click" id="click" value="鼠标进行事件处理" />
<script src="js/jquery-2.0.0.min.js" type="text/javascript" charset="utf-8"></script>
<script src="js/qiniu-web-player-1.2.0.min.js" type="text/javascript" charset="utf-8"></script>
<script type="text/javascript">
const DATA = [{
"videoSrc": "http://demo-videos.qnsdk.com/movies/qiniu.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/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.onload = 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);
}
function initPlayer(item, data) {
console.log(item)
const player = new QPlayer({
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.getElementsByClassName("video-bgs").length;i++) {
this.getElementsByClassName("video-bgs")[i].style.display="none";
}
// $(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<this.getElementsByClassName("video-bgs").length;i++) {
this.getElementsByClassName("video-bgs")[i].style.display="block";
}
player.pause();
});
}
};
</script>
</body>
</html>
