Wykryj, czy przeglądarka/urządzenie może odtwarzać wideo HTML5 przed odtwarzaniem

Question

Wiem, że mogę sprawdzić przez navigator.userAgent, czy urządzenie jest iPhonem, ale są też inne urządzenia i niektóre z nich nie są świadome, które będą odtwarzać wideo we własnym gracz.

Można utworzyć listę wszystkich przeglądarek/urządzeń, które nie odtwarzają wideo w linii, ale zastanawiam się, czy istnieje inne rozwiązanie.

Czy w języku JavaScript można wykryć, czy przeglądarka, na przykład Safari na iPhonie, odtwarza wideo w swoim odtwarzaczu zamiast w linii? W związku z tym możliwe jest pokazanie alternatywy, takiej jak obraz, zamiast wideo.

Answer 1

Wiem, że to stare pytanie, ale jest to dla mnie duży problem i nie ma zbyt wielu informacji online. Ale mogę odpowiedzieć na twoje pytanie po tym, jak znalazłem odpowiedź Alexeya w tym wątku: Detect if client allows inline media playback for HTML5 video.

Nie, nie można wykryć, czy przeglądarka/urządzenie obsługuje wideo wbudowane przed odtworzeniem.

To zła wiadomość. Problem polega na tym, że jedynym niezawodnym sprawdzaniem w przeglądarkach takich jak iOS Safari na iPhonie jest rozpoczęcie odtwarzania wideo, a następnie podsłuchiwanie, jeśli natychmiast przechodzi w tryb rodzimego trybu pełnoekranowego. Nawet to może się nie powieść, jeśli utworzysz gracza, który automatycznie wszedł do trybu pełnoekranowego po uruchomieniu zdarzenia odtwarzania.

Dobra wiadomość, przynajmniej dla mnie, polega na tym, że wykrywając ją zaraz po uruchomieniu wraz z użyciem zapytań o media CSS w celu wykrycia rozmiaru ekranu, powinienem być w stanie osiągnąć to, co próbuję zrobić.

Oto odpowiednie fragmenty zaczerpnięte z mojego odtwarzacza JS, w dużym stopniu wywodzące się z powyższego linku.

ta obsługuje tylko Wykrywa Inline Po Teledysk rozpoczyna odtwarzanie

// Expose useful properties of the video 
var vid = (function(){ 
    var elem = document.getElementsByTagName('video')[0]; 
    return {elem:elem}; 
})(); 
// Test for inline playback support 
var inlineTest = (function() { 
    if (vid.elem.webkitFullscreenchange || vid.elem.mozFullscreenchange || vid.elem.MSFullscreenChange || vid.elem.fullscreenchange) { 
     return 'inline-no'; 
    } else { 
     return 'inline-yes' 
    } 
}); 
// play() functions 
vid.elem.onplay = function(){ 
     var inlineSupport = inlineTest(); 
     document.body.className += ' ' + inlineSupport; 
};