많은 경우 웹사이트나 애플리케이션에서 사용자가 이미지나 텍스트를 클릭했을 때 동영상이 재생되도록 할 수 있습니다. 자바스크립트를 사용하여 이를 구현하는 방법에 대해 알아보겠습니다.

HTML과 CSS 준비

먼저, HTML 파일에 비디오 요소를 추가합니다.

<video id="videoPlayer" width="640" height="360" controls>
  <source src="movie.mp4" type="video/mp4">
  Your browser does not support the video tag.
</video>

그런 다음, CSS를 사용하여 비디오 요소를 숨깁니다.

#videoPlayer {
  display: none;
}

자바스크립트로 동작 구현

이제, 이미지나 텍스트를 클릭할 때 비디오가 재생되도록 자바스크립트를 추가해봅시다.

document.getElementById('yourClickableElement').addEventListener('click', function() {
  var video = document.getElementById('videoPlayer');
  video.style.display = 'block';
  video.play();
});

위 예시에서 yourClickableElement는 사용자가 클릭할 요소를 가리킵니다. 사용자가 해당 요소를 클릭하면 JavaScript는 비디오를 보이도록 하고 재생합니다.

이제, 해당 요소를 클릭했을 때 비디오가 재생되는 기능이 구현되었습니다.

위의 자바스크립트 코드를 수정하여 애플리케이션에 맞게 적용해보세요!