HTML5视频加载

Question

设置是，我有一个视频，自动播放网页的英雄页面加载;只需使用带自动播放和循环的视频标签即可。当屏幕低于700px时，我将它设置为不显示任何图像，并且图像取代它，这样好。然而，视频仍然在背景中流动，这会使页面大小增加很多。目前我有这样的：

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

哪种类型的作品，但它仍然流一些视频，直到在jQuery的踢有谁知道我可以隐藏视频以及停止流完全屏幕宽度时，小于700px？

在此先感谢

Answer 1

display: none后停止播放视频：

// 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 = ""; 

• 演示如下有两个按钮，一个复选框和一个循环中的视频。
• 橙色/蓝色按钮将切换视频.play()和pause()功能。
• 绿色/红色按钮将切换视频display: block/none并停止播放视频。
• 当复选框被选中并且绿色/红色按钮关闭（即标记为“关闭”并且是红色）时，视频流将被停止。
• 使用#onOff按钮测试演示时，在播放视频时将其点击为“OFF”。等待并听取“嘟嘟”声。如果几秒钟内没有听到，则说明测试成功。

片段

$(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>