video获取屏幕高度播放暂停

html代码： 

<video muted id="js_video1" class="sd_img js_video video-js vjs-default-skin" controls
                                          width="100%" autoplay >
        <source src="http://brothers-php.544.jlbbc.cn/Uploads/mp4/{$list.shipin}"  type="video/mp4" />
 </video>

js代码：

<script>
$(function(){
    var videoheight=$('#js_video1').height();   //video高度
    var topheight=$("#js_video1").offset().top;  //距离顶部距离
    
    $(document).scroll(function(){
        var res=$(this).scrollTop();
        if(res>(topheight-50) && res < (videoheight+topheight) ){     //减50是video被盖住的高度
            $('video').trigger('play');
        }else{
            $('video').trigger('pause');
        }
    });
    
});

</script>

原理：

滚动条    >  video距离顶部的高度                               时播放 
滚动条    <  video距离顶部的高度+video本身高度      时暂停

 

注 ： video要添加muted属性，否则google浏览器不支持自动播放和暂停