& lt; audio & gt를 사용하여 HTML5에 오디오 및 비디오를 포함시키는 방법; 및 & lt; video & gt; 강요?

<audio></audio> 및 <video></video> 요소를 사용하여 HTML5에 오디오 및 비디오를 포함

HTML5의 <audio></audio> 및 <video></video> 요소는 오디오 및 비디오 컨텐츠를 웹 페이지에 포함시키는 간단한 방법을 제공합니다. 기본 구조는 간단합니다. 오디오의 경우 <audio></audio> 태그를 사용하고 <source></source> 태그를 사용하여 소스를 지정하여 다른 브라우저 호환성에 대한 여러 소스를 제공 할 수 있습니다. 비디오의 경우 <video></video> 태그를 비슷하게 사용합니다. 예는 다음과 같습니다.

오디오 예 :

 <code class="html"><audio controls> <source src="audio.mp3" type="audio/mpeg"> <source src="audio.ogg" type="audio/ogg"> Your browser does not support the audio element. </source></source></audio></code>

이 코드는 먼저 audio.mp3 재생하려고 시도합니다. 브라우저가 MP3를 지원하지 않으면 audio.ogg 시도합니다. 지원되지 않으면 폴백 텍스트가 표시됩니다.

Video Example:

 <code class="html"><video width="320" height="240" controls> <source src="video.mp4" type="video/mp4"> <source src="video.webm" type="video/webm"> Your browser does not support the video tag. </source></source></video></code>

이 예제는 마찬가지로 video.mp4 재생하려고 시도합니다. 그런 다음 video.webm , 지원되지 않으면 폴백 메시지가 있습니다. width 와 height 속성은 초기 치수를 설정합니다. controls 속성은 기본 재생 컨트롤을 추가합니다.

<audio></audio> 및 <video></video> 요소의 일반적인 속성 및 방법

<audio></audio> 및 <video></video> 요소 모두 많은 일반적인 속성과 방법을 공유합니다. 다음은 몇 가지 중요한 것들입니다.

속성 :

• src : 미디어 파일의 URL을 지정합니다.
• controls : 기본 재생 컨트롤 (재생, 일시 정지, 볼륨 등)을 추가합니다.
• autoplay : 페이지가로드되면 자동으로 재생이 시작됩니다. (종종 AutoPlay는 사용자 경험을 위해 브라우저에 의해 제한됩니다.)
• loop : 미디어를 반복적으로 재생합니다.
• muted : 재생을 시작합니다.
• preload : 브라우저에 미디어를로드하는 방법 (예 : auto , metadata , none ).
• poster : (비디오 만) 재생이 시작되기 전에 표시 할 이미지를 지정합니다.
• width 와 height : 비디오 플레이어의 크기를 설정하십시오.

행동 양식:

• play() : 재생을 시작합니다.
• pause() : 재생을 일시 중지합니다.
• currentTime : 현재 재생 시간을 가져 오거나 설정합니다.
• volume : 볼륨을 가져 오거나 설정합니다 (0.0 ~ 1.0).
• muted : 음소거 상태를 얻거나 설정합니다.

이러한 속성과 방법을 사용하면 미디어 재생 경험을 크게 제어 할 수 있습니다. 이벤트 리스너 (예 : error 이벤트)를 사용하여 잠재적 오류를 처리해야합니다.

다른 브라우저 호환성 문제를 처리합니다

브라우저 호환성은 오디오 및 비디오를 포함시키는 데 중요한 측면입니다. 다른 브라우저는 다른 코덱 (미디어 데이터를 인코딩하는 방법)을 지원합니다. 이것을 해결하기 위해 :

• 여러 소스 제공 : 위의 예에서 볼 수 있듯이 <source></source> 요소를 사용하여 여러 미디어 소스에 다른 코덱 (예 : MP4, Webm, OGG)을 제공하십시오. 이를 통해 브라우저에서 호환 형식을 찾을 수 있습니다.
• JavaScript 라이브러리 사용 라이브러리 사용 : Howler.js (오디오 용)와 같은 라이브러리는 브라우저 특정 복잡성 중 일부를 추상화하여 다른 브라우저에서 일관된 API를 제공 할 수 있습니다.
• 폴백 컨텐츠 : <audio></audio> 또는 <video></video> 요소 또는 지정된 코덱을 지원하지 않는 브라우저에 대해 항상 폴백 컨텐츠 (예제의 문자 메시지와 같은)를 제공하십시오.
• Modernizr : ModernIzr과 같은 JavaScript 라이브러리는 브라우저 기능을 감지하고 브라우저 지원을 기반으로 다양한 컨텐츠를 제공 할 수 있습니다.

이러한 전략을 구현하면 오디오 및 비디오 컨텐츠가 광범위한 브라우저에서 올바르게 재생 될 가능성을 크게 향상시킬 수 있습니다.

임베디드 오디오 및 비디오를위한 반응 형 디자인 보장

반응 형 디자인을 사용하면 미디어가 다른 화면 크기에 적응할 수 있습니다. 이를 달성하는 방법은 다음과 같습니다.

• 비율 기반 치수 사용 : 고정 width 및 height 속성 대신 백분율을 사용하십시오. 이를 통해 비디오 플레이어는 화면 크기로 비례 적으로 확장 할 수 있습니다. 예 : <video width="100%" height="auto" controls></video> .
• CSS 스타일링 : CSS를 사용하여 레이아웃 및 응답 성을 제어합니다. 미디어 쿼리를 사용하여 화면 크기에 따라 미디어 플레이어의 크기와 배치를 조정할 수 있습니다.
• 컨테이너 요소 : 컨테이너 요소 (예 :
  )에 <audio></audio> 또는 <video></video> 요소를 래핑하고 컨테이너를 스타일링하여 적절하게 응답 할 수 있습니다. 이를 통해 전체 레이아웃을 더 잘 제어 할 수 있습니다.
• 종횡비 : 왜곡을 피하기 위해 비디오의 올바른 종횡비를 유지하십시오. CSS 패딩 또는 기타 기술을 사용하여이를 달성 할 수 있습니다. 예를 들어, 종횡비에 따라 계산 된 백분율의 패딩 바닥을 사용합니다.

이러한 기술을 결합하여 내장 된 오디오 및 비디오 컨텐츠는 다양한 장치 및 화면 크기에 원활하게 적응하여 모든 플랫폼에서 일관된 사용자 경험을 제공합니다.