Javascript 在Chrome页面中央自动播放html5视频

当视频元素位于屏幕中央时，我尝试在网页上自动播放视频。它在Firefox和IE中运行良好，但只有在我使用箭头键向下滚动时才能在Chrome中运行

如果我使用鼠标滚动，事件会触发，但视频不会播放。这里可能出了什么问题

以下是我的视频html代码：

<video id="video1">
    <source src="~/Videos/maintenance.webm" type="video/webm" />
    <source src="~/Videos/maintenance.mp4" type="video/mp4">
    <img src="~/Images/home_maintenance.png" title="No video playback capabilities" />
</video>

jquery代码是：

<script type="text/javascript">
    $(document).ready(function () {
        // Get media
        var media = $('#video1');

        function checkMedia() {
            // Get current browser top and bottom
            var tolerance = 300;
            var scrollTop = $(window).scrollTop() + tolerance;

            media.each(function (index, el) {
                var yTopMedia = $(this).offset().top;
                var yBottomMedia = $(this).height() + yTopMedia;

                if (scrollTop > yTopMedia) {
                    $(document).unbind('scroll');
                    console.log(el);
                    $(el).get(0).play();
                } 
            });
        }
        $(document).on('scroll', checkMedia);
    });
</script> 

$（文档）.ready（函数（）{
//获取媒体
var media=$（“#video1”）；
函数checkMedia（）{
//从上到下获取当前浏览器
var容差=300；
var scrollTop=$（窗口）.scrollTop（）+公差；
媒体。每个（功能（索引，el）{
var yTopMedia=$（this）.offset（）.top；
var yBottomMedia=$（this）.height（）+yTopMedia；
如果（滚动顶部>yTopMedia）{
$（文档）。解除绑定（“滚动”）；
控制台日志（el）；
$（el）.get（0.play（）；
} 
});
}
$（文档）。在（'scroll'，checkMedia）上；
});

为什么要对id为

#video1

？的媒体使用each循环，而要让浏览器在每个滚动条上执行该功能，似乎需要做很多工作。@SergioAlen这只是代码的简化版本。真正的代码要复杂得多，确实需要这个功能？@新手，因为我只想运行一次。