Copy
const videos = document.querySelectorAll("video");
const mainVideo = document.querySelector(".main-flex__video")
videos.forEach(function(video){
video.addEventListener("mouseover", showControls);
video.addEventListener("mouseout", removeControls);
video.addEventListener("click", redirect);
//이부분이요ㅠㅠ
function redirect(event){
event.preventDefault();
window.location.href = "./play.html";
const addVideo = this.parentNode.querySelector("video");
mainVideo.append(addVideo);
}
function showControls(event){
event.preventDefault();
video.controls = true;
video.muted = true;
video.play();
}
function removeControls(event){
event.preventDefault();
video.controls = false;
video.pause();
}
})
이렇게 코드를 짜봤는데 location.href 때문인지 비디오가 추가는 되는데
페이지가 새로고침 되면서 비디오가 없던 상태로 돌아가더라고요,,
callback 함수도 추가해봤는데 자꾸 에러만 뜨고,,, 어떻게 해결할 수 있을까요??
답변 4개 / 댓글 1개
채택된 답변
+20 포인트
5년 전
클라이언트단에서 동작하는 자바스크립트의 이벤트는 페이지가 이동되면 새로 이동된 페이지의 스크립트를 실행하며 페이지 이동 이벤트가 일어나면 페이지가 이동 하기 전 스크립트가 페이지 이동후의 스크립트에 관여할 수 없습니다.
유튜브나 트위치 등 페이지 이동에도 보존해야할 엘리먼트들이 있는 사이트들의 경우 SPA의 개념을 활용하고 있고, 만약 MPA형태로 비슷한 형태를 구축하시려면 아이프레임을 활용하거나 별도의 쿼리값이나 포스트로 구분하여 받는 페이지에서도 별도의 실행구문을 작성해주셔야 합니다.
5년 전
play.html에 이동 한 후 비디오를 추가하고 마우스를 갖다댈시 비디오가 실행되고 마우스를 뺄시
동영상을 멈추는거 같은데 저 js에 한번에 다 하지말고
이동시키는거 따로 // 이동 완료하고 비디오 작동하는 js 따로 해야 할것 같은데요?
5년 전
href 는 이동하는 구분 아닌가요??
inserHTML 이나 jquery prop 를 이용해서... 값을 넣어야 할 것 같습니다.
원하는 의도가 뭔가요? 만든 목적이 뭔진 모르겠음
답변에 대한 댓글 1개
답변을 작성하려면 로그인이 필요합니다.