ブラウザ/デバイスは、私は、デバイスがiPhoneであれば、私は<code>navigator.userAgent</code>を通じて確認することができます知っているが、他のデバイスがあると、いくつかは、私はそれ自身でビデオを再生されますどのを認識していないよ

Question

を再生する前に、HTML5のビデオをインラインで再生することができます検出した場合プレーヤー。

は、ビデオをインラインでプレーしていないすべてのブラウザ/デバイスのリストがあります行うことができますが、別の解決策があるのだろうか。

は、それはブラウザが、iPhone上のSafari例のために、それ自身のプレイヤーの代わりに、インラインでビデオを再生場合はJavaScriptを検出するには可能ですか？したがって、ビデオの代わりに画像のような代替案を表示することができます。

Answer 1

私は、これは古い質問ですけど、それは私にとって大きな問題だと多くの情報がオンラインにありません。しかし、このスレッドでアレクセイの答えを見つけた後、私はあなたの質問に答えることができます：Detect if client allows inline media playback for HTML5 video。ブラウザ/デバイスは、それを再生する前に、インラインビデオをサポートしている場合

いいえ、あなたは検出できません。悪いニュースだ

。問題は、iPhone上のiOS Safariのようなブラウザの唯一の確実なチェックは、ビデオを再生してから、即座にフルスクリーンのネイティブモードになったら盗聴することだけです。プレイイベントが発生したときに自動的に全画面表示になったプレイヤーを作れば、それでも失敗します。

少なくとも私にとっては、CSSのメディアクエリを使用して画面サイズを検出すると同時に再生を開始すると、それを検出することによって、私がしようとしていることを達成できるはずです。

ここでは、私のプレイヤーJSからの関連ビットを示します。このリンクは、上のリンクから非常に派生しています。

これだけ検出し、インラインサポートビデオ

// 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; 
};