웹 페이지에 오디오 및 동영상 추가

HTML5를 사용하면 웹 페이지에 오디오와 동영상을 쉽게 추가할 수 있습니다. 최신 브라우저에서는 audiovideo가 기본적으로 지원되므로 추가 소프트웨어 없이 미디어 요소를 추가하고 스타일을 지정하고 프로그래밍할 수 있습니다.

이 섹션의 내용

항목설명

웹 페이지에 오디오 플레이어 추가

HTML5를 사용하면 타사 플러그 인이나 추가 기능 없이도 웹 페이지에 음악 플레이어를 추가할 수 있습니다.

HTML5를 사용하여 웹 페이지에서 동영상 파일을 재생하는 방법

HTML5 동영상을 사용하면 외부 컨트롤 또는 플러그 인 없이 웹 페이지에서 동영상 콘텐츠를 추가 및 제어할 수 있습니다.

시간 지정 텍스트 트랙을 사용하여 동영상에 액세스할 수 있도록 설정

HTML5 동영상 요소와 함께 사용되는 시간 지정 텍스트 트랙 API는 접근성, 변환된 기록 또는 확장 콘텐츠를 동영상에 추가하는 도구를 제공합니다.

 

소개

이전에는 웹 페이지에 미디어를 추가하기 위해 여러 체계에서 오디오와 동영상을 선택하여 추가해야 했습니다. 대체로 이 미디어 지원에 필요한 추가 소프트웨어는 자주 업데이트해야 하고, 프로그래밍하기 어려운 경우도 있으며, 페이지에 통합되는 방식이 제한될 수 있습니다. HTML5 기본 오디오 및 동영상 지원을 사용하면 멀티미디어를 쉽게 추가할 수 있습니다.

HTML5 사양(영문)에서는 페이지에 다른 요소와 함께 사용할 수 있는 오디오 및 동영상 요소와 관련 속성 및 메서드에 대해 간단하게 설명합니다. 브라우저 지원이 향상되고 사양이 발전함에 따라 보다 강력한 콘텐츠가 포함된 페이지를 만들 수 있습니다. 예를 들어 오디오 요소를 여러 개 사용하면 페이지에서 개별 오디오 트랙에 있는 여러 악기로 음악을 연주할 수 있습니다.

페이지에 동영상 요소를 추가하는 경우 자리 표시자 이미지를 표시하고, CSS 스타일시트를 사용하여 요소에 스타일을 지정하고, 기본 컨트롤을 사용하거나 고유한 컨트롤을 만들 수 있습니다. 메서드, 이벤트 및 속성을 사용하여 재생을 시작 및 중지하거나, 콘텐츠를 검색 또는 변경하거나, 여러 오디오 트랙 사이를 전환할 수 있습니다.

track 요소를 사용하면 단순 텍스트 파일을 만들고 지정하는 것만큼 쉽게 선택 캡션을 동영상에 추가할 수 있습니다. 동영상 요소가 모든 동기화와 표시를 처리합니다. 직접 캡션을 표시하려는 경우 API를 사용하여 스크립트에서 표시할 수도 있습니다.

HTML5 오디오 및 동영상 스크립팅을 통해 작업하는 경우 오디오 및 동영상이 동일한 여러 메서드와 속성을 공유한다는 것을 알 수 있습니다. 오디오가 시작 및 중지될 때 발생하는 이벤트를 작성하는 방법을 알게 되면 해당 코드를 동영상 스크립트에 다시 사용할 수 있습니다.

다음 링크는 HTML5 오디오 및 동영상을 탐색하고 웹 사이트 대상 그룹에게 놀라운 경험을 제공하는 데 도움이 됩니다.

영감 얻기

기본 사항을 이해한 다음 성능, 모범 사례, HTML5 오디오/동영상으로 할 수 있는 추가 기능 등에 대한 자세한 정보가 있는 다음 크리에이티브 문서를 확인합니다.

HTML5 오디오 기능 활용먼저 페이지에 오디오 요소를 추가하고 초기화하는 방법을 간단하게 살펴봅니다. 그런 다음 콘텐츠를 미리 로드하는 여러 가지 방법과 성능에 미치는 영향을 알아봅니다. 다중 트랙 음악 예제를 통해 오디오 콘텐츠를 반복하고 여러 오디오 트랙을 동기화하는 방법을 보여 줍니다. 마지막으로, 독창적이고 참신한 방법으로 HTML5 오디오 요소를 사용하는 실제 사이트를 추천합니다.
HTML5의 기본 오디오주요 브라우저에서 HTML5 오디오 요소와 API의 호환성에 대해 설명합니다. 여러 코덱 지원을 사용하는 방법, MIME 형식을 설정하는 방법, HTML5 오디오를 지원하지 않는 브라우저에서 페이지를 로드할 때 대체 콘텐츠를 만드는 방법 등도 배우게 됩니다.
모바일 장치에서 HTML5 동영상 재생이동 중에 동영상을 즐기는 방법을 보여 줍니다. HTML5 동영상 및 다른 대체 방법의 호환성에 대해서도 설명합니다. 또한 작성자는 경험 많은 프로그래머조차 곤경에 빠트릴 수 있는 "문제"를 지적합니다.
HTML5 동영상 캡션 작성기이 도구를 사용하면 손쉽게 WebVTT(웹 동영상 텍스트 트랙) 및 TTML(Timed Text Markup Language) 형식으로 시간이 지정된 텍스트 파일을 만들 수 있습니다.

 

코드 실행 보기

HTML5 오디오 및 동영상으로 수행할 수 있는 작업을 보여 주는 멋진 데모를 제공합니다. F12 개발자 도구와 스크립트 탭을 사용하여 데모에 사용된 코드를 확인합니다. F12 도구에 대한 자세한 내용은 F12 개발자 도구를 사용하여 웹 페이지를 디버그하는 방법을 참조하세요.

IE10 동영상 캡션<track> 요소를 사용하여 HTML5 동영상에 선택 캡션을 추가하는 방법을 보여 줍니다.
IE Beatz드러머 및 드러머 지망생을 대상으로 한 재미있는 데모로, 여러 오디오 요소를 사용하여 사운드를 계층화하는 방법을 보여 줍니다.
HTML5 오디오 플레이어 + XML 재생 목록이 데모에서는 HTML5 오디오를 기본 XML과 결합하여 재생 목록을 만들고 SVG(Scalable Vector Graphics)를 컨트롤에 사용합니다.

 

 

 

표시:
© 2014 Microsoft