Jak wykrywać obsługiwane formaty wideo dla tagu wideo HTML5?

Składam aplikację w HTML5 przy użyciu tagu wideo, w aplikacji, którą użytkownik wybiera plik wideo i odtwarzam ten plik. Wszystko to dzieje się lokalnie, ponieważ łączę się tylko z tym plikiem na komputerze użytkownika.Jak wykrywać obsługiwane formaty wideo dla tagu wideo HTML5?

Chcę zezwolić tylko na formaty, które przeglądarka może odtwarzać w mojej aplikacji i pokazywać błąd dla nieobsługiwanych formatów. Problem polega na tym, że różne przeglądarki mogą odtwarzać różne formaty.

Wiem, że mogę sprawdzić przeglądarkę i dopasować ją do formatów, o których wiem, że mogą odtwarzać, ale co zrobić, jeśli przeglądarka zaktualizuje obsługę innego formatu? Będę musiał zaktualizować moją aplikację o nowe informacje, a tymczasem użytkownicy nie będą mogli odtwarzać obsługiwanych formatów. Czy istnieje sposób sprawdzania tylko obsługiwanych formatów wideo?

Źródło

2011-09-17 Cokegod

Można sprawdzić kodeki dla różnych typów wideo za pomocą HTMLVideoElement.prototype.canPlayType. Istnieje również wspaniała biblioteka wykrywania funkcji HTML5, Modernizr.

var testEl = document.createElement("video"), 
    mpeg4, h264, ogg, webm; 
if (testEl.canPlayType) { 
    // Check for MPEG-4 support 
    mpeg4 = "" !== testEl.canPlayType('video/mp4; codecs="mp4v.20.8"'); 

    // Check for h264 support 
    h264 = "" !== (testEl.canPlayType('video/mp4; codecs="avc1.42E01E"') 
     || testEl.canPlayType('video/mp4; codecs="avc1.42E01E, mp4a.40.2"')); 

    // Check for Ogg support 
    ogg = "" !== testEl.canPlayType('video/ogg; codecs="theora"'); 

    // Check for Webm support 
    webm = "" !== testEl.canPlayType('video/webm; codecs="vp8, vorbis"'); 
}

Źródło

2011-09-17 00:52:09 Will

Pomogło mi to niezmiernie, dzięki. Jestem ciekawy, dlaczego istnieją dwa testy dla mp4? H264 jest typem mp4, wierzę i testuję pod kątem obsługi mp4 lub webm. – edwinbradford

Oto link do dokładnego kodu źródłowego: https://github.com/Modernizr/Modernizr/blob/master/feature-detects/video.js – BishopZ

Należy zauważyć, że to sprawdza dla [Constrained Baseline Level 3 H. 264 wsparcia] (http://stackoverflow.com/questions/16363167/html5-video-tag-codecs-attribute#answer-16365526). –

Polecam użyć czegoś podobnego do http://videojs.com/, używają awaryjnego Flasha, a ich składnia podaje właściwą kolejność formatów, których należy używać we wszystkich przeglądarkach.

To idzie tak:

<a href="http://video-js.zencoder.com/oceans-clip.mp4">MP4</a>, 
<a href="http://video-js.zencoder.com/oceans-clip.webm">WebM</a>, 
<a href="http://video-js.zencoder.com/oceans-clip.ogv">Ogg</a>

Jeśli przeglądarka nie rozumie, MP4, to idzie do WebM, jeśli nie dojdzie do OGG, jeśli nie rozumie, to idzie do awaryjnego Flasha.

Pomyśl o tym jak deklaracje rodziny czcionek w CSS.

Źródło

2011-09-17 00:46:49 leopic

To nie jest dokładnie poprawna odpowiedź. To prawda, że przeglądarki sprawdzają typ źródła, a jeśli go nie rozumieją, próbują następnego źródła w kolejności (i ewentualnie używają lampy błyskowej, jeśli dodałeś ją jako rezerwową), ale musisz wziąć pod uwagę wideo ** kodek **. Jeśli nie określisz jawnie kodeka dla typu wideo, może się zdarzyć, że przeglądarka zna wideo ** typ **, ale zawiedzie z powodu niedostępnego ** wsparcia kodeków **. W takim przypadku przeglądarka nie będzie próbowała załadować następnego źródła. –

tylko przykład kodu, aby zobaczyć znacznik z kodekiem: '

Jak wykrywać obsługiwane formaty wideo dla tagu wideo HTML5?

Odpowiedz

Powiązane problemy