멀티미디어 태그
인터넷 초기에는 웹 사이트에서 영상이나 음원파일을 재생하기 위해 ActiveX라는
프로그램을 설치해야만 확인이 가능했다. 하지만
악성프로그램의 위험이 크다는 단점때문에 멀티미디어를 재생할 수 있는 다양한 태그가 생겼다.1. audio
소리파일을 재생하기 위해 사용한다.
웹표준에 따라 음원파일이 지원되지 않는 환경을 고려하여
'이 음원파일은 해당 브라우저에서 지원되지 않습니다.'라는 문구를 태그 사이에 넣어줘야 한다.[기본형]
- <audio src="연결경로" 속성="값" ></audio>
: 대부분의 브라우저에서 호환 가능한 음원파일을 출력할때 사용한다.
- <audio src="연결경로" 속성="값" >
<source src="연결경로" type="audio/mp3">
<source src="연결경로" type="audio/wav">
<source src="연결경로" type="audio/wma">
<source src="연결경로" type="audio/aac">
</audio>
: 호환되지 않는 음원파일을 다양한 환경에서 지원할때 사용한다.[속성]
- autoplay : 오디오를 자동 재생한다.
- controls : 웹 화면에 오디오 재생바를 출력한다.
- muted : 음소거
- loop : 반복재생
- preload :
재생버튼을 누르기 전에 오디오 파일을 다운로드하여 준비한다.
속성값으로는 none / metadata / auto 값이 있고
none은 사용자가 오디오를 틀지 않거나 서버가 최소한의 트래픽을 유지해야할때 사용한다.
즉, 미리 다운로드하여 준비하지 않는다.
metadata는 사용자의 의도에 따라 해당 음원을 재생할수도 있고 재생하지 않을수도
있을때 메타데이터(예를들어 길이나 소량의 내용)을 미리 다운로드 받아 준비해
주는 것을 말한다.
auto는 사용자의 의도와는 관계 없이 모든 데이터를 미리 다운받아 준비하는 것을
말한다. 용량이 큰 경우 브라우저의 성능과 데이터를 낭비할 수도 있음2. video
동영상을 출력할때 사용한다. 동영상은 박스의 형태이므로 width와 height속성을 넣을 수 있다.
이외의 다른 속성은 audio와 동일하다.
단, 동영상을 자동재생하기 위해서는 muted속성을
함께 포함해야만 자동재생이 되도록 w3c에서 제한했다.
audio와 마찬가지로 동영상 파일이 지원되지 않는 환경을 고려하여
'이 동영상은 해당 브라우저에서 지원되지 않습니다.'와 같은 문구를 반드시 포함해야 한다.[기본형]
- <video src="연결경로" 속성></video>
- <video src="연결경로" 속성>
<source src="연결경로" type="video/mp4">
<source src="연결경로" type="video/wav">
<source src="연결경로" type="video/webm">
</video>[속성]
- 위에 있는 audio속성들은 모두 사용가능하다.
- width : 동영상의 넓이를 지정한다.
- height : 동영상의 높이를 지정한다.
- poster : 동영상이 지원되지 않는 환경에서 보여줄 대체 이미지.
대체 이미지가 있다면 대체 텍스트는 생략한다.
Hi