안녕하세요. 명월입니다.
이 글은 video와 audio 태그에 관한 글입니다.
HTML5에서 video태그와 audio태그가 기본적으로 추가되었습니다. 그래서 예전처럼 따로 flash나 browser addon 프로그램을 설치하지 않아도 기본 옵션으로 동영상과 audio 플레이어를 실행할 수 있습니다.
한 10년 전만해도 media player를 커스텀해서 object 태그에 넣고 제공했던 것이 엊그제 같은데 , 이제는 태그만으로 플레이어를 만들 수 있으니 참 많이 편리해 졌다라고 생각됩니다.
샘플 음악 파일 - https://file-examples.com/index.php/sample-audio-files/sample-mp3-download/
샘플 동영상 파일 - http://techslides.com/sample-webm-ogg-and-mp4-video-files-for-html5
<!DOCTYPE html>
<html>
<head>
<title>title</title>
<!-- Bootstrap cdn 설정 -->
<script src="https://code.jquery.com/jquery-3.4.1.min.js"></script>
</head>
<body>
<!-- 오디오 설정 태그 -->
<!-- 오디오 태그는 컨트럴 설정이 없으면 아예 표시가 되지 않는다. -->
<audio src="https://file-examples.com/wp-content/uploads/2017/11/file_example_MP3_5MG.mp3"></audio>
<!-- 동영상 설정 태그 -->
<video src="http://techslides.com/demos/sample-videos/small.mp4"></video>
</body>
</html>
위 예제를 보면 일반 플레이어처럼 play/pause를 제어하는 패널이 없습니다. 태그에 속성을 추가하거나 자바 스크립트에 플레이어를 커스텀할 수 있습니다.
| 속성 | 설명 |
|---|---|
| audioTracks | 사용 가능한 오디오 트랙을 나타내는 AudioTrackList 객체를 반환합니다. |
| autoplay | 오디오 / 비디오가 로드되면 자동 재생할지 여부를 설정하거나 반환합니다. |
| buffered | 오디오 / 비디오의 버퍼링 된 부분을 나타내는 TimeRanges 객체를 반환합니다. |
| controller | 오디오 / 비디오의 현재 미디어 컨트롤러를 나타내는 MediaController 객체를 반환합니다. |
| controls | 오디오 / 비디오에 컨트롤 (재생 / 일시 정지 등)을 표시할지 여부를 설정하거나 반환합니다. |
| crossOrigin | 오디오 / 비디오의 CORS 설정을 설정하거나 반환합니다. |
| currentSrc | 현재 오디오 / 비디오의 URL을 반환합니다. |
| currentTime | 오디오 / 비디오의 현재 재생 위치를 설정하거나 반환합니다 (초). |
| defaultMuted | 오디오 / 비디오를 기본적으로 음소거해야하는지 여부를 설정하거나 반환합니다. |
| defaultPlaybackRate | 오디오 / 비디오 재생의 기본 속도를 설정하거나 반환합니다. |
| duration | 현재 오디오 / 비디오의 길이를 초 단위로 반환합니다. |
| ended | 오디오 / 비디오 재생이 종료되었는지 여부를 반환합니다. |
| error | 오디오 / 비디오의 오류 상태를 나타내는 MediaError 객체를 반환합니다. |
| loop | 끝나면 오디오 / 비디오를 다시 시작해야하는지 여부를 설정하거나 반환합니다. |
| mediaGroup | 오디오 / 비디오가 속한 그룹을 설정하거나 반환합니다.(여러 오디오 / 비디오 요소를 연결하는 데 사용) |
| muted | 오디오 / 비디오 음소거 여부를 설정 또는 반환합니다. |
| networkState | 오디오 / 비디오의 현재 네트워크 상태를 반환합니다. |
| paused | 오디오 / 비디오가 일시 중지되었는지 여부를 반환합니다. |
| playbackRate | 오디오 / 비디오 재생 속도를 설정하거나 반환합니다. |
| played | 오디오 / 비디오의 재생 부분을 나타내는 TimeRanges 객체를 반환합니다. |
| preload | 페이지가 로드될 때 오디오 / 비디오를로드해야하는지 여부를 설정하거나 반환합니다. |
| readyState | 오디오 / 비디오의 현재 준비 상태를 반환합니다. |
| seekable | 오디오 / 비디오의 검색 가능한 부분을 나타내는 TimeRanges 객체를 반환합니다. |
| seeking | 사용자가 현재 오디오 / 비디오를 찾고 있는지 여부를 반환합니다. |
| src | 오디오 / 비디오 요소의 현재 소스를 설정하거나 반환합니다. |
| startDate | 현재 시간 오프셋을 나타내는 Date 객체를 반환합니다. |
| textTracks | 사용 가능한 텍스트 트랙을 나타내는 TextTrackList 객체를 반환합니다. |
| videoTracks | 사용 가능한 비디오 트랙을 나타내는 VideoTrackList 객체를 반환합니다. |
| volume | 오디오 / 비디오의 볼륨을 설정하거나 반환합니다. |
<!DOCTYPE html>
<html>
<head>
<title>title</title>
<!-- Bootstrap cdn 설정 -->
<script src="https://code.jquery.com/jquery-3.4.1.min.js"></script>
</head>
<body>
<!-- audio 태그에 control패널, 자동 실행, loop, 미리 읽기 설정 (아래 예제는 autoplay 생략) -->
<audio id="myAudio" controls autoplay loop preload>
<!-- source로 리스트 설정 가능 -->
<source src="https://file-examples.com/wp-content/uploads/2017/11/file_example_MP3_5MG.mp3"></source>
</audio>
<!-- video 태그에 control패널, 자동 실행, loop, 미리 읽기 설정 (아래 예제는 autoplay 생략) -->
<video id="myVideo" controls autoplay loop preload>
<!-- source로 리스트 설정 가능 -->
<source src="http://techslides.com/demos/sample-videos/small.mp4"></source>
</video>
<script>
// audio와 video 오브젝트를 취득함.
var audio = document.getElementById("myAudio");
var video = document.getElementById("myVideo");
// 볼륨 강제 설정.. 불륨은 0이 최소, 1이 최대 값임.
audio.volume = 0.1;
video.volume = 0.1;
</script>
</body>
</html>
audio와 video는 함수와 이벤트도 있습니다.
함수는 컨트롤을 제어하는 함수이고, 이벤트는 컨트롤이 재생 중일때, 현재 재생 위치라던가 buffering 상태등을 취득할 수 있습니다.
| 함수 | 설명 |
|---|---|
| addTextTrack() | 오디오 / 비디오에 새 텍스트 트랙을 추가합니다. |
| canPlayType() | 브라우저가 지정된 오디오 / 비디오 유형을 재생할 수 있는지 확인합니다. |
| load() | 오디오 / 비디오 요소를 다시 로드합니다. |
| play() | 오디오 / 비디오 재생을 시작합니다. |
| pause() | 현재 재생중인 오디오 / 비디오를 일시 중지합니다. |
| 이벤트 | 설명 |
|---|---|
| abort | 오디오 / 비디오로드가 중단되면 발생합니다. |
| canplay | 브라우저가 오디오 / 비디오 재생을 시작 할 수 있을 때 발생합니다. |
| canplaythrough | 버퍼링을 중단하지 않고 브라우저가 오디오 / 비디오를 통해 재생할 수있을 때 발생합니다. |
| durationchange | 오디오 / 비디오 지속 시간이 변경되면 시작됩니다. |
| emptied | 현재 재생 목록이 비어있을 때 발생합니다. |
| ended | 현재 재생 목록이 종료되면 시작됩니다. |
| error | 오디오 / 비디오를로드하는 동안 오류가 발생했을 때 발생합니다. |
| loadeddata | 브라우저가 오디오 / 비디오의 현재 프레임을 로드하면 시작됩니다. |
| loadedmetadata | 브라우저가 오디오 / 비디오에 대한 메타 데이터를 로드하면 시작됩니다. |
| loadstart | 브라우저가 오디오 / 비디오를 찾기 시작하면 시작됩니다. |
| pause | 오디오 / 비디오가 일시 정지되었을 때 발생합니다. |
| play | 오디오 / 비디오가 시작되었거나 더 이상 일시 중지되지 않은 경우 발생합니다. |
| playing | 버퍼링을 위해 일시 정지 또는 중지 된 후 오디오 / 비디오가 재생 될 때 발생합니다. |
| progress | 브라우저가 오디오 / 비디오를 다운로드 할 때 발생합니다. |
| ratechange | 오디오 / 비디오의 재생 속도가 변경되면 시작됩니다. |
| seeked | 사용자가 오디오 / 비디오에서 새 위치로 이동 / 건너 뛰기 시작하면 시작됩니다. |
| seeking | 사용자가 오디오 / 비디오에서 새 위치로 이동 / 건너 뛰기 시작하면 시작됩니다. |
| stalled | 브라우저가 미디어 데이터를 가져 오려고 할 때 발생하지만 데이터를 사용할 수 없습니다. |
| suspend | 브라우저가 의도적으로 미디어 데이터를 얻지 못할 때 발생합니다. |
| timeupdate | 현재 재생 위치가 변경되면 시작됩니다. |
| volumechange | 볼륨이 변경되면 발생합니다. |
| waiting | 다음 프레임을 버퍼링해야 하므로 비디오가 중지되면 시작됩니다. |
<!DOCTYPE html>
<html>
<head>
<title>title</title>
<!-- Bootstrap cdn 설정 -->
<script src="https://code.jquery.com/jquery-3.4.1.min.js"></script>
</head>
<body>
<!-- audio와 video 설정 -->
<audio src="https://file-examples.com/wp-content/uploads/2017/11/file_example_MP3_5MG.mp3" id="myAudio" preload></audio>
<br />
<!-- audio와 video의 재생, 스톱 설정을 button으로 설정한다. -->
<button id="audioPlay">음악 재생</button><button id="audioStop">음악 스톱</button><br />
<!-- 재생 상태 -->
<p>음악 로드 - <span id="audioProgress">0 / 0</span></p>
<video src="http://techslides.com/demos/sample-videos/small.mp4" id="myVideo" preload></video>
<br />
<button id="videoPlay">동영상 재생</button><button id="videoStop">동영상 스톱</button><br />
<!-- 재생 상태 -->
<p>동영상 로드 - <span id="videoProgress">0 / 0</span></p>
<script>
// audio와 video 오브젝트를 취득함.
var audio = document.getElementById("myAudio");
var video = document.getElementById("myVideo");
//음악 재생 클릭
$("#audioPlay").on("click", function() {
// 음악 재생
audio.play();
// 동영상 스톱
video.pause();
});
//음악 스톱 클릭
$("#audioStop").on("click", function() {
// 음악 스톱
audio.pause();
});
//동영상 재생 클릭
$("#videoPlay").on("click", function() {
// 동영상 재생
video.play();
// 음악 스톱
audio.pause();
});
//동영상 스톱 클릭
$("#videoStop").on("click", function() {
// 동영상 스톱
video.pause();
});
// 음악 재생 시간이 바뀌면 호출되는 이벤트
audio.addEventListener('timeupdate', function(e){
// 현재 재생 시간 (초 단위 절삭)
var playtime = Math.floor(audio.currentTime);
// 전체 재생 시간 (초 단위 절삭)
var total = Math.floor(audio.duration);
// 상태 표시
$("#audioProgress").html(playtime + " / " + total);
}, false);
// 동영상 재생 시간이 바뀌면 호출되는 이벤트
video.addEventListener('timeupdate', function(e){
// 현재 재생 시간 (초 단위 절삭)
var playtime = Math.floor(video.currentTime);
// 전체 재생 시간 (초 단위 절삭)
var total = Math.floor(video.duration);
// 상태 표시
$("#videoProgress").html(playtime + " / " + total);
}, false);
</script>
</body>
</html>
음악 로드 - 0 / 0
동영상 로드 - 0 / 0
여기까지 video와 audio 태그에 대한 글이었습니다.
궁금한 점이나 잘못된 점이 있으면 댓글 부탁드립니다.
'Development note > Javascript, JQuery, CSS' 카테고리의 다른 글
| [Javascript] 웹 사이트나 블로그등에 소스 코드 보기(highlightjs.min.js) (1) | 2021.01.13 |
|---|---|
| [Jquery] ajax 전역 이벤트를 사용하는 방법 (0) | 2019.11.27 |
| [Javascript] Html태그로 파일 다운로드(base64)를 하는 방법 (0) | 2019.11.23 |
| [Javascript] 서명 마크(sign)를 만드는 방법(canvas태크) (4) | 2019.11.14 |
| [Jquery] $.cookie 사용법 (0) | 2019.11.12 |
| [CSS] 반응형 웹을 만들기 위한 브라우저 사이즈별 css 적용 방법 (0) | 2019.11.05 |
| [Javascript] 팝업 라이브러리(bootbox) (0) | 2019.11.04 |
| [Javascript] 접속 브라우져를 확인하는 방법 (0) | 2019.11.02 |