Question

저는 HTML5 비디오 태그를 가지고 놀았으며 코덱을 지원할 수 없을 때 성능을 저하시키는 가장 좋은 방법에 대해 혼란 스럽습니다. 모든이의 비디오 태그를 지원하지 않는 오래된 브라우저 (또는 IE)에 대한

은 매우 정직 :

<video width="320" height="240"> 
    <source src="vid.ogv" type='video/ogg'> 
    <source src="vid.mp4" type='video/mp4'> 
    <object> 
    <!-- Embed Flash video here to play mp4 --> 
    <object> 
</video> 

그들은을 통해 가을되고 플래시 버전 (또는 다른 대체 등을 받게됩니다

이미지)

예를 들어 FireFox 3.5처럼 코덱이 아닌 태그를 지원하는 브라우저는 어떨까요? OGG를 지원할 수 없습니다 (이미 H.264의 방대한 아카이브가있을 수 있습니다) :

<video width="320" height="240"> 
    <source src="vid.mp4" type='video/mp4'> 
    <object> 
    <!-- Embed Flash video here to play mp4 --> 
    <object> 
</video> 

파이어 폭스 3.5에 들어있는 것은 그 안에 x가있는 회색 상자입니다. 이것은 FireFox 사용자에게 엄청난 사용자 경험이 아닙니다! 필자는 JavaScript를 사용하여 FF3.5를 확인하고 DOM을 변경한다고 생각할 수 있습니다! 이거 정말 나쁜 늙은 거지? ... 또는 'novideo'태그처럼 누락 된 스펙의 일부가 있습니까?

Answer 1

정상적인 성능 저하의 중요한 부분은 쿼리 기능입니다. HTML5로 다이빙하는 것이 좋습니다 ... 특히 video section을 살펴보십시오. 여기에 관련 코드 :

function supports_h264_baseline_video() { 
    if (!supports_video()) { return false; } 
    var v = document.createElement("video"); 
    return v.canPlayType('video/mp4; codecs="avc1.42E01E, mp4a.40.2"'); 
} 

참고 : DOM 검사가 필요하지만 기능 및 브라우저 서명이 필요하지 않습니다. 할 일이 :-)

브라우저에서 지원할 수 있는지 알게되면 비디오 태그를 표시하거나 라이트 박스를 표시하거나 적합하다고 생각되면 리디렉션 할 수 있습니다.

Answer 2

Video for Everybody의 test page은 Firefox 3.5에서만 OGG를 재생할 수 있음을 나타냅니다. OGG를 추가하고 싶지 않은 경우 플래시 버전을 추가 할 수 있습니다. 또한 VfE는 JavaScript를 사용하지 않으므로 조사 할 가치가 있습니다.

Answer 3

이 문제를 해결하는 가장 좋은 방법은 현대적인 js 라이브러리를 사용하는 것입니다. 사용하기 쉽고 빠르기 쉽습니다. 사용자의 브라우저에서 HTML5 기능을 확인할 수 있습니다. 여기에있는 사이트를 방문하십시오 : http://www.modernizr.com/