Wulin.com의 기사 소개 (www.vevb.com) : HTML 5 비디오 개요.
1 비디오 소개
내 번역 된 문서의 소개 텍스트를 인용하여 "HTML5 페이지에 오디오 및 비디오가 포함됩니다": 오늘, 웹 페이지에 비디오를 포함시키고 브라우저 나 운영 체제에 관계없이 모든 사용자를 보는 유일한 방법은 플래시를 사용하는 것입니다. 이를 위해서는 Adobe Flash 플러그인이 필요하며 <botort> 및 <embed> 태그를 결합합니다.
대부분의 사용자는 이미 플래시 플러그인이 설치되어 있지만 (실제로 인터넷 사용자의 약 95%가 특정 버전의 플래시를 가지고 있음) HTML 5 지지자는 플러그인이 필요하지 않은 열린 비디오 표준을 추진하고 있습니다. 이것은 HTML 5의 새로운 태그 <video>에 가져온 아이디어로, 플래시와 같은 개인 플러그인없이 비디오를 포함시키고 상호 작용하는 방법을 제공합니다.
불행히도, 비디오는 그렇게 간단하지 않습니다. 브라우저는 <video> 태그를 이해해야 할뿐만 아니라 비디오를 재생하는 데 필요한 인코딩 및 디코더도 이해해야합니다. 명백한 솔루션은 HTML 5 사양의 제작자가 비디오 코덱을 선택하고 모든 브라우저 제조업체가 실행하도록하는 것입니다.
어쨌든, 그것이 당신이 추천하는 것입니다. 동시에, 이것은 또한 혼란을 일으키는 퓨즈입니다. 다양한 코덱에 대한 논쟁은 이미 매우 성가 시지만, 더 비극적 인 것은 브라우저 제조업체가 통일 된 목적에 도달 할 수 없다는 것입니다. Apple은 제안 된 OGG Theora Codec을 사용하는 것을 꺼려하지만 Opera와 Mozilla는 브라우저가 H.264 코덱을로드하여 라이센스 비용을 지불하지 않으려 고합니다. Google은 두 가지를 모두 지원하며 Microsoft는 HTML 5 비디오 요소를 전혀 지원할 계획이 없기 때문에 토론에 훨씬 뒤쳐져 있습니다.
브라우저 제조업체의 교착 상태에 직면 한 HTML 5 유명한 독재자 인 이안 믹슨 (Ian Hickson)은 손을 흔들어 빌어 먹었다. 따라서 HTML 5 사양에는 특별히 명명 된 비디오 인코딩 코덱이 없습니다. 좋아요, 여기에 인용하십시오.
상황은 Microsoft가 마침내 갇혀 있지만 비극적으로 IE 9의 H.264 만 지원하는 것입니다. 동시에 Google은 마침내 I/O 회의에서 오픈 소스 비디오 캡슐화 형식 웹 및 비디오 인코딩 형식 VP8을 출시했습니다. Opera, Mozilla 및 Chrome은 VP8을 완전히 지원할 것이라고 발표했으며 IE는 일부 지원이 필요하다고 발표했습니다 (플러그인이 필요하지만 정확하게 기억한다면 HTML5의 비전 중 하나는 브라우저 플러그인을 떠나는 것입니다.
애플은 VP8을 지원하지 않기로 결정했다. Jobs는 VP8이 품질 또는 효율성 측면에서 H.264만큼 좋지 않으며 제품의 요구 사항을 충족시킬 수 없다고 생각합니다. 또한, 최신 뉴스는 VP8에 특허 문제가 포함될 수 있음을 보여줍니다 (특허가 실제로 침해되는 경우 Opera와 Firefox는 즉시 VP8을 무시할 것입니다).
결국, 페이지에서 <video> 태그를 사용하려면 너무 많이 말하면, 세 가지 상황을 고려해야합니다. OGG Theora 또는 VP8 (이 일에 아무런 일이 발생하지 않는 경우) (오페라, 모질라, 크롬), H.264 (Safari, IE 9, Chrome), 지원하지 않는 것 (IE6, 7, 8).
자, 이제 <video> 태그, 비디오 객체가 사용할 수있는 미디어 속성 및 방법 및 미디어 이벤트 사용을 포함하여 기술 수준에서 HTML 5 비디오를 이해해 봅시다.
2 비디오 태그 사용
비디오 태그에는 SRC, 포스터, 예압, 자동 재생, 루프, 컨트롤, 너비, 높이 등과 같은 여러 속성이 포함되어 있으며 내부적으로 사용되는 태그 <source>가 포함되어 있습니다.
<source> 태그 외에도 비디오 태그에는 지정된 비디오를 재생할 수없는 경우 반환 된 컨텐츠도 포함 할 수 있습니다.
2.1 SRC 속성 및 포스터 속성
SRC 속성이 무엇에 사용되는지 상상할 수 있습니까? <Img> 태그와 마찬가지로이 속성은 비디오의 주소를 지정하는 데 사용됩니다.
포스터 속성은 현재 비디오 데이터가 유효하지 않은 경우 그림을 지정하고 표시하는 데 사용됩니다 (미리보기 이미지). 잘못된 비디오 데이터는 비디오가로드되고 있기 때문에 비디오 주소가 잘못 되었기 때문일 수 있습니다.
2.2 예압 속성
이 속성은 이름으로 사용될 수 있으며, 비디오가 사전로드되어 있는지 정의하는 데 사용됩니다. 속성에는 없음, 메타 데이터 및 자동으로 세 가지 선택적 값이 있습니다. 이 속성을 사용하지 않으면 기본값은 자동입니다.
없음 : 예압 없음. 이 속성 값을 사용하면 페이지 제조업체가 사용자 가이 비디오를 기대하지 않거나 HTTP 요청을 줄이지 않는다고 생각합니다.
메타 데이터 : 부분적으로 사전로드. 이 속성 값을 사용한다는 것은 페이지 제조업체가 사용자 가이 비디오를 기대하지는 않지만 일부 메타 데이터 (크기, 첫 프레임, 트랙 목록, 지속 시간 등)를 사용자에게 제공한다는 것을 의미합니다.
자동 : 모두 사전로드.
2.3 자동 재생 속성
이름에 따라 사용을 아는 또 다른 속성. AutoPLay 속성은 비디오가 자동으로 재생되는지 여부를 설정하고 부울 속성인지를 설정하는 데 사용됩니다. 나타나면 자동 재생을 의미하며 제거한다는 것은 자동으로 재생되지 않음을 의미합니다.
HTML에서 부울 속성의 값은 true 및 false가 아닙니다. 올바른 사용법은이 속성을 사용하여 태그에서 true를 나타내는 것입니다. 현재 속성은 값이 없거나 그 값이 항상 이름과 동일합니다 (여기서 자동 재생은 <video autoplay /> 또는 <video autoplay = autoplay />입니다); 이 속성은 태그에서 False를 나타내는 데 사용되지 않지만 (여기서 자동 재생은 <video />입니다).
2.4 루프 속성
루프 속성이 비디오가 루프가 재생되는지 여부를 지정하는 데 사용되며 부울 속성이기도합니다.
2.5 컨트롤 속성
컨트롤 속성은 페이지 메이커가 스크립트를 사용하여 재생 컨트롤러를 생성하지 않음을 브라우저에 표시하는 데 사용되며 브라우저는 브라우저가 자체 재생 제어 막대를 활성화해야합니다.
제어 막대에는 재생 일시 정지 제어, 재생 진행 진행 제어, 볼륨 제어 등이 포함되어야합니다.