jQuery循环插件动态超时的图像和视频

我使用jQuery循环插件来旋转图像和FLV视频的混合。对于图像，我有固定的超时时间为3000ms，但对于视频，其基于视频长度，这就是我的问题开始的地方。我总是得到我的第一个视频的持续时间为:

var value = 0;
 $(document).ready(function() {
  $('.slideshow').cycle({
    fx:'scrollLeft,scrollRight',
    speed:   1500,
    timeoutFn: valueFn
    });
 function valueFn(currElement, nextElement, opts, isForward){
  value = parseInt($('#duration').val());
  return value;
 }
});
...
...
<div id="image">
 <ul class="slideshow">
  <?php
  $dir = "media/images";
  if (is_dir($dir)) {
     if (($dh = opendir($dir))) {
        $i = 0;
        $name = 'FLVPlayer';
        while (($file = readdir($dh)) !== false) {
          if ($file == '.' || $file == '..')
              continue;
          $ext = explode(".", $file);
          if (@$ext[1] == null)
               continue;
     switch ($ext[1]) {
      case "jpg":
       echo "<input type="hidden" id="duration" name="val" value="3000" />
       <li><img src="media/images/" . $file . "" width="848" height="608" /></li>";
       break;
      case "flv":
       $flv = fopen("media/images/".$file, "rb");
       fseek($flv, -4, SEEK_END);
       $arr = unpack('N', fread($flv, 4));
       $last_tag_offset = $arr[1];
       fseek($flv, -($last_tag_offset + 4), SEEK_END);
       fseek($flv, 4, SEEK_CUR);
       $t0 = fread($flv, 3);
       $t1 = fread($flv, 1);
       $arr = unpack('N', $t1 . $t0);
       $milliseconds_duration = $arr[1];
       $milliseconds_duration;
$html = <<<HTML
                <input type="hidden" id="duration" value="{$milliseconds_duration}" />
                <li>
                <div id="container{$i}">Loading the player ...</div>
                <script type="text/javascript">
                                                               jwplayer("container{$i}").setup({
 flashplayer: "js/player.swf",
 file: "media/images/{$file}",
 height: 608,
 width: 848,
 "controlbar.idlehide": true,
 icons: false,
 events: {
     onReady: function() { this.play(); }
  }
 });
 </script>
</li>  
HTML;
 echo $html;
 $i++;
 break;
 case "txt":
          $myFile = "media/images/" . $file;
          $fh = fopen($myFile, 'r');
          $theData = fread($fh, filesize($myFile));
          fclose($fh);
          echo "<li>" . $theData . "</li>";
          break;
   }
  }
 }
closedir($dh);
}
?>

PHP代码只是遍历一个目录，查找文件并回显FLV、图像或文本的适当HTML代码。如果我使用一个固定的超时值，那么其他一切都可以正常工作。

看起来您正在将许多图像和视频输出到单个页面上，但是，它们都具有相同的id - duration. id必须是唯一的。否则这一行

value = parseInt($('#duration').val());

将获取第一个具有该id的元素并获取其值。也许你应该考虑使用html5 data属性来保存视频长度。

<div id="item1" data-length="3000"></div>
var time = $('currElement').attr('data-length');

或者你需要给隐藏元素一个唯一的id，并以另一种方式获取它们

相关内容

最新更新

热门标签：