Div滚动与jQuery动画

我试图为youtube播放器创建自己的“字幕”系统。目前我坚持js滚动，只是无法正常工作。Div滚动与jQuery动画

代码：

<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（抱歉页俄语）。在Google 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

来源

2011-11-17 Andrew Dryga

类型与您的问题无关，但当用户在视频中跳过时会发生什么情况？ –

由于间隔每500毫秒检查一次当前视频时间位置，所以该脚本在向前跳过时工作正常，我还想指出至今为止的好脚本。以前没有真正见过类似的东西。 –

@MeisamMulla，它运作良好。当您跳过视频时，它会继续播放到下一个滚动点，然后将字幕滚动到正确的位置。我想通过自动滚动到最近的位置来立即改善这一点。 –

我已经通过我自己解决了这个问题。关键是动画滚动使用从页面顶部的绝对距离，所以到每个元素的距离是： 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>

请不要忘记版权，享受！

来源

2011-11-17 18:18:09

Div滚动与jQuery动画

回答

相关问题