HTML5의 <video> 요소를 사용하면 웹 페이지에서 비디오를 재생할 수 있습니다. 이 비디오 요소는 동적으로 소스를 변경할 수 있어서 동적으로 비디오를 변경하는 기능을 구현할 수 있습니다. 이번 포스트에서는 자바스크립트를 사용하여 HTML5 비디오 요소의 소스를 동적으로 변경하는 방법에 대해 알아보겠습니다.

HTML5 <video> 요소

HTML5 <video> 요소는 비디오를 재생하기 위한 태그입니다. 다음과 같이 비디오 요소를 생성할 수 있습니다.

<video id="myVideo" width="640" height="480">
  <source src="video.mp4" type="video/mp4">
</video>

여기서 src 속성은 비디오 파일의 경로를 지정하며, type 속성은 비디오 파일의 타입을 지정합니다. 위의 예제에서는 video.mp4 파일을 재생하는 비디오 요소를 생성하고 있습니다.

자바스크립트로 비디오 소스 변경하기

자바스크립트를 사용하여 비디오 요소의 소스를 동적으로 변경할 수 있습니다. 다음은 자바스크립트를 사용하여 비디오 소스를 변경하는 방법의 예제 코드입니다.

var video = document.getElementById("myVideo");
var source = document.createElement("source");
source.setAttribute("src", "newvideo.mp4");
source.setAttribute("type", "video/mp4");
video.appendChild(source);
video.load();
video.play();

위의 코드는 비디오 요소의 src와 type 속성을 변경하여 새로운 비디오 파일을 로드하고 재생하는 것을 보여줍니다. createElement 함수를 사용하여 <source> 요소를 생성한 후, setAttribute 함수를 사용하여 속성 값을 지정합니다. 마지막으로 생성한 <source> 요소를 비디오 요소에 추가한 후, load 메서드로 비디오를 로드하고 play 메서드로 비디오를 재생합니다.

결론

이번 포스트에서는 자바스크립트를 활용하여 HTML5 비디오 요소의 소스를 동적으로 변경하는 방법에 대해 알아보았습니다. HTML5의 <video> 요소는 동적으로 비디오를 변경할 수 있는 강력한 기능을 제공하므로, 필요에 맞게 비디오를 제어할 수 있습니다. 이를 통해 웹 페이지에서 보다 다양한 비디오 기능을 구현할 수 있습니다.

#HTML5 #자바스크립트