기술문서

 > 

JavaScript

Video, Audio 태그 LoadedMetaData 에서 얻을수 잇는 정보

loadedmetadata 이벤트가 발생한 후에는 HTMLMediaElement 객체의 다음 속성들을 통해 미디어에 대한 정보를 얻을 수 있습니다:

• duration: 🎧 비디오 또는 오디오의 총 재생 시간을 초 단위로 반환합니다. (예: 120.5 for 2분 30초 500밀리초).

• videoWidth: 🎥 비디오 트랙의 픽셀 단위 너비를 반환합니다. 오디오 요소에는 해당되지 않습니다.

• videoHeight: 🎥 비디오 트랙의 픽셀 단위 높이를 반환합니다. 오디오 요소에는 해당되지 않습니다.

• clientWidth: 📏 요소의 가시적인 너비를 픽셀 단위로 반환합니다. 이는 CSS에 의해 결정되는 실제 요소의 너비입니다.

• clientHeight: 📏 요소의 가시적인 높이를 픽셀 단위로 반환합니다. 이는 CSS에 의해 결정되는 실제 요소의 높이입니다.

• offsetWidth: 📏 요소의 레이아웃 너비를 반환합니다. 이는 clientWidth와 패딩, 스크롤바, 테두리까지 포함하는 값입니다.

• offsetHeight: 📏 요소의 레이아웃 높이를 반환합니다. 이는 clientHeight와 패딩, 스크롤바, 테두리까지 포함하는 값입니다.

• currentTime: ⏳ 현재 재생 헤드의 위치를 초 단위로 반환합니다. loadedmetadata 시점에는 일반적으로 0입니다.

• initialTime: 미디어의 시작 시간을 초 단위로 반환합니다. 대부분 0입니다.

• paused: ▶️ 미디어가 일시 중지되었는지 여부를 나타내는 불리언 값(true/false)을 반환합니다. loadedmetadata 시점에는 보통 true입니다.

• ended: ⏹️ 미디어 재생이 끝났는지 여부를 나타내는 불리언 값(true/false)을 반환합니다. loadedmetadata 시점에는 보통 false입니다.

• loop: 🔁 미디어가 반복 재생 설정되었는지 여부를 나타내는 불리언 값(true/false)을 반환합니다.

• muted: 🔇 미디어가 음소거 설정되었는지 여부를 나타내는 불리언 값(true/false)을 반환합니다.

• volume: 🔊 미디어의 볼륨 레벨을 0.0(가장 작음)에서 1.0(가장 큼) 사이의 값으로 반환합니다.

• currentSrc: 📄 현재 로드된 미디어 리소스의 URL을 반환합니다.

• readyState: ℹ️ 미디어의 로드 상태를 나타내는 숫자 값을 반환합니다. loadedmetadata 시점에는 보통 HTMLMediaElement.HAVE_METADATA(1) 또는 그 이상입니다.

• networkState: 🌐 미디어의 네트워크 상태를 나타내는 숫자 값을 반환합니다. (예: HTMLMediaElement.NETWORK_IDLE, HTMLMediaElement.NETWORK_LOADING 등)

• textTracks: 📝 미디어와 관련된 텍스트 트랙(예: 자막, 캡션) 목록을 반환합니다.