在特定时间更改 div 的内容

Question

我正在使用 JPlayer js 库作为音频播放器。我想在歌曲的特定时间更改 div 的内容。在下面的代码中 currentTime 有时间。

我想做类似

的东西

if currentTime=='00:15' alert('track is now on 15th second');

if currentTime=='00:45' alert('track is now on 45th second');

if currentTime=='01:20' alert('track is now on 01:20th second');

if currentTime=='02:15' alert('track is now on 02:15th second');

但我无法将 curretnTime 作为变量或将其值分配给变量。我是js的新手。以下是 jplayer

的实际代码

<script type="text/javascript">
var current_time;
$(document).ready(function(){
    $("#jquery_jplayer_1").jPlayer({
        ready: function () {
            $(this).jPlayer("setMedia", {
                title: "Bubble",
                m4a: "http://www.jplayer.org/audio/m4a/Miaow-07-Bubble.m4a",
                oga: "http://www.jplayer.org/audio/ogg/Miaow-07-Bubble.ogg"
            });
        },
        cssSelectorAncestor: "#jp_container_1",
        swfPath: "/js",
        supplied: "mp3, oga",
        useStateClassSkin: true,
        autoBlur: false,
        smoothPlayBar: true,
        keyEnabled: true,
        remainingDuration: true,
        toggleDuration: true,
        cssSelectorAncestor: "",
        cssSelector: {
            currentTime: "#state1",
        }
    });
});         
</script>

Answer 1

我假设 currentTime 被播放器更新为 ID 为 'state1' 的元素。您可以做的是获取内容并解析它：

var myCurrentTime = Number.parseInt(document.getElementById('state1').textContent);

然后根据你的情况使用它。

要定期这样做：

setTimeout(function(){
    var myCurrentTime = Number.parseInt(document.getElementById('state1').textContent);
    .... handling logic here
}, 1000);

Answer 2

试试类似的东西；

function messager(time){
    alert(time);
}
messager(currentTime);
setTimeout(messager(currentTime), 1000);

这个函数需要时间作为输入。此外 setTimeout 函数将每 1 秒调用一次该函数，并且运行代码。希望这有帮助。

Answer 3

您要做的是设置一个时间间隔，以便在视频播放时检查您的 currentTime 变量。有很多方法可以做到这一点，但这里有一个简单的例子来说明你需要做什么。

function alertPlayerTime(){
    alert("Track is " + currentTime + " seconds in.");
    // other code can go here as well
}

setInterval(alertPlayerTime, 1000);

将函数作为变量发送到 setInterval，时间以毫秒为单位，因此您可以随时检查它。关于此类解决方案的帖子很多，例如 this one。

Answer 4

我自己做过

<script type="text/javascript">

            $(document).ready(function(){
              $("#jquery_jplayer_1").jPlayer({


              timeupdate: function(event) { 
              var time = event.jPlayer.status.currentTime;

                  if (time > 2) $('#comment').html('My first comment'); 
                  if (time > 4) $('#comment').html('My second comment');
                  if (time > 8) $('#comment').html('My third comment'); 
                  if (time > 15) $('#comment').html('My 4th comment');
                  if (time > 25) $('#comment').html('My 5th comment');  
                  if (time > 35) $('#comment').html('My 6th comment');
                  if (time > 50) $('#comment').html('My 7th comment');  
                  if (time > 60) $('#comment').html('My 8th comment');
                  if (time > 70) $('#comment').html('My 9th comment');  
                  if (time > 90) $('#comment').html('My 10th comment');
                  if (time > 120) $('#comment').html('My 11th comment');    
                  if (time > 150) $('#comment').html('My 12th comment');
                  if (time > 180) $('#comment').html('My 13th comment');    
                  if (time > 200) $('#comment').html('My 14th comment');

               },


                ready: function () {
                  $(this).jPlayer("setMedia", {
                    title: "Bubble",
                    m4a: "http://www.jplayer.org/audio/m4a/Miaow-07-Bubble.m4a",
                    oga: "http://www.jplayer.org/audio/ogg/Miaow-07-Bubble.ogg"
                  });
                },
        cssSelectorAncestor: "#jp_container_1",
        swfPath: "/js",
        supplied: "mp3, oga",
        useStateClassSkin: true,
        autoBlur: false,
        smoothPlayBar: true,
        keyEnabled: true,
        remainingDuration: true,
        toggleDuration: true,
        cssSelectorAncestor: "",
        cssSelector: {
          currentTime: "#state1",
        }       
      });
    });
          </script>

在特定时间更改 div 的内容

Change content of a div at specific time

javascript

jquery

html

css

jplayer