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

【问题标题】：jQuery cycle plugin dynamic timeout for images and videos图像和视频的jQuery循环插件动态超时
【发布时间】：2011-11-14 22:20:51
【问题描述】：

我正在使用 jQuery Cycle 插件来旋转混合图像和 FLV 视频。对于图像，我将超时持续时间固定为 3000 毫秒，但对于视频，它基于视频长度，这就是我的问题开始的地方。我的第一个视频的时长总是：

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 代码。如果我使用固定的超时值，那么其他一切都可以正常工作。

【问题讨论】：

I am always getting the duration of my first video as... 我在座位边缘。零？您的 valueFn 函数是否返回正确的值？您隐藏的 flv 输入是否具有正确的值？
是的，它实际上是第一张幻灯片的值保持不变并且不会得到更新。所以现在我尝试将一张图片作为第一个超时为 3000 的元素，并且无论我为它们设置什么超时值，所有其他幻灯片都会得到相同的结果。
如您所见，隐藏字段已更新为视频长度 div id="image">
- 加载播放器...

标签： jquery plugins cycle

【解决方案1】：

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

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

只是要获取具有该 id 的第一个元素并获取其值。或许您应该考虑使用 html5 data attribute 来保存您的视频长度。

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

或者你需要给隐藏的元素一个唯一的ID，然后用另一种方式来获取它们。

【讨论】：

我现在得到一个未定义的值 :(
另一个想法：是否可以从 jwplayer 中暂停循环并在视频完成后恢复？
查看循环文档。 jquery.malsup.com/cycle/options.html 它记录了暂停和恢复呼叫。
感谢您的回答。我是 JavaScript 新手，如何在 jQuery 之外但在 JavaScript 中暂停循环？
终于搞定了。最好的解决方案是简单地从 jwplayer 事件处理程序中调用“暂停”和“恢复”就可以了。我喜欢 jquery、循环插件、jwplayer 和这里的好人 :)