HTML에 VIDEO 삽입하는 방법

HTML video란 HTML 문서에 비디오를 삽입하는 방법입니다. <video> 요소를 사용하면 비디오 플레이백을 지원하는 미디어 플레이어를 웹 페이지에 표시할 수 있습니다. 아래와 같은 코드를 사용하면 비디오를 재생할 수 있습니다.

 

HTML에 VIDEO 삽입하는 방법

<video width="320" height="240" controls>
 <source src="movie.mp4" type="video/mp4">
  <source src="movie.ogg" type="video/ogg">
  Your browser does not support the video tag.
</video>
 

 

<video> 요소는 다양한 속성과 이벤트를 가지고 있으며, 자바스크립트로 제어할 수 있습니다. 예를 들어, autoplay 속성을 사용하면 비디오가 자동으로 재생되도록 할 수 있습니다. muted 속성을 추가하면 비디오가 음소거 상태로 재생됩니다. 또한, play(), pause(), load() 등의 메서드와 currentTime, duration, volume 등의 속성을 사용하여 비디오의 상태와 행동을 변경할 수 있습니다.

 

속성 사용예시

<!-- 비디오 요소 -->
<video id="myVideo" width="320" height="240" controls>
  <source src="movie.mp4" type="video/mp4">
  <source src="movie.ogg" type="video/ogg">
  Your browser does not support the video tag.
</video>

<!-- 비디오 컨트롤 버튼 -->
<button onclick="playVideo()">Play</button>
<button onclick="pauseVideo()">Pause</button>
<button onclick="loadVideo()">Load</button>
<button onclick="muteVideo()">Mute</button>
<button onclick="unmuteVideo()">Unmute</button>

<!-- 비디오 정보 표시 -->
<p>Current Time: <span id="currentTime">0</span> seconds</p>
<p>Duration: <span id="duration">0</span> seconds</p>
<p>Volume: <span id="volume">1</span></p>

<!-- 비디오 제어 스크립트 -->
<script>
// 비디오 요소를 참조하는 변수
var video = document.getElementById("myVideo");

// 비디오 재생 함수
function playVideo() {
  video.play();
}

// 비디오 일시정지 함수
function pauseVideo() {
  video.pause();
}

// 비디오 로드 함수
function loadVideo() {
  video.load();
}

// 비디오 음소거 함수
function muteVideo() {
  video.muted = true;
}

// 비디오 음소거 해제 함수
function unmuteVideo() {
  video.muted = false;
}

// 비디오 정보 업데이트 함수
function updateInfo() {
  // 현재 시간, 총 길이, 볼륨을 표시
  document.getElementById("currentTime").innerHTML = video.currentTime.toFixed(2);
  document.getElementById("duration").innerHTML = video.duration.toFixed(2);
  document.getElementById("volume").innerHTML = video.volume;
}

// 비디오가 재생될 때마다 정보 업데이트
video.addEventListener("timeupdate", updateInfo);
</script>
 

 

HTML에서 비디오를 자동으로 재생

비디오를 자동으로 재생하려면 <video> 요소에 autoplay 속성을 추가하면 됩니다. 예를 들어, 다음과 같은 코드를 사용하면 비디오가 페이지가 로드될 때 자동으로 재생됩니다.

<video width="320" height="240" autoplay>
  <source src="movie.mp4" type="video/mp4">
  <source src="movie.ogg" type="video/ogg">
  Your browser does not support the video tag.
</video>
 

autoplay 속성은 불리언(Boolean) 속성이므로, 값이 없거나 "autoplay"라고 적으면 모두 동일한 효과를 줍니다.