• Q&A
  • 회원가입
  • 로그인

[HTML_Objects] JS - <video> 객체 ★ - 영상재생 (= video태그 = 비디오태그) ※ 영상파일형식별로 브라우저 지원 상이

목차
  1. <video> 객체 정의 - 영상 재생
  2. <video> 객체 구문
  3. <video> 객체 예제 - 접근
  4. <video> 객체 예제 - 생성
  5. <video> 객체 속성
  6. <video> 객체 메서드

 

<video> 객체 정의 - 영상 재생

 

HTML <video> 태그(요소) 의미.

(IE9 이상 주요 최신브라우저  지원.)

 

 

<video> 객체 구문

 

[접근]

var x = document.getElementById("요소ID");

 

[생성]

var x = document.createElement("VIDEO");

 

 

<video> 객체 예제 - 접근 

 

<video id="hz" width="320" height="240" controls>

 

  <source src="movie.mp4" type="video/mp4">

  <source src="movie.ogg" type="video/ogg">

  브라우저가 video 태그 지원 안 함.

</video>


<button onclick="homzzang()">총 재생시간 확인 - 클릭</button>


<p id="demo"></p>


<script>

function homzzang() {

  var x = document.getElementById("hz").duration;

  document.getElementById("demo").innerHTML = x;

}

</script>


 

<video> 객체 예제 - 생성

 

<button onclick="homzzang()">클릭</button>


<script>

function homzzang() {

  var x = document.createElement("VIDEO");


  if (x.canPlayType("video/mp4")) {

    x.setAttribute("src","movie.mp4"); // 동영상 주소

  } else {

    x.setAttribute("src","movie.ogg"); // 동영상 주소

  }


  x.setAttribute("width", "320"); // 동영상 가로크기

  x.setAttribute("height", "240"); // 동영상 세로크기

  x.setAttribute("controls", "controls");

  document.body.appendChild(x);

}

</script> 

 

 

<video> 객체 속성

 

audioTracks

사용 가능한 오디오 트랙을 나타내는 AudioTrackList 객체 반환.

 

autoplay

비디오가 준비되는 즉시 재생을 시작해야 하는지 여부 설정/반환.

 

buffered

비디오의 버퍼링된 부분을 나타내는 TimeRanges 객체 반환.

 

controller

비디오의 현재 미디어 컨트롤러를 나타내는 MediaController 객체 반환.

 

controls

비디오에 컨트롤이 표시되어야 하는지 여부 설정/반환. (재생/일시중지 등).

 

crossOrigin

비디오의 CORS 설정 설정/반환.

 

currentSrc

현재 비디오의 URL 반환.

 

currentTime

비디오의 현재 재생 위치 설정/반환 (초).

 

defaultMuted

기본적으로 비디오를 음소거해야 하는지 여부 설정/반환.

 

defaultPlaybackRate

비디오의 기본 재생 속도 설정/반환.

 

duration

비디오의 길이 반환(초).

 

playback

비디오 재생이 종료되었는지 여부 반환.

 

error

비디오의 오류 상태를 나타내는 MediaError 객체 반환.

 

height

비디오의 height 속성값 설정/반환.

 

loop

비디오 끝날 때마다 비디오 재생 다시 시작해야 하는지 여부 설정/반환.

 

mediaGroup

비디오가 속한 미디어 그룹의 이름 설정/반환.

 

muted

비디오 음소거 여부 설정/반환.

 

networkState

비디오의 현재 네트워크 상태 반환.

 

paused

비디오가 일시 중지되었는지 여부 반환.

 

playbackRate

비디오 재생 속도 설정/반환.

 

played

재생된 비디오 부분을 나타내는 TimeRanges 객체 반환.

 

poster

비디오의 poster 속성값 설정/반환.

 

preload

비디오의 preload 속성값 설정/반환.

 

readyState

비디오의 현재 준비 상태 반환.

 

seekable

탐색 가능한 비디오의 탐색 가능한 부분을 나타내는 TimeRanges 객체 반환.

 

seeking

사용자가 현재 비디오에서 찾고 있는지 여부 반환.

 

src

비디오의 src 속성값 설정/반환.

 

startDate

현재 시간 오프셋을 나타내는 Date 객체 반환.

 

textTracks

사용 가능한 텍스트 트랙을 나타내는 TextTrackList 객체 반환.

 

videoTracks

사용 가능한 비디오 트랙을 나타내는 VideoTrackList 객체 반환.

 

volume

비디오의 오디오 볼륨 설정/반환.

 

width

비디오의 width 속성값 설정/반환.

 

 

<video> 객체 메서드

 

addTextTrack()

비디오에 새 텍스트 트랙 추가.


canPlayType()

브라우저가 지정된 비디오 유형을 재생할 수 있는지 확인.


load()

비디오 요소를 다시 로드.


play()

비디오 재생을 시작.


pause()

현재 재생 중인 비디오를 일시 중지.

 

※ <video> 객체는 표준 속성/메서드/이벤트 지원.

방문 감사합니다. (즐겨찾기 등록: Ctrl + D)

찾아주셔서 감사합니다. Since 2012