티스토리 뷰

Front-End-Web/html+css

제9강_HTML 멀티미디어

jsBae 2022. 10. 8. 00:15

HTML 멀티미디어

HTML5 이전까지는 각 웹 브라우저마다 멀티미디어 파일을 지원하는데 각자 다른 방식의 플러그인으로 처리했었습니다. 하지만 HTML5 에서는 외부 플러그인의 도움없이도 멀티미디어 파일을 간단히 사용할 수 있습니다

html5에서 재생 가능한 오디오 타입

mp3	audio/mpeg	mp3로 인코딩된 오디오 파일 Moving Picture Experts Group에 의해 개발되었으며, MPEG-1의 오디오 규격으로 개발된 손실 압축 파일 형식입니다.
wav	audio/wav	wave 형식으로 인코딩된 오디오 파일 IBM과 Microsoft에 의해 개발되었으며, 개인용 PC에서 오디오를 재생하기 위한 IBM과 Microsoft의 표준 오디오 파일 형식입니다.
ogg	audio/ogg	vorbis 오디오 코덱으로 인코딩된 ogg파일 Xiph 재단에 의해 개발되었으며, MP3의 대안으로 개발된 특허권으로 보호되지 않는 개방형 공개 멀티미디어 파일 형식입니다.

HTML audio

HTML5에서는 <audio>태그를 이용하여 웹 페이지에 오디오를 삽입하는 표준화된 방식을 제공합니다.

<audio controls autoplay muted>
  <source src="horse.ogg" type="audio/ogg">
  <source src="horse.mp3" type="audio/mpeg">
Your browser does not support the audio element.
</audio>

HTML 오디오 - 작동 원리

속성 은 controls재생, 일시 중지 및 볼륨과 같은 오디오 컨트롤을 추가합니다.
요소를 사용하면 브라우저에서 선택할 수 있는 <source>대체 오디오 파일을 지정할 수 있습니다. 브라우저는 처음으로 인식된 형식을 사용합니다.
<audio>와 태그 사이의 텍스트는 해당 요소 </audio>를 지원하지 않는 브라우저에서만 표시됩니다 .<audio>
controls : 오디오 플레이어를 화면에 표시
autoplay : 자동 재생
참고: Chromium 브라우저는 대부분의 경우 자동 재생을 허용하지 않습니다. 그러나 음소거된 자동 재생은 항상 허용됩니다.
loop : 자동 반복
<audio>출력되지 않을 때 표시 </audio>

브라우저 지원

HTML 오디오 형식

지원되는 오디오 형식은 MP3, WAV 및 OGG의 세 가지입니다. 다양한 형식에 대한 브라우저 지원은 다음과 같습니다.

Browser	Mp3	Wav	OGG
Edge/IE	YES	YES*	YES*
Chrome	YES	YES	YES
Firefox	YES	YES	YES
Safari	YES	YES	NO
Opera	YES	YES	YES

HTML 오디오 - 미디어 유형

HTML Video

HTML <video>요소는 웹 페이지에 비디오를 표시하는 데 사용됩니다.

<!DOCTYPE html> 
<html> 
<body> 

<video width="320" height="240" autoplay muted>
  <source src="movie.mp4" type="video/mp4">
  <source src="movie.ogg" type="video/ogg">
Your browser does not support the video tag.
</video>

<p>
Video courtesy of 
<a href="https://www.bigbuckbunny.org/" target="_blank">Big Buck Bunny</a>.
</p>

</body> 
</html>

작동 원리

속성 은 controls재생, 일시 중지 및 볼륨과 같은 비디오 컨트롤을 추가합니다.
참고: Chromium 브라우저는 대부분의 경우 자동 재생을 허용하지 않습니다. 그러나 음소거된 자동 재생은 항상 허용됩니다.
동영상이 자동으로 재생되도록 하려면 muted뒤에 추가 하세요(음소거됨). autoplay
width및 height속성 을 항상 포함하는 것이 좋습니다 . 높이와 너비가 설정되지 않은 경우 동영상이 로드되는 동안 페이지가 깜박일 수 있습니다.
요소를 사용하면 브라우저에서 선택할 수 있는 <source>대체 비디오 파일을 지정할 수 있습니다. 브라우저는 처음으로 인식된 형식을 사용합니다.
<video>와 태그 사이의 텍스트는 해당 요소 </video>를 지원하지 않는 브라우저에서만 표시됩니다 .<video>

브라우저 지원

HTML 비디오 - 미디어 유형

HTML로 YouTube 동영상 재생

웹 페이지에서 비디오를 재생하려면 다음을 수행하십시오.

YouTube에 동영상 업로드
비디오 ID를 기록해 둡니다.
<iframe>웹 페이지에서 요소 정의
src속성이 비디오 URL을 가리키도록 하십시오 .
width및 height속성을 사용하여 플레이어의 차원을 지정합니다 .
URL에 다른 매개변수를 추가합니다(아래 참조).

<iframe width="560" height="315" 
src="https://www.youtube.com/embed/yxGttpWEE4k" 
title="YouTube video player" 
frameborder="0" 
allow="accelerometer; 
autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture" 
allowfullscreen>
</iframe>