그의 블로그 중 첫 번째 PC 프로 , 웹 개발자 이안 데블린 HTML5를 사용하여 웹 사이트에 비디오를 삽입하는 방법을 보여줍니다.
GPU가 죽어 가는지 확인하는 방법
아마도 HTML5의 가장 크고 가장 많이 언급되는 기능은 임베디드 비디오입니다. 현재 웹 사이트에 비디오 콘텐츠를 추가하는 유일한 방법은 Flash, QuickTime 또는 RealPlayer와 같은 타사 플러그인을 사용하는 것입니다. HTML5와 비디오 요소의 등장으로 비디오 지원이 웹 브라우저에 의해 처리됨에 따라 모든 제 3 자 지원이 필요하지 않게 될 것입니다.
이미 여러 웹 브라우저에서 HTML5를 지원합니다. 여기에서는 플러그인이없는 동영상을 사이트에 삽입하는 방법과 직면하게 될 문제를 설명합니다.
파일 유형 및 브라우저 호환성
먼저 HTML5에서 지원되는 다양한 동영상 파일 유형을 간략하게 살펴 보겠습니다. Theora OGG 및 H.264 (.mp4)입니다. 다른 브라우저는 다른 유형을 지원하고 일부는 전혀 지원하지 않습니다. 다음 표는이를 나타냅니다.
| 테오 라 OGG | H.264 (mp4) | |
|---|---|---|
| Firefox 3.5 이상 | ✓ | 엑스 |
| Chrome 3 이상 | ✓ | ✓ |
| Safari 3 이상 | 엑스 | ✓ |
| Opera 10.5 이상 | ✓ | 엑스 |
| Internet Explorer 8 | 엑스 | 엑스 |
| Internet Explorer 9 | 엑스 | ✓ |
| 아이폰 | 엑스 | ✓ |
| 기계적 인조 인간 | 엑스 | ✓ |
코덱 및 기타 기술 문제
HTML5 자체는 사용할 동영상 코덱을 지정하지 않으며 이로 인해 웹에 가장 적합한 . 따라서 모든 브라우저를 다루려면 두 코덱을 모두 지원해야합니다.
그리고 물론 Internet Explorer도 있습니다. 현재 출시 된 Internet Explorer 버전은 동영상 요소를 지원하지 않으며 동영상을 재생하려면 플러그인이 여전히 필요합니다. 이는 Internet Explorer 9 (내년 초) 출시와 함께 변경 될 것이며 H.264가 다른 많은 HTML5 기능과 함께 지원 될 것입니다.
방법이 궁금한 경우 비디오 파일을 OGG로 변환 할 수 있습니다 (Theora OGG 유형에 대한 자세한 내용은 TheoraCookbook ) 파일을 사용하여 Miro 비디오 컨버터 .
비디오 요소 및 코덱에 대한 자세한 정보를 보려면 html5 : 웹 비디오 마크 필그림.
HTML5 코드
이제 실제 HTML5 코드와 어떻게 작동하는지 살펴 보겠습니다. HTML5는 웹 페이지에 비디오를 추가하는 데 사용할 수있는 두 가지 새로운 요소를 제공합니다. 이미 언급 한 요소와 요소. 이들 각각을 차례로 살펴 보겠습니다.
요소
video 요소는 다음 속성을 가질 수 있습니다.
| 속성 | 기술 |
|---|---|
| src | 비디오 파일 자체에 대한 유효한 URL |
| 자동 재생 | 동영상이 자동으로 재생되어야하는지 여부를 나타내는 부울 |
| 통제 수단 | 기본 미디어 컨트롤이 브라우저에 표시되어야 함을 나타내는 부울 |
| 고리 | 동영상을 반복 재생해야하는지 여부를 나타내는 부울 |
| 예압 | 동영상 자체의 사전 다운로드가 필요한지 아니면 메타 데이터 만 필요한지 여부를 브라우저에 알립니다. 가능한 값은 다음과 같습니다.
|
| 포스터 | 비디오 데이터를 사용할 수 없을 때 표시 할 이미지 파일의 URL |
| 폭 | 비디오의 너비 (CSS 픽셀) |
| 신장 | 비디오의 높이 (CSS 픽셀) |
이를 통해 video 요소 만 사용하여 OGG 비디오를 웹 사이트에 삽입하는 것이 얼마나 쉬운 지 알 수 있습니다.
그게 전부입니다.
Theora OGG 형식을 지원하는 모든 브라우저는 이제 더 이상 고민하지 않고 비디오를 성공적으로 표시하고 재생해야합니다. 물론 그렇게 쉽지는 않습니다. 위 표에서 살펴본 것처럼 코드는 Firefox, Chrome 및 Opera에서만 작동합니다. 따라서 H.264 로의 폴 백도 필요합니다. 를 사용하여이 작업을 수행 할 수 있습니다. 요소,이를 통해 비디오 요소에 대한 여러 미디어 소스를 정의 할 수 있습니다.
venmo에서 누군가를 차단 해제하는 방법
요소
소스 요소에는 다음 속성이 있습니다.
| 속성 | 기술 |
|---|---|
| src | 미디어 (이 경우 비디오) 파일 자체에 대한 유효한 URL |
| 유형 | 미디어 파일의 유형은 MIME 유형 예 : type='video/ogg' Theora OGG 비디오임을 나타내며 브라우저가 type='video/ogg; codecs='theora, vorbis'를 사용하여 비디오 재생 방법을 결정하는 데 도움이되는 MIME 코덱을 제공 할 수도 있습니다. |
| 절반 | 미디어 리소스의 의도 한 미디어 유형을 제공하며 유효한 미디어 여야합니다. 미디어 쿼리 예 : media='handheld' 비디오가 휴대용 장치 또는 media='all and (min-device-height:720px)'에 적합 함을 나타냅니다. 이는 동영상이 720 픽셀 이상의 화면에 적합 함을 나타냅니다. |
참고 : 소스 요소는 void이고 시작 태그는 있지만 닫는 태그는 없습니다.
소스 요소에 대한 가장 유용한 점은이를 사용하여 다양한 파일 유형을 스택하여 브라우저가 재생할 수있는 파일을 찾을 때까지 차례로 시도 할 수 있다는 것입니다.
함께 사용
비디오 요소 내에서 다양한 유형의 비디오를 스택하기 위해 다음과 같이 코드를 입력합니다.
Your browser does not support the video element.
위 코드는 이제 Internet Explorer를 제외한 모든 브라우저에서 작동하며 위에 표시된 메시지가 표시됩니다.
Theora OGG 및 MP4 형식의 나비 샘플 비디오가 포함 된 HTML5 테스트 비디오 페이지를보고 직접 테스트 할 수 있습니다. 따라서 Firefox, Chrome, Safari, Opera 또는 iPhone 또는 Android 핸드셋을 볼 수 있어야합니다.
당신들 사이에 날카로운 칼은 이제 우리 가이 스택을 이용할 수 있고 다음 코드를 사용 하여이 비디오 메시지를 볼 수 없음을 표시하는 대신 하단에 Flash (또는 다른 플러그인)로 대체 할 수 있음을 알 수 있습니다. :
data='flvplayer.swf?file=myVideo.flv&autoStart=true'>
'
결론
대부분의 HTML5 요소와 마찬가지로 소스 및 비디오 요소에 대한 브라우저 지원은 현재 패치가 적용됩니다. 또한 소스 요소가 웹 사이트에 동영상 콘텐츠를 추가하는 가장 인기있는 방법 인 Flash 사용을 중단할지 여부에 대한 큰 논쟁이 현재 진행되고 있습니다. Flash가 완전히 죽을지는 모르겠지만 그래도 계속해서 웹 개발자에게 비디오를 포함하는 더 깨끗하고 쉬운 접근 방식을 제공 할 것이라고 말하는 것이 타당하다고 생각합니다.
