동영상 다운로드를 막는 방법
버튼을 클릭하면 동영상을 볼 수 있는 창이 뜨고 그 창에서 다운로드를 막는 기능을 구현해달라는 요청을 받았고, 아래와 같이 구현했다.
const videoLink = row.querySelector(".lesson-video");
videoLink.addEventListener("click", (event) => {
event.preventDefault();
if (lessonData.video) {
const link = `./video/${lessonData.video}`;
const windowFeatures = "width=1280,height=720,left=200,top=100";
const newWindow = window.open("", "videoPopup", windowFeatures);
newWindow.document.write(`
<html>
<head>
<title>Video Player</title>
<style>
body { margin: 0; display: flex; align-items: center; justify-content: center; height: 100vh; background-color: #000; }
video { max-width: 100%; max-height: 100%; }
</style>
</head>
<body>
<video controls controlsList = "nodownload">
<source src="${link}" type="video/mp4">
동영상을 재생할 수 없습니다.
</video>
<script>
// Ctrl+S 또는 Cmd+S 단축키를 막는 스크립트
document.addEventListener('keydown', function(e) {
if ((e.key === "S" && (e.ctrlKey || e.metaKey)) || e.key === "U" && (e.ctrlKey || e.metaKey)) {
e.preventDefault();
alert("비디오 다운로드는 허용되지 않습니다.");
}
});
<\/script>
</body>
</html>
`);
newWindow.document.close();
} else {
console.error("비디오 링크가 없습니다.");
}
});핵심은 controlsList = "nodownload" 와 ctrl + s 를 막는 스크립트이다.
비디오가 열리는 새 창의 크기와 위치는 windowFeatures 를 조정해서 사용할 수 있다.
새로운 창이 열리며 동영상이 재생되는 구조이기때문에 새롭게 html 구조를 띄우는 새 창 자체를 script 내부에 통으로 넣었다.
짧지 않은 구조이기때문에 가능하지만, 만약 요구가 많아지거나 다른 기능이 생겨서 코드가 길어지면 어떻게 수정을 해야할지 생각해봐야할 문제가 남아있다.
Studying for Frontend