HTML에 대한 H.264/FLV 모범 사례

Question

약 700 개의 참조 비디오가 포함 된 웹 사이트를 운영합니다 (아뇨, 포르노가 아닙니다 .--)).

동영상은 현재 FLV 형식입니다. JWPlayer를 사용하여 해당 비디오를 렌더링합니다. 호스팅 된 IIS6. 모든 것이 잘 작동합니다.

내가 알고 있듯이 H.264 (FLV가 아니고 OGG가 아님)는 새로운 인기있는 HTML5 비디오 표준입니다. 오늘날 iPad는 실제로 H.264 또는 YouTube만을 존중합니다. 아마도 더 많은 브라우저가 곧 HTML5 태그만을 존중하고 애플을 리드하게 될 것입니다.

OK, 기존 비디오를 적절한 H.264 형식으로 변환하는 방법을 알 수 있다고 생각합니다. ffmpeg.exe를 포함하여 다양한 도구를 사용할 수 있습니다. 아직 시도하지는 않았지만 코덱 설정을 고려한 후 문제가 될 것이라고 생각하지 않습니다.

제 질문은 컨테이너 자체에 대한 것입니다. 즉, 모든 사용자에게에 대한 적절한 전환을 계획하고 있습니다. 이 동영상을 렌더링 할 때 권장되는 권장 사항은 무엇입니까? HTML5 태그 만 사용하는 경우 HTML5를 지원하지 않는 브라우저에서 동영상을 볼 수 없습니다. JW 플레이어 나 다른 플레이어를 통해 플래시 형식으로 렌더링하면 iPad에서 재생할 수 없습니다. 무엇을 렌더링할지 결정하기 위해 여기서 추악한 UserAgent 검색을 수행해야합니까?

JWPlayer는 H.264 미디어를 지원하지만 플레이어 자체는 플래시 구성 요소가 아니므로 iPad에서 재생할 수없는 것으로 알고 있습니다. 미안하지만 분명하지는 않지만 현재의 브라우저, iPad 및 곧 출시 될 HTML5 웨이브에서 작동 할 수있는 적절한 전환 계획을 세우고 있습니다. 저는 비디오 전문가가 아니므로 조언을 해주시면 감사하겠습니다.

Answer 1

Firefox는 비디오 태그가있는 H.264를 지원하지 않으므로 올바른 폴백을 원한다면 비디오 태그를 아래처럼 렌더링하고 OGG 버전의 비디오가 있어야합니다.

 <video controls id="video" width="320" height="240" preload autobuffer > 
      <source src="http://mycdn.com/videos/vid1.ogg" type="video/ogg" /> 
      <source src="http://mycdn.com/videos/vid1.mp4" type="video/mp4" /> 
      <!--RENDERED ON BROWSERS WITH NO HTML5 VIDEO SUPPORT--> 
      <object width="320" height="240"> 
      <param name="movie" value="myplayer.swf"> 
      <embed src="myplayer.swf" width="550" height="400"> 
      </embed> 
      </object> 
      <!----> 
     </video> 

Answer 2

나는이 대답하거나 의견이 있는지 확실하지 않습니다,하지만 난 정말 원래의 질문의 가정 일에 도전해야합니다 "아마도 곧 더 많은 중요한 브라우저는 애플의 리드를 따라합니다 HTML5 태그 만 존중하십시오. "

이것은 내가 볼 수있는 어떤 것도 백업되지 않았습니다.

1. 모든 데스크톱 브라우저는 Flash를 포함한 플러그인을 지원합니다. 대부분의 비 Apple 스마트 폰/태블릿에서는 플래시를 지원하고 임의의 플러그인을 지원하며 대체 브라우저를 지원합니다.
2. 모든 브라우저는 아이폰 OS조차도 객체 태그를 지원하고 적어도 그것으로 무언가를하려고 시도합니다. 그들은 심지어 천막과 글꼴 태그와 같은 것들을 지원합니다! 객체 태그는 오랫동안 오래있을 것입니다. 그리고 HTML5의 일부조차도 알고 있습니다.
3. 다양한 IE 버전 이후의 Firefox (아마도 # 2 브라우저)는 현재 H.264를 지원하지 않습니다.
4. Microsoft는 Flash를 싫어하고 Silverlight를 사용하여 개체 태그가 남아 있다는 느낌을 받도록 선호했습니다. 그들은 IE9에서만 기본 HTML5 비디오 태그를 지원하기 위해 막연하게 헌신했습니다. 그 사이에, 그들은 비스타와 Win7에 운영 체제의 일부로 플래시 플러그인을 제공합니다.

어쨌든, 질문의 진짜 고기를 얻으려면 : "내 질문은 컨테이너 자체에 대한 것입니다. 즉, 모든 사용자를위한 우아한 전환을 계획하는 것입니다.이 비디오를 렌더링 할 때 최선의 권장 사항은 무엇입니까? "

HTML5 비디오 태그는 여러 소스의 이름 지정을 지원하므로 기본 H.264 비디오를 '기본'으로 설정하고 Flash Player를 '대체'로 지정할 수 있습니다 브라우저가 바로 H.264 비디오 스트림에 대한 지원이없는 경우 사용

<video> 
<source src="../videos/primary.mp4" type="video/mp4" /> 
<object> 
    <param name="movie" value="fallbackplayer.swf"> 
    <embed src="../videos/fallbackplayer.swf"> 
    </embed> 
</object> 
</video> 

Answer 3

비디오 코덱에 대한 각각의 브라우저에서 지원은 다음과 같이된다.

• 파이어 폭스 : 오그 테오 라 (Theora)/보비스
• 오페라 : 오그 테오 라 (Theora)/보비스
• 크롬 : 오그 테오 라 (Theora)/보비스 및 H.264
• 사파리 :
• IE9 H.264 (설치 XiphQT 구성 요소와 오그 테오 라 (Theora)/보비스) : H.264

I Ogg Theora 대안도 추천하는 것이 좋습니다. 디스크 공간에 대해 염려가 있는지는 잘 모르겠지만 특허 로열티와 특허 트롤에 대한 두려움 덕분에 우리가 처한 상황입니다.

Answer 4

직접 질문에 답변하지 않지만 doom9.org에는 비디오 변환/처리에 대한 훌륭한 자습서가 있습니다. 유용 할 수 있습니다.

Answer 5

좋은 크로스 브라우저 구현을 위해 video for everybody을 제안하십시오. H.264 for Flash 폴백을 사용할 수도 있지만 Lachlan은 완전한 크로스 브라우저 호환성을 위해 Ogg로 렌더링해야한다고 말합니다.

Answer 6

Chrome은 실제로 h264 지원을 위해 플러그를 뽑아 본 적이 없으므로 Firefox는 파일 형식을 계속 유지하고 형식을 더 잘 지원할 계획입니다.

https://developer.mozilla.org/en-US/docs/HTML/Supported_media_formats (페이지 내리막 길의 약 1/3)