JS / 바닐라로 video play(), pause() 구현하기

커서를 올리면 동영상을 재생하도록 구현해보았다.

제이쿼리를 사용했으면 get(0) 을 사용해 간단하게 구현 했었겠지만 바닐라로만 작업하기로 했었다.

비디오는 promise를 반환하기 때문에 비동기 처리를 하여 구현하면 된다.

 

처음 랜딩 된 후 바로 커서를 올리면 아직 로드되지 않았다는 에러가 뜨고 영상재생이 되지않았다.

동영상 크기가 크거나 리스트가 많아서 그런 이슈가 생긴줄 알았는데 video태그에 muted(음소거) 속성을 추가하면 

에러없이 잘동작했다. 동영상이 다운로드되는 시점을 체크하려고 삽질했지만 그게 아니였던것이다..ㅋㅋ

 

	videoEvt:function(){
            let item = document.querySelectorAll("#video_list .item");
            
            for(i = 0; i < item.length; i++){
                item[i]?.addEventListener('mouseenter', function(){
                    let thumbBox = this.children[0];
                    let video = thumbBox.children[1];

                    async function playVideo() {
                        try {
                            await video.play();
                        } catch (err) {
                            console.log(err);
                        }
                    }
                    video.classList.add("on");
                    playVideo();
                });

                item[i]?.addEventListener('mouseleave', function(){
                    let thumbBox = this.children[0];
                    let video = thumbBox.children[1];
                    video.classList.remove("on");
                    video.pause();
                });
            }
        },