html5ビデオ要素がタッチデバイスに読み込まれないようにします。

Question

現在、全画面ビデオ背景を作成中です。通常、タッチデバイス（iPad、iPhoneなど）の場合は、ビデオ要素をCSSで非表示にして、代わりに画像を表示します。

私は、さまざまなウェブサイトがhtml5ビデオのバックグラウンドで使用しているレスポンシブなソリューションを確認しました。 AirBnBがタッチデバイス上でhtml5のビデオ要素を読み込んでいないことに気付いたとき（私はiPadとiPhoneでテストしましたが、アンドロイドではまだテストされていません）。タッチデバイスでウェブサイトを調べると、ビデオ要素が完全に「消えている」ことがわかります。

私の質問はです。html5ビデオがタッチデバイスに読み込まれないようにするにはどうすればよいですか？

phpまたはjquery（私も自分のサイトにmodernizrがロードされています）。 JavaScriptで

Answer 1

：

if("ontouchstart" in document.documentElement){ 
    var video = document.querySelectorAll("video")[0]; 
    var img = document.createElement("img"); 

    //set img attributes here 

    video.parentNode.replaceChild(img, video); 

} 

CSSメディアクエリの問題は、あなたが直接タッチデバイスを検出できないということです。

<img src="background-img.jpg" data-video-src="video.mp4" class="video-placeholder" /> 

あなたは単にスタイルvideo-placeholderを持っており、HTML5のvideo要素に置き換えるあなたの要素のクリックのリスナーを持っている：

Answer 2

最も簡単なクロスブラウザの方法は次のように、プレースホルダ要素を持っているだろう。以下のような

何か：

$('body').on('click','.video-placeholder', function(event) { 
    //Create video element 
    var videoSrc = $(this).data('video-src'); 
    var video = $('<video></video>'); 
    video.load(function() { /*Do onload stuff*/ }); 
    video.attr('src',videoSrc); 
    //Replace element 
    $(this).replaceWith(video); 
}); 

は、これは明らかに非常に単純化されたソリューションですが、ユーザーはそれを再生したい場合を除き、それはあなたが自動ロードビデオをしないようにそれを処理するためにどのようにアイデアを提供します。