초보자를 위한 HTML 및 CSS(22부): 웹사이트용 멀티미디어 (1)

잠시 추억을 떠올릴 수 있도록 고전적인 방식으로 웹사이트에 동영상을 삽입하는 방법의 예시를 보여드리겠습니다:

<object classid="clsid:d27cdb6e-ae6d-11cf-96b8-444553540000" width="425" height="344" codebase="http://download.macromedia.com/pub/shockwave/cabs/flash/swflash.cab#version=6,0,40,0"> <param name="allowFullScreen" value="true" /> <param name="allowscriptaccess" value="always" /> <param name="src" value="http://www.youtube.com/v/oHg5SJYRHA0&hl=en&fs=1&" /> <param name="allowfullscreen" value="true" /> <embed type="application/x-shockwave-flash" width="425" height="344" src="http://www.youtube.com/v/oHg5SJYRHA0&hl=en&fs=1&" allowscriptaccess="always" allowfullscreen="true"> </embed> </object>

물론 이러한 구문은 예쁘지 않습니다.

하지만 미적 관점을 무시하더라도 말이죠: 이 형식의 구문은 오류가 발생하기 쉽고 너무 복잡합니다. HTML5에서 동영상을 통합하는 것이 훨씬 쉽습니다. 이를 위해 비디오 요소가 사용됩니다.

다음은 이 비디오 요소를 통합하는 방법의 예시입니다:

<video src="video.ogv" width="300" height="200"> 안타깝게도 브라우저가 HTML5와 호환되지 않습니다 </video>

이것은 이 형식에서 가장 간단한 변형입니다. 하지만 이 구문 형식에서는 세 가지 속성이 중요합니다. 임베드할 동영상은 src를 통해 지정됩니다. 여기에 올바른 경로를 입력했는지 확인하세요. 너비와 높이 두 속성은 동영상의 너비와 높이를 결정합니다. 두 값을 모두 지정하지 않으면 동영상이 원래 크기로 표시됩니다. 두 값 중 하나만 입력하면 다른 값은 브라우저에서 자동으로 계산됩니다. 자동 재생 속성은 페이지가 로드되는 즉시 브라우저가 동영상을 자동으로 시작하도록 지시합니다. 일반적으로 사용자는 자동 재생을 원하지 않으므로 이 속성은 일반적으로 설정하지 않는 것이 좋습니다. 대역폭이 낮은 모바일 기기를 사용하는 사용자에게는 더욱 그렇습니다.

또 다른 흥미로운 속성은 컨트롤입니다. 이 기능을 사용하면 브라우저에 재생 및 볼륨에 대한 기본 제어 요소가 표시됩니다.

<video src="video.ogv" width="300" height="200" controls> 안타깝게도 브라우저가 HTML5와 호환되지 않습니다 </video>

다음은 브라우저의 결과입니다:

표시되는 바를 사용하여 동영상을 일시 중지하고 다시 시작할 수 있을 뿐만 아니라 볼륨 조절 기능도 포함되어 있습니다.

포스터 속성을 사용하여 동영상이 시작될 때까지 표시될 이미지를 지정할 수 있습니다. 이를 위해 포스터 속성이 사용됩니다.

<video src="video.ogv" width="300" height="200" poster="video.gif"> 안타깝게도 브라우저가 HTML5와 호환되지 않습니다 </video>

다시 한 번 이미지가 실제로 표시될 수 있도록 올바른 경로를 입력했는지 확인하세요.

자동 재생 속성을 사용할 때는 주의가 필요합니다. 이 속성은 동영상이 사용 가능한 즉시 자동으로 재생되도록 지정합니다.

<video src="video.ogv" width="300" height="200" autoplay> 안타깝게도 브라우저가 HTML5와 호환되지 않습니다 </video>

사전 로드 속성은 트래픽 측면에서 흥미로울 수 있습니다. 이 속성은 미리 로드 동작을 제어하기 때문입니다. 이 속성은 다음과 같은 값을 가질 수 있습니다:

- auto - 브라우저가 전체 파일을 미리 로드할 수 있습니다.

- none - 파일을 미리 로드할 필요가 없습니다.

- 메타데이터 - 파일을 미리 로드할 수 있습니다.

미리 로드 속성이 누락된 경우 브라우저의 기본 설정이 적용됩니다.

동영상 및 코덱

웹사이트에 동영상을 삽입하고 재생하는 일을 하는 사람이라면 누구나 조만간 다양한 코덱 문제에 직면하게 될 것입니다. 이러한 코덱 덕분에 동영상을 효율적으로 압축 및 압축 해제할 수 있습니다. 문제는 브라우저 제조업체들이 아직 공통 코덱 형식에 합의하지 못했다는 것입니다. HTML5의 경우(궁극적으로 여러분도 마찬가지입니다), 이는 동영상과 오디오 파일에 대한 표준화된 코덱이 없다는 것을 의미합니다.

동영상의 경우 현재 Ogg와 MP4 두 가지 포맷이 확립되어 있습니다. 따라서 이 두 가지 형식으로 동영상을 제공하면 항상 안전한 편에 서게 됩니다. 이렇게 하려면 비디오 요소에 두 개의 소스 요소를 할당합니다.

<비디오 너비="400" 높이="300" 컨트롤="컨트롤"> <소스 src="video.mp4" 유형="video/mp4" /> <소스 src="video.ogg" 유형="video/ogg" /> </video>

여기서는 비디오 요소 내에 비디오 소스를 지정하지 않습니다. 대신 디스플레이에 대한 일반적인 정보만 제공됩니다. 표시할 비디오는 소스 요소를 통해 결정됩니다. 해당 비디오는 src 속성에 할당됩니다. 유형 뒤에는 비디오 유형과 비디오를 사용할 수 있는 형식이 이어집니다.

여러 소스 요소가 지정된 경우 브라우저는 항상 "적합한" 첫 번째 동영상을 재생합니다. 이 "적합"의 의미는 아래에 설명되어 있습니다.

하지만 실제로 어떤 브라우저가 어떤 형식을 지원할까요? 다음 표는 이 질문에 대한 답을 제공합니다.

이 표는 형식에 대한 해석이 개별 브라우저 간에 거의 동일하게 분산되어 있다는 딜레마를 명확하게 보여줍니다. 따라서 두 가지 형식의 동영상을 모두 지정할 수밖에 없습니다.

소스 요소에만 할당할 수 있는 미디어 속성은 동영상이 적합한 미디어 유형을 명시적으로 지정하는 데 사용할 수 있습니다. 특정 최종 디바이스용 동영상을 지정하려면 미디어 속성을 src에 할당해야 합니다. 이 미디어 속성은 원하는 미디어 유형을 지정하는 데 사용됩니다.

소스 요소에 적용할 수 있는 예시는 다음과 같습니다.

<비디오 너비="400" 높이="300"> <!-- 모바일 디바이스 전용 --> <소스 src="video_mobil.ogg" 미디어="핸드헬드" /> <!-- 기타 모든 디바이스 --> <소스 src="video_normal.ogg" 미디어="모두" /> </video>

여기서 미디어 속성은 모바일 디바이스인지 여부를 확인하는 데 사용됩니다. 이 경우 동영상이 더 작은 크기로 재생됩니다. 다른 디바이스인 경우 모두 값이 사용됩니다.

안전한 동영상 통합

HTML5가 아직 모든 브라우저에서 지원되지 않는다는 것은 잘 알려져 있습니다. 물론 이는 비디오 요소에도 적용됩니다. 한 가지 해결책은 다양한 임베딩 기술을 결합하는 것입니다. 여기에는 익숙한 객체와 임베드 요소를 동영상과 결합하는 것이 포함됩니다. 예를 들면 다음과 같습니다:

<비디오 너비="640" 높이="360" src="http://www.youtube.com/v/mR5h_EXYKA0?fs" 자동 버퍼 컨트롤 포스터="br.gif"> <object classid="clsid:02bf25d5-8c17-4b23-bc80-d3488abddc6b" width="640" 높이="360" codebase="http://www.apple.com/qtactivex/qtplugin.cab" /> <param value="http://www.youtube.com/v/mR5h_EXYKA0?fs" /> <param value="true" /> <param value="false" /> <embed src="http://www.youtube.com/v/mR5h_EXYKA0?fs" width="640" height="360" autoplay="true" controller="false" pluginspage="http://www.apple.com/quicktime/download/"> </embed> </object> </video>

이렇게 임베드된 동영상은 대부분의 브라우저에서 재생할 수 있습니다. 동영상 요소를 인식하는 브라우저는 해당 요소에 액세스할 수 있습니다. 그러나 다른 브라우저는 객체 또는 임베드 요소의 정보를 사용합니다.