HTML5-오디오 및 동영상

HTML5 기능에는 Flash 없이도 기본 오디오 및 비디오 지원이 포함됩니다.

HTML5 <audio> 및 <video> 태그를 사용하면 웹 사이트에 미디어를 간단하게 추가 할 수 있습니다. 설정해야합니다.src 속성은 미디어 소스를 식별하고 사용자가 미디어를 재생 및 일시 중지 할 수 있도록 컨트롤 속성을 포함합니다.

비디오 삽입

다음은 웹 페이지에 비디오 파일을 삽입하는 가장 간단한 형태입니다.

<video src = "foo.mp4"  width = "300" height = "200" controls>
   Your browser does not support the <video> element.   
</video>

현재 HTML5 초안 사양은 브라우저가 동영상 태그에서 지원해야하는 동영상 형식을 지정하지 않습니다. 그러나 가장 일반적으로 사용되는 비디오 형식은 다음과 같습니다.

Ogg − Thedora 비디오 코덱 및 Vorbis 오디오 코덱이 포함 된 Ogg 파일.
mpeg4 − H.264 비디오 코덱 및 AAC 오디오 코덱이있는 MPEG4 파일.

<source> 태그를 사용하여 미디어 유형 및 기타 여러 속성과 함께 미디어를 지정할 수 있습니다. 비디오 요소는 여러 소스 요소를 허용하며 브라우저는 처음 인식 된 형식을 사용합니다.

<!DOCTYPE HTML>

<html>
   <body>
      
      <video  width = "300" height = "200" controls autoplay>
         <source src = "/html5/foo.ogg" type ="video/ogg" />
         <source src = "/html5/foo.mp4" type = "video/mp4" />
         Your browser does not support the <video> element.
      </video>
      
   </body>
</html>

이것은 다음 결과를 생성합니다-

비디오 속성 사양

HTML5 비디오 태그는 컨트롤의 모양과 느낌과 다양한 기능을 제어하는 여러 속성을 가질 수 있습니다.

Sr. 아니.	속성 및 설명
1	autoplay 이 부울 속성을 지정하면 데이터로드를 완료하기 위해 중지하지 않고 가능한 한 빨리 비디오가 자동으로 재생되기 시작합니다.
2	autobuffer 이 부울 속성이 지정되면 자동으로 재생되도록 설정되지 않은 경우에도 동영상이 자동으로 버퍼링을 시작합니다.
삼	controls 이 속성이 있으면 사용자가 볼륨, 검색 및 재생 일시 중지 / 다시 시작을 포함하여 비디오 재생을 제어 할 수 있습니다.
4	height 이 속성은 CSS 픽셀 단위로 동영상 표시 영역의 높이를 지정합니다.
5	loop 이 부울 속성을 지정하면 끝 부분에 도달 한 후 비디오가 자동으로 시작 부분으로 되돌아 갈 수 있습니다.
6	preload 이 속성은 페이지로드시 동영상이로드되고 실행할 준비가되도록 지정합니다. 자동 재생이있는 경우 무시됩니다.
7	poster 사용자가 재생하거나 찾을 때까지 표시 할 이미지의 URL입니다.
8	src 삽입 할 동영상의 URL입니다. 이것은 선택 사항입니다. 대신 비디오 블록 내에서 <source> 요소를 사용하여 포함 할 비디오를 지정할 수 있습니다.
9	width 이 속성은 CSS 픽셀 단위로 동영상 표시 영역의 너비를 지정합니다.

오디오 삽입

HTML5는 다음과 같이 HTML 또는 XHTML 문서에 사운드 콘텐츠를 삽입하는 데 사용되는 <audio> 태그를 지원합니다.

<audio src = "foo.wav" controls autoplay>
   Your browser does not support the <audio> element.   
</audio>

현재 HTML5 초안 사양은 브라우저가 오디오 태그에서 지원해야하는 오디오 형식을 지정하지 않습니다. 그러나 가장 일반적으로 사용되는 오디오 형식은ogg, mp3 과 wav.

<source & ggt; 태그를 사용하여 미디어 유형 및 기타 여러 속성과 함께 미디어를 지정합니다. 오디오 요소는 여러 소스 요소를 허용하고 브라우저는 처음 인식 된 형식을 사용합니다.

<!DOCTYPE HTML>

<html>
   <body>
      
      <audio controls autoplay>
         <source src = "/html5/audio.ogg" type = "audio/ogg" />
         <source src = "/html5/audio.wav" type = "audio/wav" />
         Your browser does not support the <audio> element.
      </audio>
      
   </body>
</html>

이것은 다음 결과를 생성합니다-

오디오 속성 사양

HTML5 오디오 태그는 컨트롤의 모양과 느낌과 다양한 기능을 제어하는 여러 속성을 가질 수 있습니다.

Sr. 아니.	속성 및 설명
1	autoplay 이 부울 속성이 지정되면 오디오는 데이터로드를 완료하기 위해 중지하지 않고 가능한 한 빨리 자동으로 재생을 시작합니다.
2	autobuffer 이 부울 속성이 지정되면 자동으로 재생되도록 설정되지 않은 경우에도 오디오가 자동으로 버퍼링을 시작합니다.
삼	controls 이 속성이 있으면 사용자가 볼륨, 검색 및 재생 일시 중지 / 다시 시작을 포함한 오디오 재생을 제어 할 수 있습니다.
4	loop 이 부울 속성이 지정되면 오디오가 끝에 도달 한 후 자동으로 시작 부분으로 되돌아 갈 수 있습니다.
5	preload 이 속성은 페이지로드시 오디오가로드되고 실행할 준비가되도록 지정합니다. 자동 재생이있는 경우 무시됩니다.
6	src 삽입 할 오디오의 URL입니다. 이것은 선택 사항입니다. 대신 비디오 블록 내에서 <source> 요소를 사용하여 포함 할 비디오를 지정할 수 있습니다.

미디어 이벤트 처리

HTML5 오디오 및 비디오 태그는 JavaScript를 사용하여 컨트롤의 다양한 기능을 제어하는 여러 속성을 가질 수 있습니다.

S. 아니.	이벤트 및 설명
1	abort 이 이벤트는 재생이 중단 될 때 생성됩니다.
2	canplay 이 이벤트는 미디어를 재생할 수있는 충분한 데이터를 사용할 수있을 때 생성됩니다.
삼	ended 이 이벤트는 재생이 완료 될 때 생성됩니다.
4	error 이 이벤트는 오류가 발생할 때 생성됩니다.
5	loadeddata 이 이벤트는 미디어의 첫 번째 프레임로드가 완료 될 때 생성됩니다.
6	loadstart 이 이벤트는 미디어로드가 시작될 때 생성됩니다.
7	pause 이 이벤트는 재생이 일시 중지 될 때 생성됩니다.
8	play 이 이벤트는 재생이 시작되거나 다시 시작될 때 생성됩니다.
9	progress 이 이벤트는 미디어 다운로드 진행률을 알리기 위해 주기적으로 생성됩니다.
10	ratechange 이 이벤트는 재생 속도가 변경 될 때 생성됩니다.
11	seeked 이 이벤트는 탐색 작업이 완료 될 때 생성됩니다.
12	seeking 이 이벤트는 탐색 작업이 시작될 때 생성됩니다.
13	suspend 이 이벤트는 미디어로드가 일시 중단 될 때 생성됩니다.
14	volumechange 이 이벤트는 오디오 볼륨이 변경 될 때 생성됩니다.
15	waiting 이 이벤트는 요청 된 작업 (예 : 재생)이 다른 작업 (예 : 탐색)의 완료를 보류하여 지연 될 때 생성됩니다.

다음은 주어진 비디오를 재생할 수있는 예입니다.

<!DOCTYPE HTML>

<html>
   <head>
   
      <script type = "text/javascript">
         function PlayVideo() {
            var v = document.getElementsByTagName("video")[0];  
            v.play(); 
         }
      </script>
   </head>
   
   <body>
   
      <form>         
         <video width = "300" height = "200" src = "/html5/foo.mp4">
         Your browser does not support the video element.
         </video>
         <br />
         <input type = "button" onclick = "PlayVideo();" value = "Play"/>
      </form>
      
   </body>
</html>

이것은 다음 결과를 생성합니다-

미디어 유형에 대한 서버 구성

대부분의 서버는 기본적으로 올바른 MIME 유형으로 Ogg 또는 mp4 미디어를 제공하지 않으므로 이에 대한 적절한 구성을 추가해야합니다.

AddType audio/ogg .oga
AddType audio/wav .wav
AddType video/ogg .ogv .ogg
AddType video/mp4 .mp4