1

I want to play or pause video on scroll, if scroll is greater than 300 it should pause otherwise it should play. This is my video tag 

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

And the Jquery 

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

Now I'm not using autoplay attr directly. Please help me how can I fix this ?

Edit :

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

                }   
            })
        })

still does not work

Sikander
  • 2,799
  • 12
  • 48
  • 100
  • You might want to check this out... [http://stackoverflow.com/questions/4646998/play-pause-html-5-video-using-jquery](http://stackoverflow.com/questions/4646998/play-pause-html-5-video-using-jquery) – Rod Apr 03 '17 at 14:33

2 Answers2

6

You need to bind your function to the scroll event and also change from autoplay to actually play() - pause(), check this example snippet:

Note: I have changed from 300 to 70 just for the example but you can keep your breakpoint as you want

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>
DaniP
  • 37,813
  • 8
  • 65
  • 74
0

I have just improve this, for single video,onscroll video pause... This is html file video.html

refer this link https://codepen.io/prashujack/pen/Jvmgxz Thank you.

<!-- 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>
Prashant Jambhale
  • 1