html5動画がインラインで再生されるかどうかを検出する方法

Question

私は、上にスプラッシュ画像を含むHTML5動画を持っています。デスクトップデバイスでは、スプラッシュイメージをクリックしてイメージを消して、ビデオを再生します。携帯電話では、画像をクリックするとビデオが別のアプリケーションで再生されるので、ユーザーがクリックしてWebページに戻ると、スプラッシュ画像がそこに残るようにします（普通のビデオコンポーネント、少なくとも私のAndroidの携帯電話は、かなり醜いです）。

動画が「インライン」で再生されるのか、新しいアプリに起動されるのかをどのように判断できますか？インラインで表示されている場合は、スプラッシュイメージを非表示にして、新しいアプリに起動した場合は表示されません。

1つの方法は、ユーザーエージェントをスニッフィングして電話機かどうかを確認することです。それは明らかな理由のために良いアイデアではない（新しい電話が出てきたら、100台のデバイスでテストしなければならない）。 ページを離れて動画プレーヤーにジャンプしたり、動画プレーヤーから戻ったりするときに、別の可能性があります。しかし、私は何をキャッチするか分からない。 私が考えてきた別の可能性は、ビデオコンポーネントのいくつかのプロパティをチェックするタイマーを設定することです...再生中かどうかを確認することです。

私はjQueryを使用しています。あなたはそれをチェックして、映像がインラインまたはフルスクリーンであるかどうかを調べることができるように

Answer 1

iOSでは、あなたのvideo要素は、webkitDisplayingFullscreen性質を持っています：

var videoFullscreenStatus = document.getElementById("myVideo").webkitDisplayingFullscreen; 

をビデオがフルスクリーンで再生しているときに、プロパティがtrueの場合、偽さもないと。したがって、理論的には、ビデオが再生されるとすぐにこれを確認し、それに応じてポスター画像を設定することができます。

私はAndroidにはあまり慣れていませんが、フルスクリーンになると聞くことができるイベントはwebkitfullscreenchangeです。それがモバイルで動作するかどうかは分かりませんが、iOSで動作するとは思われません。

これは古い質問ですが、これが誰かを助けることを願っています！

Answer 2

oncanplayを確認してください。インラインで再生される動画は、nullにプリセットされているようです。

var playsInline = typeof document.getElementByID('myVid')['oncanplay'] !== 'undefined'; 

又は関数として

function playsInLine(vidId) { 
    return typeof document.getElementByID(vidId)['oncanplay'] !== 'undefined'; 
} 

警告：この方法は、すべてのデバイス上のすべてのブラウザで正しい出力が得られない場合があり、それはまた、将来の変更に起因する望ましくない結果をもたらすことができます。しかし、執筆時点では、これは私がチェックしたすべての場所で機能しました（Windows：Chrome 42、IE11、FF36、Opera 29、Safari、Android：Chrome、iPad、iPhone 4S：Safari）