HTML5ビデオの読み込み

Question

設定は、私がウェブサイトのヒーローでページの読み込みを自動再生するビデオを持っていることです。自動再生とループのある動画タグを使用するだけです画面が700px以下になると、何も表示しないように設定しています。画像は元に戻ってしまいます。しかし、ビデオはまだページサイズを大きく押し上げるバックグラウンドで流れます。現在、私はこれがあります。私はビデオを隠すだけでなく、それはときに、画面の幅全体でストリーミングを停止することができますどのように誰もが知っていた作品のようなものが、それはまだでjqueryのキックまで、ビデオの一部をストリーミング

if ($(window).width() < 700) { 
    $('.loopVideo').get(0).pause(); 
} 

を700px未満ですか？

display: noneした後、事前

Answer 1

のおかげでは、ビデオの再生を停止する：あなたがビデオを殺したい場合

// obj represents how you have identified the video element. 
// Examples: 
// var obj = document.getElementById('vid1'); 
// var obj = document.getElementsByTagName('video')[0]; 
// var obj = document.querySelector('video'); 

obj.pause(); 
obj.currentTime = 0; 

も、この操作を行います。

obj.src = ""; 

• 以下のデモ2つのボタン、チェックボックス、ループ内のビデオがあります。
• オレンジ/青のボタンはビデオ.play()とpause()の機能を切り替えます。
• 緑色/赤色のボタンはビデオdisplay: block/noneを切り替え、再生中はビデオを停止します。
• チェックボックスがオンで緑色/赤色のボタンがオフ（ラベルが「オフ」で赤色）の場合、ビデオストリームは停止します。
• #onOffボタンでデモをテストするときは、ビデオ再生中にこのボタンをクリックして「オフ」にしてください。待ってから「ビープ音」を聞いてください。数秒以内に聞こえない場合は、正常にテストされます。

スニペット

$(function() { 
 

 
    var vid = document.getElementById('vid1'); 
 
    var $vid = $('#vid1'); 
 
    var $kill = $('#kill:checked'); 
 

 
    $('#onOff').on('click', function(e) { 
 
    $(this).toggleClass('on off'); 
 
    $vid.toggleClass('here gone'); 
 
    if (vid.playing) { 
 
     vid.pause(); 
 
     vid.currentTime = 0; 
 
     if ($kill) { 
 
     vid.src = ""; 
 
     } 
 
    } else { 
 
     vid.load(); 
 
     vid.src = "https://glpjt.s3.amazonaws.com/so/av/vs34s3.mp4"; 
 
    } 
 
    /* ======[.pause() then .currentTime() = 0 
 
    [ stops the video instead of pausing it. 
 
    =========[ Kill a stream by .src="" and 
 
    use .load() and assign .src= "new path" */ 
 

 
    }); 
 

 

 

 
    $('#playPause').on('click', function(e) { 
 
    if (vid.paused) { 
 
     vid.play(); 
 
     this.classList.add('play'); 
 
     this.classList.remove('pause'); 
 
    } else { 
 
     vid.pause(); 
 
     this.classList.add('pause'); 
 
     this.classList.remove('play'); 
 
    } 
 
    }); 
 
});

* { 
 
    outline: none; 
 
} 
 
here { 
 
    display: block; 
 
} 
 
.gone { 
 
    display: none; 
 
} 
 
.flex { 
 
    display: flex; 
 
    flex-flow: row nowrap; 
 
    justify-content: center; 
 
    margin: 30px 0 0 0; 
 
} 
 
fieldset { 
 
    height: 100px; 
 
    width: 100px; 
 
    text-align: left; 
 
} 
 
figure { 
 
    margin: 0; 
 
    padding: 0; 
 
    width: 320px; 
 
} 
 
button { 
 
    width: 32px; 
 
    line-height: .8; 
 
    padding: 2px 3px 0 0; 
 
    font-weight: 900; 
 
    font-size: 12px; 
 
    background: transparent; 
 
    border: none; 
 
    margin: 10px 0; 
 
} 
 
button#playPause.pause:before { 
 
    content: "\a0▶\a0"; 
 
    font-size: 16px; 
 
    line-height: .40; 
 
    color: cyan; 
 
    background: orange; 
 
} 
 
button#playPause.play:before { 
 
    content: "\a0❙❙\a0"; 
 
    font-size: 16px; 
 
    color: orange; 
 
    background: cyan; 
 
    vertical-align: middle; 
 
} 
 
button#onOff.on:before { 
 
    content: '\a0ON\a0'; 
 
    background: yellowgreen; 
 
} 
 
button#onOff.off:before { 
 
    content: '\a0OFF\a0'; 
 
    background: crimson; 
 
    color: white; 
 
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<script src="http://gh-canon.github.io/stack-snippet-console/console.min.js"></script> 
 

 
<section class="flex"> 
 
    <figure id="box1" class="box"> 
 
    <video id="vid1" class="here" poster="https://glpjt.s3.amazonaws.com/so/av/vs34s3.png" loop preload="none" width="320"> 
 
     <source src="https://glpjt.s3.amazonaws.com/so/av/vs34s3.mp4" type="video/mp4"> 
 
    </video> 
 
    </figure> 
 

 

 
    <fieldset> 
 
    <legend>Control Panel</legend> 
 
    <button id="onOff" class="on"></button> 
 
    <br/> 
 
    <input id="kill" type="checkbox"> 
 
    <label for="kill">Kill Stream</label> 
 
    <button id="playPause" class="pause"></button> 
 
    </fieldset> 
 
</section>