HTML5 비디오 디자이너가 알아야 할 10 가지

HTML5 혁명은 전 세계 모든 지역의 흥미로운 웹 디자이너입니다. 새로운 사양은 시맨틱 웹 사이트 구축을위한 수십 가지 요소와 속성을 지원합니다. 이러한 새로운 기능에는 오디오 및 비디오 형식 용 멀티미디어 태그.

지난 몇 년 동안 플래시 기반 미디어 플레이어는 웹 스트리밍과이 기술을 충분히 활용하여 레거시 브라우저를 지원해야했습니다. 그러나 고맙게도 현대 표준이 발전했으며 HTML5 비디오가 포함되어 수십 가지 새로운 기회가 열렸습니다..

이 가이드에서는 웹용 HTML5 비디오에 대해 소개하고자합니다. 네이티브 인 브라우저 플레이어와 모든 기능을 이해하는 데는 약간의 연습이 필요합니다. 그리고 친숙 해지는 가장 좋은 방법은 먼저 머리 속에서 다이빙하는 것입니다.!

1. 미디어의 종류

플래시 비디오 플레이어로 작업 할 때 모든 비디오 형식을 .flv로 연결하는 것은 너무 일반적입니다. 이 방법이 효과가 있지만 대부분의 flv 파일은 고급 파일 형식 / 코덱 근처에서 품질을 유지할 수 없습니다. HTML5에서 지원하는 중요한 동영상 유형은 MP4, WebM 및 Ogg / Ogv입니다. MPEG-4 파일 유형은 일반적으로 타사 Flash Player에서 재생할 수있는 H.264로 인코딩됩니다. 즉, 대체 방법을 지원하기 위해 .flv 비디오 복사본을 보관할 필요가 없습니다. WebM과 Ogg는 HTML5 비디오와 관련된 두 가지 훨씬 새로운 파일 유형입니다. Ogg는 오픈 소스 표준 오디오 파일 형식을 기반으로 한 Theora 인코딩을 사용합니다. .ogg 또는 .ogv 확장명으로 저장할 수 있습니다..

WebM은 Google이 제출 한 프로젝트로, WebM Project 웹 사이트에서 자세한 내용을 볼 수 있습니다. 형식은 Opera, Chrome, Firefox 4 이상 및 가장 최근의 Internet Explorer 9에서 이미 지원됩니다. 대부분의 웹 전문가는 아직 알 수 없지만 WebM은 향후 웹 비디오의 주요 비디오 미디어 형식입니다.

2. 브라우저 지원

그렇다면 이러한 파일 형식 중 웹 사이트에 필요한 파일 형식은 무엇입니까? 세 가지 모두가 전체 지원 스펙트럼을 제공하는 것처럼 이상적입니다. 그러나 이것은 현실적이지 않으며, 실제로, 당신은 그것들 중의 단지 2 개로 모든 기지를 감쌀 수 있습니다. 다음은 각 브라우저에서 사용할 수있는 기능에 대한 설명입니다.

• Mozilla Firefox - WebM, Ogg
• Google 크롬 - Ogg의 WebM
• Opera - WebM, Ogg
• 사파리 - MP4
• Internet Explorer 9 - MP4
• Internet Explorer 6-8 - HTML5 없음, 플래시 만!

기억한다면 이전에 대부분의 플래시 비디오 플레이어는 H.264로 인코딩 된 한 MP4 파일을 지원할 것이라고 언급했습니다. 따라서 이러한 각 브라우저는 MP4 + Flash를 최종 수단으로 포함시킵니다. 즉, 생성하기 만하면됩니다. 두 모든 브라우저를 지원하는 다양한 비디오 형식. Safari / IE9 용 MP4 및 WebM 또는 Ogg 중 선택.

필자는 WebM 형식을 고수하는 것이 좋습니다. 그것은 프로젝트 (즉, 구글)의 뒷부분에 큰 이름을 가지며 HTML5 커뮤니티에서 많은 주목을 받았다. Ogg / Ogv는 지원 될 것이지만 WebM의 더 작은 파일 크기로 인기를 잃을 가능성이 큽니다. Sean Golliher가 쓴 웹에서 미래의 비디오에 관한 관련 기사를 읽을 수 있습니다..

3. 간단한 HTML5 동영상 퍼가기

이제 샘플 코드를 임베드하는 데 필요한 구문을 살펴 보겠습니다. 필요한 각 영화 URL을 참조하는 HTML5 동영상 태그 만 있으면됩니다..

공지 사항 통제 수단 과 자동 재생 속성은 어떤 값으로도 설정할 필요가 없습니다. 나는 또한 a를 포함했다. 포스터 스트리밍 전에 동영상 플레이어에 이미지를 미리로드하는 속성 많은 웹 플레이어와 함께하는 일반적인 미리보기입니다..

YouTube는 동영상 요소 내부에 MP4 및 WebM 형식을 모두 제공합니다. 이들 중 어느 것도로드 할 수없는 경우 사용자가 브라우저를 업데이트 할 때 오류가 표시됩니다..

4. 플래시 폴백 제공

위의 예는 모든 표준 호환 웹 브라우저에 적합합니다. 그러나 우리는 또한 세계가 항상 최첨단 기술이 아니라고 생각할 필요가 있습니다. Safari, Mozilla Firefox 및 특히 Internet Explorer의 이전 버전에서 사용자를 지원해야합니다..

이를 달성하는 가장 좋은 방법은 플래시 폴백 플레이어를 이용하는 것입니다. 이것들은 깊숙이 박다 또는 목적 태그를 사용하여 타사 .swf 파일을 참조하십시오. JW Player와 Flowplayer는 두 가지 무료 오픈 소스 솔루션입니다. ActiveDen의 프리미엄 비디오 플레이어를 확인해보십시오. $ 15 ~ $ 20 정도의 저렴한 가격으로 구입할 수 있습니다..

이제 거의 모든 브라우저를 지원할 대체 Flash Player를 포함하도록 위의 코드를 조정 해 보겠습니다..

5. 모바일 장치 지원

이 주제는 모바일 업계가 아직 젊기 때문에 여전히 논쟁의 여지가 있습니다. Apple은 Mac 및 iOS 장비에서 MP4를 지원했습니다. 즉, 표준 비디오 UI에서 iPad, iPhone 또는 iPod Touch로 .mp4 비디오 파일을 기본적으로 스트리밍 할 수 있습니다. 이것은 많은 시장 점유율을 포함합니다..

최근 Android 기기는 이와 동일한 수준의 지원을 받기가 어려웠습니다. 그러나 Google은 마침내 거의 모든 모바일 사용자를 활용하는 .mp4 웹 스트리밍을 채택했습니다. 그리고 Flash가 옵션이 아니기 때문에 MP4가 최상의 솔루션입니다. 이것이 iOS 기기가 즉시 파일을 인식 할 수 있도록 .mp4 코드를 먼저 삽입하려는 이유입니다.

6. Safari 사용자 에이전트

언급해야 할 버그 중 하나는 Flash Player와 Safari의 네이티브 HTML5 .mp4 스트리밍 사이에 존재하는 버그입니다. 브라우저가 두 파일을 모두 지원할 수 있으므로 Flash 대신 HTML5 비디오 스트림을 가져 오는 데 어려움을 겪을 수 있습니다. TUAW의 위대한 블로그 게시물 덕분에 탐색 사용자 에이전트를 쉽게 변경할 수 있습니다..

이렇게하면 웹 페이지가 브라우저를 다른 장치에서 실행중인 것으로 인식하게됩니다. 대부분의 경우 플래시 재생을 지원하지 않는 iPad를 선택하게됩니다. 이것은 MP4 기본 및 플래시 재생 방법을 테스트 할 때 실행할 수있는 유일한 주요 문제입니다.

7. 플레이어 컨트롤 관리

믿거 나 말거나, HTML5 비디오 플레이어 컨트롤을 조작하는 데 사용할 수있는 메서드가 있습니다. 자바 스크립트에서는 열린 메소드 세트를 사용하여 모든 작업을 수행 할 수 있습니다. 여기에 나열 할 수있는 방법이 너무 많지만 자세한 내용은 W3C 미디어 요소 문서를 살펴 보려고합니다..

Opera 개발자 블로그는 초보자에게 유용한 몇 가지 간단한 자습서를 게시했습니다. 이전에 JavaScript 나 jQuery를 사용 해보지 못했지만이 도구로 계속 실행하는 것은 여전히 ​​간단합니다. 다음과 같은 비디오 미디어의 특정 속성을 호출 할 수 있습니다. 음소거 된 또는 현재 시간. 그런 다음 jQuery에서 DOM을 조작하여 이러한 기준에 따라 작업을 수행 할 수 있습니다 (배경 흐리게 표시, 광고 표시)..

오페라 기사의 동일한 개발자가 스크립트 된 비디오 플레이어의 데모를 제공합니다. 자신 만의 UI 컨트롤을 사용자 정의 할 수있는 기회가 있습니다. HTML5 동영상이 얼마나 강력한지를 보여주는 것입니다..

8. 비디오 포맷 변환

이는 기술에 익숙하지 않은 개인을 혼란에 빠뜨릴 수있는 또 다른 큰 문제입니다. 웹 사이트를 만들고 스트리밍하기 만하면 비디오를 변환해야합니까? 사실 모든 것이 그렇게 어렵지는 않습니다..

가장 중요한 우선 순위 인 MP4를 처리하려면 3 대 OS 모두에서 실행되는 무료 오픈 소스 솔루션 인 HandBrake를 사용할 수 있습니다. H.264와 함께 몇 가지 다른 코덱을 지원하므로 공짜 사용자를위한 최고의 옵션입니다. 당신이 돈을 가지고 있다면, 맥 앱 스토어에 Xilisoft converter를 권유해야합니다..

WebM 경로가 삶을 훨씬 쉽게 만들어주는 것처럼 보입니다. Miro Video Converter는 훌륭한 품질의 WebM 파일을 생성하는 Windows 및 OS X 용 무료 도구입니다. 또한 꽤 훌륭한 품질로 나온 Ogg Theora 인코딩도 할 수 있습니다..

9. 웹 플레이어 만들기

HTML5 사양의 비디오 형식은 개발자에게 아직 익숙하지 않습니다. 사용자 정의 컨트롤, 슬라이더, 재생 / 일시 중지 아이콘 등을 허용하기 위해 대기중인 공개 프로토콜이 있습니다. 대담한 느낌이 들면 자체 HTML5 플레이어를 만드는 방법에 대한 자습서 (Splashnology에 게시 됨).

이 코드는 고급 CSS 타겟팅과 약간의 공식 jQuery가 필요하기 때문에 초보자에게는 조금 과격한 것입니다. 이미 사용자 정의 된 플레이어 디자인을 제공 할 수있는 다른 프레임 워크가 있습니다. 마찬가지로이 슬라이드 쇼 프리젠 테이션은 HTML5 동영상 플레이어 제작에 대한 훌륭한 소개입니다..

HTML5 동영상 플레이어 만들기

10. VideoJS 라이브러리

VideoJS는 HTML5 비디오 플레이어에서 가장 좋아하는 솔루션 일 것입니다. 필요한 것은 문서에 어딘가에 포함 된 자체 호스팅 JavaScript 및 CSS 스타일 시트뿐입니다. 그런 다음 표준 HTML5 비디오 코드에 스키닝을위한 몇 가지 추가 클래스를 작성합니다. 아래에 샘플 코드를 추가했습니다.

WordPress 블로그를 실행하면 사용자 정의 WP 플러그인을 사용해 볼 수도 있습니다. HTML5 동영상을 표시하는 페이지에 자동으로 라이브러리 js / css가 포함됩니다. 그리고 단축키를 사용하여 모든 포스트 또는 페이지 편집기에서이 작업을 수행 할 수 있습니다 (여기 참조).

결론

이 입문 가이드가 웹 비디오의 미래에 대한 관심을 불러 일으킬 수 있기를 바랍니다. 더 많은 사용자가 모바일로 전환하면 HTML5 표준이 이러한 유형의 미디어에 채택되는 것이 중요합니다. 개발자가 완전히 지원되는 솔루션을 훨씬 빨리 제작할 수 있도록 웹을보다 단순하게 만들어야합니다. HTML5 동영상의 미래에 대한 아이디어와 제안을 듣고 싶습니다. 공유하려는 경우 아래의 게시판 토론 영역에 의견을 남겨 주시기 바랍니다..