목차
- <video> 객체 정의 - 영상 재생
- <video> 객체 구문
- <video> 객체 예제 - 접근
- <video> 객체 예제 - 생성
- <video> 객체 속성
- <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> 객체는 표준 속성/메서드/이벤트 지원.
