页面视频自动播放

页面中存在多个视频，当视频完全显示在屏幕中时自动播放，在屏幕外自动停止播放，功能类似微博的视频播放。
代码如下：
<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
    <style>
        .div_banner {
            height: 100px;
             80%;
            margin: auto;
            background-color: #ffffcc
        }

        .div_video {
            height: 300px;
             600px;
            margin: auto;
            background-color: black;
            color: aliceblue;
            line-height: 300px;
            font-size: 26px;
            text-align: center;
        }

        video {
            height: 300px;
             auto;
        }
    </style>
</head>

<body style="margin:auto">
    <div class="div_banner" style="height:2000px"></div>
    <div class="div_video" id="video1">
        <video src="img/video/嘉n华.1080p.HD国语中字[最新电影www.6vhao.tv].mp4" controls="controls"></video>
    </div>
    <div class="div_banner"></div>
    <div class="div_video" id="video2">
        <video src="img/video/嘉n华.1080p.HD国语中字[最新电影www.6vhao.tv].mp4" controls="controls"></video>
    </div>
    <div class="div_banner" style="height:2000px"></div>
</body>
<script src="lib/jquery-3.1.1.min.js"></script>
<script>

    //页面滚动，其中完全显示的视频自动播放
    $(document).scroll(function () {
        var isVideoOn = false;
        $('.div_video video').each(function () {
            var $video = $(this);
            var toTop = $video.offset().top - $(document).scrollTop();
            var toBottom = window.innerHeight - (toTop + $video.height());

            if (toTop > 0 && toBottom > 0) {//完全显示在屏幕中
                if (!isVideoOn) {
                    $video[0].play();
                    isVideoOn = true;
                } else {
                    $video[0].pause();
                }
            } else {//在屏幕外
                $video[0].pause();
            }
        })
    })
</script>

</html>
　　效果如下：