HTML5의 도입으로 함께 사용되는 비디오 요소를 동적으로 추가하고 제거하는 기능을 자바스크립트로 구현할 수 있습니다. 이를 통해 웹 페이지에 동적으로 비디오를 제어하는 기능을 추가할 수 있습니다.

1. 비디오 요소 추가하기

// 비디오 요소 생성
var video = document.createElement('video');

// 소스 추가
var source = document.createElement('source');
source.src = 'video.mp4';
source.type = 'video/mp4';
video.appendChild(source);

// 비디오 요소를 원하는 위치에 추가
var container = document.getElementById('video-container');
container.appendChild(video);

위의 코드는 자바스크립트를 사용하여 비디오 요소를 동적으로 생성하는 방법을 보여줍니다. createElement 함수를 사용하여 video 요소를 생성하고, source 요소를 생성하여 비디오 소스를 설정한 후, 비디오 요소에 source 요소를 자식으로 추가합니다. 그리고 원하는 위치의 컨테이너 요소에 비디오 요소를 추가합니다.

2. 비디오 요소 제거하기

// 비디오 요소 제거
var video = document.getElementById('video');
video.parentNode.removeChild(video);

위의 코드는 자바스크립트를 사용하여 이미 추가된 비디오 요소를 제거하는 방법을 보여줍니다. getElementById 함수를 사용하여 비디오 요소를 가져온 후, parentNode.removeChild 함수를 사용하여 비디오 요소를 제거합니다.

요약

이상으로, 자바스크립트를 사용하여 HTML5 비디오를 동적으로 추가하고 제거하는 방법을 알아보았습니다. 이를 통해 동적으로 비디오를 제어하는 기능을 구현할 수 있습니다. HTML5 비디오 요소를 다룰 때 유용한 자바스크립트 코드입니다.