오디오 & 비디오 재생하기 2

오디오 & 비디오 재생하기 2

<audio> 태그와 <video> 태그의 속성

• <audio>태그와 <video>태그에서 사용할 수 있는 속성은 거의 일치합니다.

 

1. width, height 속성 - 비디오 크기 조절

• 화면에 표시되는 비디오의 크기를 조절하고 싶다면 <video> 태그에 전체 비디오와 관련된 속성을 지정합니다.

 

2. controls 속성 - 컨트롤 막대 표시

• 미디어 파일에 컨트롤 막대를 함께 표시합니다. 속성 값은 따로 없으며 controls라는 속성만 입력하면 됩니다.

 

<video src="media/musicvideo.mp4" controls></video>

 

3. preload 속성 - 파일 다운로드 여부

• preload 속성은 파일을 재생하기 전에 미디어 파일을 모두 다운로드할 것인지, 일부 정보만 다운로드 할 것인지 여부를 지정합니다.

 

속성 값	설 명
none	미디어 파일을 미리 다운로드하지 않고 사용자가 재생 버튼을 눌러야만 다운로드하기 시작합니다. <video src="media/musicvideo.mp4" controls preload="none"></video>
metadata	미디어 파일을 즉시 사용하지 않을 것이라고 생각해 미디어 파일 전체를 다운로드하지 않고 메타 정보만 다운로드 합니다. <video src="media/musicvideo.mp4" controls preload="metadata"></video>
auto	사용자가 즉시 이용할 수 있도록 웹 문서를 로드할 때 미디어 파일도 모두 다운로드 합니다. 다만 다운로드가 끝나도 사용자가 재생 버튼을 눌러야만 재생됩니다. 속성 갑을 지정하지 않고 preload라고만 설정하면 auto 값을 기본으로 합니다. 따라서 아래의 두 소스는 같은 의미입니다. <video src="media/musicvideo.mp4" controls preload="auto"></video> <video src="media/musicvideo.mp4" controls preload></video>

 

4. muted 속성 - 소리는 끄고 화면만 재생

• 비디오를 재생할 때 소리는 끄고 화면만 재생됩니다.
• 비디오를 문서 배경으로 사용하거나 특별히 소리가 필요하지 않은 비디오라면 별도 값 없이 muted 속성을 추가해 소리를 끌 수 있습니다.

 

5. autoplay 속성 - 자동 재생

• 특정 값 없이 autoplay라고 추가하면 비디오나 오디오 파일을 다운로드하자마자 재생됩니다.
• 하지만 이 속성을 사용하더라도 모바일 기기에서는 자동 재생되지 않습니다.

 

6. loop 속성 - 반복 재생

• 미디어 파일 재생이 끝났을 때 파일 맨 앞으로 되돌아가 반복 재생합니다.
• loop 속성을 사용하려면 loop라고 추가하면 됩니다.

 

7. poster 속성 - 문제 상황 표시

• 브라우저 문제나 인터넷 연결 문제 등 비디오를 재생할 수 없을 경우, 비디오 화면 자리에 대신 표시하는 이미지를 '포스터 이미지'라고 합니다.
• poster 속성은 다음과 같이 비디오 파일의 포스터 이미지를 지정합니다.

 

<video src="media/musicvideo.mp4" controls poster="fireworks.jpg"</video>