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按钮测试演示时，在视频播放时将其点击为“关闭”。等一下，听一声“嘟嘟”声。如果你在几秒钟内没有听到，那就成功测试了。

<强>段

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

HTML5视频加载

1 个答案: