在Chrome中的页面中心自动播放html5视频

Question

当视频元素位于屏幕中心时，我正尝试在网页上自动播放视频。它在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>