Question

我想在滚动时播放或暂停视频，如果滚动大于 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')
    }
})

现在我没有直接使用autoplay attr。请帮帮我怎么解决这个问题？

修改：

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();

                }   
            })
        })

仍然无效

Answer 1

您需要将您的功能绑定到scroll event，并且还要从autoplay更改为实际播放（） - 暂停（），请查看此示例代码段：

_{注意：我已经将示例中的300更改为70但您可以根据需要保留断点}

＆＃13;

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

＆＃13;

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

＆＃13;

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

＆＃13;

Answer 2

我刚刚改进了这个，对于单个视频，滚动视频暂停...... 这是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>

如何在滚动上播放暂停视频

2 个答案: