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

尝试类似的事情;

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

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

Answer 2

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

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

setInterval(alertPlayerTime, 1000);

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

Answer 3

我自己就是这样做的

<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>

Answer 4

我假设播放器将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);

在特定时间更改div的内容

4 个答案: