2017-04-03 215 views
1

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

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

,现在我不能直接使用自动播放ATTR 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(); 

       } 
      }) 
     }) 

仍然无法正常工作

+0

您可能要检查了这一点... [http://stackoverflow.com/questions/4646998/play-pause-html-5使用-jquery的-VIDEO-](http://stackoverflow.com/questions/4646998/play-pause-html-5-video-using-jquery) – Rod

回答

2

你需要你的函数绑定到scroll event,也从autoplay改变实际播放() - 暂停(),检查这个例子片段:

注:我已经从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>

相关问题