jquery - HTML5 视频加载

Question

设置是我在网站的英雄中有一个在页面加载时自动播放的视频；只需使用具有自动播放和循环功能的视频标签。当屏幕低于 700px 时，我将其设置为不显示并且图像取代了它，到目前为止一切顺利。然而，视频仍然在后台播放，这大大增加了页面大小。目前我有这个:

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

哪种类型的作品，但它仍然流式传输一些视频，直到 jquery 启动。有谁知道我如何隐藏视频以及在屏幕宽度小于 700 像素时完全停止流式传输？

提前致谢

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() 功能。
• 绿色/红色按钮将切换视频显示:阻止/无，如果正在播放则停止视频。
• 选中复选框并且绿色/红色按钮关闭(即标记为“关闭”且为红色)时，视频流将停止。
• 使用 #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>