如何在滚动时播放暂停视频答案

【问题标题】：How to play pause video on scroll如何在滚动时播放暂停视频
【发布时间】：2017-08-28 11:16:20
【问题描述】：

我想在滚动时播放或暂停视频，如果滚动大于 300，它应该暂停，否则它应该播放。这是我的视频标签

<video width="100%" controls >
   <source src="video.mp4" type="video/mp4"  >
 </video>

还有 Jquery

$(document).ready(function(){
    var scroll = $(window).scrollTop();
    if(scroll > 300){ 
        $('video').attr('autoplay':'false')
    }
    else{
        $('video').attr('autoplay':'true')
    }
})

现在我不直接使用自动播放属性。请帮助我如何解决这个问题？

编辑：

i updated my code to this 
$(document).ready(function(){
            $(window).scroll(function(){
                var scroll = $(window).scrollTop();
                    if(scroll > 300){ 
                    $('#videoId').get(0).pause()    ; 
                    }
                else{
                    $('#videoId').get(0).play();

                }   
            })
        })

还是不行

【问题讨论】：

你可能想看看这个...http://stackoverflow.com/questions/4646998/play-pause-html-5-video-using-jquery

标签： javascript jquery html video

【解决方案1】：

您需要将您的函数绑定到scroll event，并且还要从autoplay 更改为实际的play() - pause()，查看这个示例 sn-p：

_{注意：我已经从 300 更改为 70 只是为了示例，但您可以根据需要保留断点}

var myvid = $('#myVid')[0];
$(window).scroll(function(){
  var scroll = $(this).scrollTop();
  scroll > 70 ? myvid.pause() : myvid.play()
})

body {
  background:#e1e1e1;
  height:1000px;
}
video {
  display:block;
  width:300px;
  margin:0 auto;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<video id="myVid" width="100%" controls autoplay>
  <source type="video/mp4" src="http://html5demos.com/assets/dizzy.mp4">
</video>

【讨论】：

【解决方案2】：

我刚刚改进了这一点，对于单个视频，onscroll video pause... 这是html文件video.html

参考此链接https://codepen.io/prashujack/pen/Jvmgxz 谢谢。

<!-- This is javascript file vdo.js -->


"use strict";
var wrapper = $('.wrapper');
wrapper.scrollTop(50);

var vid2=document.getElementById("movie2");

wrapper.scroll(function(){
 var st = wrapper.scrollTop(); 

  if (st > 10)
 {vid2.pause();$("#movie2").addClass("animated hinge");}
  else
 {vid2.play(); $("#movie2").removeClass("animated hinge");}
  
});

<!-- This is css file -->

.wrapper{
  width: 400px;
  height: 600px;
  margin:20px auto;
  text-align:center;
  border:1px dashed grey;
  overflow-y: scroll;
  }

<!-- This is html file video.html-->

<html>
<head>
<meta charset="utf-8">
<title>Untitled Document</title>
	<script
  src="https://code.jquery.com/jquery-3.3.1.min.js"
  integrity="sha256-FgpCb/KJQlLNfOu91ta32o/NMZxltwRo8QtmkMRdAu8="
  crossorigin="anonymous"></script>
	
	</head>
<body>
<div class="wrapper">

	 <video id="movie2" width="320" height="180" preload autoplay>
 <source src="http://html5demos.com/assets/dizzy.mp4" type="video/mp4">
 Your browser does not support the video tag.
</video><br /><br/>
<p>
  Lorem ipsum dolor sit amet, consectetur adipisicing elit. Consequuntur porro temporibus minima optio, labore perferendis, provident eveniet aliquid commodi dolorum debitis! Placeat porro omnis nam quod aut, enim quos optio laudantium repellendus eos soluta nostrum cumque mollitia neque ab dolores facere aliquam at voluptas. Cumque quam iste rerum odit veritatis tempore dolor aliquid, ex animi earum fugiat assumenda, voluptas deleniti sunt mollitia! Et obcaecati commodi, sed voluptatibus doloremque aperiam possimus quos nisi nulla veniam odit! Vitae optio debitis incidunt at doloremque eos earum maxime iusto nostrum excepturi, ipsum porro, aliquid architecto sed laboriosam fuga totam ut modi ipsa sit reprehenderit, iure magni unde. </p>
 </div><!--endf of wrapper div-->
<script src="../Unnamed Site 2/vdo.js"></script>
</body>
</html>

【讨论】：