video, audio 태그의 속성, 메서드
video, audio 공통 속성, 메서드 : https://developer.mozilla.org/en-US/docs/Web/API/HTMLMediaElement
video 속성, 메서드 : https://developer.mozilla.org/en-US/docs/Web/API/HTMLVideoElement
audio 속성, 메서드 : https://developer.mozilla.org/en-US/docs/Web/API/HTMLAudioElement
HTML에서 Media라는 건 video, audio를 말한다.
MDN 문서를 읽어보면 상속 받은 계층을 쉽게 이해할 수 있다. 우리가 사용하려는 HTMLMEdiaElement는 HTMLElement를 상속받은 것이고 그 위로도 여러 계층이 있다.
The HTMLMediaElement interface adds to HTMLElement the properties and methods needed to support basic media-related capabilities that are common to audio and video. The HTMLVideoElement and HTMLAudioElement elements both inherit this interface.
The HTMLVideoElement interface provides special properties and methods for manipulating video objects. It also inherits properties and methods of HTMLMediaElement and HTMLElement.
The HTMLAudioElement interface provides access to the properties of <audio> elements, as well as methods to manipulate them. It's based on, and inherits properties and methods from, the HTMLMediaElement interface.
html로 부터 다음과 같이 DOM을 가져와서 관련된 속성과 메서드를 이용해서 코드를 작성할 수 있습니다. 꿀~
const videoPlayer = document.querySelector("#jsVideoPlayer video");
const playButton = document.getElementById("jsPlayButton");
function handlePlayClick() {
if (videoPlayer.paused) {
videoPlayer.play();
} else {
videoPlayer.pause();
}
}
function init() {
playButton.addEventListener("click", handlePlayClick);
}
if (videoContainer) {
init();
}
그렇다면 각 video, audio DOM이 무슨 속성, 메서드를 가지고 있는지 대략적으로 살펴봅시다. 작성하지 않은 내용은 MDN에 가서 살펴보면 됩니다.
🚨 클래스의 메서드와 속성을 구분할 줄 알아야 합니다. 같은 이름인데 메서드인 것도 있고 속성인 것도 있습니다.
속성을 Read-only로 해놓은 대신 메서드로 조작하게끔 만든 것도 있고, 메서드가 없지만 속성을 수정할 수 있는 것도 있습니다. 문서를 보고 적절히 사용합시다.
🚨 풀 스크린은 MediaElement의 속성, 메서드가 아닙니다. 풀스크린을 구현하고 싶다면 다음을 참고합시다.
(https://developer.mozilla.org/en-US/docs/Web/API/Fullscreen_API)
(https://darrengwon.tistory.com/515?category=858364)
🚨 이벤트를 잘 활용합시다~
🎶 HTMLMediaElement
https://developer.mozilla.org/en-US/docs/Web/API/HTMLMediaElement
property
HTMLMediaElement.paused (read only입니다. play(), pause() 메서드 사용 합시다)
HTMLMediaElement.muted (method가 없으니 직접 true/false 값을 변경하면 됩니다)
HTMLMediaElement.volume (음량 관련. 0에서 1 까지 존재합니다.)
HTMLMediaElement.duration (A read-only double-precision floating-point value indicating the total duration of the media in seconds.)
HTMLMediaElement.currentTime
method
HTMLMediaElement.play()
HTMLMediaElement.pause()
event
abort (Fired when the resource was not fully loaded, but not as the result of an error.)
canplay
canplaythrough
durationchange
ended (Fired when playback stops when end of the media (<audio> or <video>) is reached or because no further data is available.)
error (Fired when the resource could not be loaded due to an error.)
loadeddata
loadedmetadata (Fired when the metadata has been loaded)
loadstart
pause (Fired when a request to pause play is handled and the activity has entered its paused state, most commonly occurring when the media's HTMLMediaElement.pause() method is called.)
play (Fired when the paused property is changed from true to false, as a result of the HTMLMediaElement.play() method, or the autoplay attribute)
playing (Fired when playback is ready to start after having been paused or delayed due to lack of data)
progress
timeupdate => currentTime이 업데이트 될 때마다 트리거 됩니다. progressive 바를 만들기에 좋겠죠?
volumechange
waiting
영상의 길이, 재생 시간 등을 로드할 때 곧바로 실행하면 정보를 받기 전이므로 NaN값이 떠버립니다.
따라서 loadedmetadata나 loadeddata 등의 이벤트로 콜백을 줘야 정상적인 값이 뜹니다.
videoPlayer.addEventListener("loadedmetadata", setTotalTime);
HTMLVideoElement
https://developer.mozilla.org/en-US/docs/Web/API/HTMLVideoElement
HTMLAudioElement
https://developer.mozilla.org/en-US/docs/Web/API/HTMLAudioElement