[Spring] 비디오 미리보기

목표

1. 비디오를 mouseover하면 비디오가 재생되며
2. mouseleave하면 비디오가 멈추게 해야함
3. currentTime이 5초가 지나면 0초부터 다시 시작해야함

 

수정사항

1. 비디오를 로딩하는 시간보다 재생시간이 빠른 경우를 위해서 setTimeout을 설정했다

2. 비디오는 DOM 객체여서 get으로 받아와야 한다

        → $(video)[0].play() 에서 $(video).get(0).play()로 변경

3. v.currentTime > 5 이렇게 설정해두면 5초 이후의 영상을 보지 못해서 if(v.currentTime > 5 && v.currentTime < 5.6)로 변경함

 

 

 

$(".cctv-hover").hover(function (event) {
	//mouseover의 경우
	vId = findVId(event); //hover한 동영상의 id가져오기
	setTimeout(()=>{
		$("#"+vId).get(0).play()
		//재생시 7초가 지나면 처음으로 돌아감
		playVideo(vId);	
	}, 150)
}, function (event) {
	//mouseleave의 경우 
	$("#"+vId)[0].pause();
});


//hover된 비디오의 id를 찾는 함수
function findVId(event) {
	var video = event.target;
	video = $(video).find("video");
	video = video[0];
	var vId = $(video).attr("id");
	return vId;
}

//비디오 미리보기 재생시키기
function playVideo(vId) {
	var v = document.getElementById(vId);
	
	v.addEventListener('timeupdate', (event) => {
		if(v.currentTime > 5 && v.currentTime < 5.6){
			v.currentTime = 0;
		}
	});
}