Question

我试图为youtube播放器创建我自己的“字幕”系统。目前我坚持使用js滚动，但它无法正常工作。

代码：

    <script type="text/javascript" language="javascript">
    var player;
    var scrollToTimePosition;
    // document.onReady
    $(document).ready(function() {
        var id = "QH2-TGUlwu4";
        var params = { allowScriptAccess: "always" };
        swfobject.embedSWF("http://www.youtube.com/v/" + id + "?enablejsapi=1", "video-container", "500", "375", "8", null, null, params, null);
    });

    // YouTube API Required function
    function onYouTubePlayerReady() {
        player = document.getElementById("video-container");
        //player.playVideo();

        setInterval(function() {
            if(player.getPlayerState() == 1) {
                var time = Math.round(player.getCurrentTime());
                if(time > 1 && scrollToTimePosition != time) {
                    var anchor = $("#text-container > a[href=#"+time+"]");
                    if(anchor.length) {
                        scrollToTimePosition = time;
                        $('#text-container').animate({
                            scrollTop: anchor.offset().top - $("#text-container").offset().top
                        }, 1000);
                    }
                }
            }
        }, 500);
    }
</script>

您可以在线查看here（对不起俄语）。在谷歌Chrome浏览器中，它有时会上下跳跃，并停在错误的位置。当滚动条已经滚动到某个位置并且下一个也部分可见时会发生这种情况。

UDP：我添加了控制台日志以便于调试，日志如下所示：

Move to #33 with shift 204px
Move to #43 with shift 219px
Move to #46 with shift 261px
Move to #53 with shift 438px
Move to #60 with shift 480px
Move to #63 with shift 657px
Move to #65 with shift 915px

Answer 1

我已经解决了这个问题。关键是动画滚动使用距离页面顶部的绝对距离，因此与每个元素的距离为： D =从顶部到可滚动容器的距离（在我的情况下为div）+从容器顶部到元素的距离; 并且这个值是静态的，因此在巫婆位置滚动条中无关紧要，距离应该预先计算并固定。

新代码：

<script type="text/javascript" language="javascript">
    // document.onReady
    $(document).ready(function() {
        var id = "QH2-TGUlwu4";
        var params = { allowScriptAccess: "always" };
        swfobject.embedSWF("http://www.youtube.com/v/" + id + "?enablejsapi=1", "video-container", "500", "375", "8", null, null, params, null);
    });

    /**
     * Creates auto-scrollable div based on YouTube video player current time.
     *
     * Div is scrolled to link anchor, that keeps a timestamp in a href value, which will be used as scroll target.
     * Example of anchors:
     * <a href="#1">0:01</a>
     * <a href="#31">0:31</a>
     * <a href="#71">1:11</a>
     *
     * @author Andrew Dryga <http://go.dryga.com/email>
     * @param playerContainerSelector Selector for video container (element that holds player)
     * @param scrollableContainerSelector Selector for scrollable container (for ex. div with overflow-y: scroll)
     */
    var YouTubeAutoScrolledSubtitles = function(playerContainerSelector, scrollableContainerSelector) {
        // Link to player container
        var player = $(playerContainerSelector).get(0);
        // Selector for continer that will be scrolled
        var containerSelector = scrollableContainerSelector;
        // Link to continer that will be scrolled
        var container = $(containerSelector);
        // Sive current point to dont call scroll several times
        var scrollToTimePosition;

        // This function scrolls container to current position
        var scroller = function() {
            var time = Math.round(player.getCurrentTime());

            if(time > 0 && scrollToTimePosition != time) {
                var anchor = $(containerSelector + " > a[href=#"+time+"]"); // FIXME
                if(anchor.length) {
                    scrollToTimePosition = time;
                    container.animate({
                        scrollTop: anchor.data('absoluteDistanceFromTop') - container.offset().top + 3
                    }, 1000);
                }
            }
        }

        // Preparing data for scroll, savind absolute anchors position from top
        var prepareAnchors = function() {
            $(containerSelector + " > a").each(function() {
                $(this).data('absoluteDistanceFromTop', $(this).offset().top);
            });
        };

        // Start scrolling
        var scroll = function () {
            var scrollerInterval = setInterval(function() {
                if(player.getPlayerState() == 1) {
                    scroller();
                }
            }, 500);
        }

        // Starting scroller 
        prepareAnchors();
        // Start scroll
        scroll();

    };

    // YouTube API Required function
    function onYouTubePlayerReady() {
        YouTubeAutoScrolledSubtitles("#video-container", "#text-container");
    }
</script>

内容部分可以像这样：

<div id="video-container"></div>
<div id="text-container">
    <a href="#1">0:01</a>
    <div>Block 1</div>

    <a href="#5">0:05</a>
    <div>Block 2</div>
</div>

请不要忘记版权，享受！

Div滚动与jQuery动画

1 个答案: