웹 오디오
HTML5 이전에는 오디오 파일을 플러그인 (예 : 플래시)이있는 브라우저에서만 재생할 수있었습니다.
HTML5 <audio>요소는 웹 페이지에 오디오를 포함시키는 표준 방법을 지정합니다.
HTML <audio> 요소
<audio controls>
<source src="horse.ogg" type="audio/ogg">
<source src="horse.mp3" type="audio/mpeg">
Your browser does not support the audio element.
</audio>
이 controls속성은 재생, 일시 중지 및 볼륨과 같은 오디오 컨트롤을 추가합니다.
이 <source>요소를 사용하면 브라우저에서 선택할 수있는 대체 오디오 파일을 지정할 수 있습니다. 브라우저는 처음 인식 된 형식을 사용합니다.
<audio>및 </audio>태그 사이의 텍스트 는 <audio>요소를 지원하지 않는 브라우저에만 표시됩니다 .
HTML 오디오 및 비디오 DOM 참조
HTML5 DOM에는 <audio>및 <video> 요소에 대한 메소드, 속성 및 이벤트가 있습니다.
이 메서드, 속성 및 이벤트는 조작 할 수 <audio>및 <video>요소는 자바 스크립트를 사용하여.
HTML 오디오 / 비디오 방법
MethodDescription
addTextTrack() | Adds a new text track to the audio/video |
canPlayType() | Checks if the browser can play the specified audio/video type |
load() | Re-loads the audio/video element |
play() | Starts playing the audio/video |
pause() | Pauses the currently playing audio/video |
HTML 오디오 / 비디오 속성
PropertyDescription
audioTracks | Returns an AudioTrackList object representing available audio tracks |
autoplay | Sets or returns whether the audio/video should start playing as soon as it is loaded |
buffered | Returns a TimeRanges object representing the buffered parts of the audio/video |
controller | Returns the MediaController object representing the current media controller of the audio/video |
controls | Sets or returns whether the audio/video should display controls (like play/pause etc.) |
crossOrigin | Sets or returns the CORS settings of the audio/video |
currentSrc | Returns the URL of the current audio/video |
currentTime | Sets or returns the current playback position in the audio/video (in seconds) |
defaultMuted | Sets or returns whether the audio/video should be muted by default |
defaultPlaybackRate | Sets or returns the default speed of the audio/video playback |
duration | Returns the length of the current audio/video (in seconds) |
ended | Returns whether the playback of the audio/video has ended or not |
error | Returns a MediaError object representing the error state of the audio/video |
loop | Sets or returns whether the audio/video should start over again when finished |
mediaGroup | Sets or returns the group the audio/video belongs to (used to link multiple audio/video elements) |
muted | Sets or returns whether the audio/video is muted or not |
networkState | Returns the current network state of the audio/video |
paused | Returns whether the audio/video is paused or not |
playbackRate | Sets or returns the speed of the audio/video playback |
played | Returns a TimeRanges object representing the played parts of the audio/video |
preload | Sets or returns whether the audio/video should be loaded when the page loads |
readyState | Returns the current ready state of the audio/video |
seekable | Returns a TimeRanges object representing the seekable parts of the audio/video |
seeking | Returns whether the user is currently seeking in the audio/video |
src | Sets or returns the current source of the audio/video element |
startDate | Returns a Date object representing the current time offset |
textTracks | Returns a TextTrackList object representing the available text tracks |
videoTracks | Returns a VideoTrackList object representing the available video tracks |
volume | Sets or returns the volume of the audio/video |
HTML 오디오 / 비디오 이벤트
EventDescription
abort | Fires when the loading of an audio/video is aborted |
canplay | Fires when the browser can start playing the audio/video |
canplaythrough | Fires when the browser can play through the audio/video without stopping for buffering |
durationchange | Fires when the duration of the audio/video is changed |
emptied | Fires when the current playlist is empty |
ended | Fires when the current playlist is ended |
error | Fires when an error occurred during the loading of an audio/video |
loadeddata | Fires when the browser has loaded the current frame of the audio/video |
loadedmetadata | Fires when the browser has loaded meta data for the audio/video |
loadstart | Fires when the browser starts looking for the audio/video |
pause | Fires when the audio/video has been paused |
play | Fires when the audio/video has been started or is no longer paused |
playing | Fires when the audio/video is playing after having been paused or stopped for buffering |
progress | Fires when the browser is downloading the audio/video |
ratechange | Fires when the playing speed of the audio/video is changed |
seeked | Fires when the user is finished moving/skipping to a new position in the audio/video |
seeking | Fires when the user starts moving/skipping to a new position in the audio/video |
stalled | Fires when the browser is trying to get media data, but data is not available |
suspend | Fires when the browser is intentionally not getting media data |
timeupdate | Fires when the current playback position has changed |
volumechange | Fires when the volume has been changed |
waiting | Fires when the video stops because it needs to buffer the next frame |
'Publishing > HTML' 카테고리의 다른 글
HTML5 Canvas (0) | 2020.02.13 |
---|---|
HTML5 Video (fullpage Video) (0) | 2020.02.13 |
HTML5의 새로운 태그 (0) | 2020.02.13 |
HTML 기본 layout (0) | 2020.02.12 |
html header 정보 (0) | 2020.02.12 |