幻灯片图像,带有jquery循环的视频



我正在尝试创建带有图像和视频的幻灯片。 幻灯片正在运行,但是当视频运行时,幻灯片会转到下一张幻灯片,因为jQuery超时。我希望视频先完成,然后再转到下一张幻灯片,即使视频也需要 5 分钟才能运行。

有人可以帮助我吗?

这是剧本。.

<head>
<script src="js/jquery-1.4.4.min.js" type="text/javascript"></script>
<script src="js/jquery.cycle.all.min.js" type="text/javascript"></script>
<script type="text/javascript">
$(document).ready(function(){
$('#myslides').cycle({
    fit: 1, pause: 2
});
});
</script>


<link rel="stylesheet" href="css/style.css" type="text/css" media="screen" />
</head>
<body>
<?php
  echo " < table border=0 align=center width=1280 bgcolor=#FA9C56 CLASS='deepsea' >";
  echo "< tr height=65><td><img src=images/logo.png width=50 height=50 border=0>< /td>
  < td align=left width=100%>< font class=fakultas>< font color=#F3F60F>< strong>Fakultas Ilmu Sosial & Politik < /strong></ font>< /td>< /tr>";
  echo "< /table>";
?>
< div id="myslides">
< ?php
include "config/koneksi.php";
$tanggalku = date("Y-m-d");
$cek_query= mysql_query("SELECT * FROM pengumuman a JOIN pengumuman_detail b ON     a.id_pengumuman=b.id_pengumuman and     deadline_pengumuman > '$tanggalku'");
while ($rs=mysql_fetch_array($cek_query))
{

  echo "< table border=0 align=center width=1200>";
  echo "< tr>";
  echo "< td align=center  width=100%>";
  echo "< font class=judul><font color=#111111><strong>".$rs[judul_pengumuman]."    </strong>< /font>";
  echo "< /td>";
  echo "< /tr>";
  echo "< tr>";
  echo "< td width=1200>";  
  echo '< tr>< td>< hr class="style2">< /td>< /tr>';
  echo "< /td>";
  echo "< /tr>";
  echo "< tr>";
  if ( $rs[status]=='F')
  {
  echo "< td  align=center>";
  echo "< img src='foto/".$rs[file_upload]."'  border=2 >";
  echo "< /td>";
  }
  elseif ( $rs[status]=='V')
  {
   echo "< td  align=center>";
  ?>
        < OBJECT ID="MediaPlayer" WIDTH=320 HEIGHT=331 CLASSID="CLSID:22D6F312-B0F6-11D0-94AB-0080C74C7E95" STANDBY="Loading Windows Media Player components..." TYPE="application/x-oleobject">
        <  PARAM NAME="FileName" VALUE="video-filename.wmv">
    <  PARAM name="ShowControls" VALUE="true">
    <  param name="ShowStatusBar" value="true">
    <  PARAM name="ShowDisplay" VALUE="true">
    <  PARAM name="autostart" VALUE="true">
    <  EMBED TYPE="application/x-mplayer2" SRC="ABBG.avi" NAME="MediaPlayer" WIDTH=820 HEIGHT=451 ShowControls="0" 
    ShowStatusBar="1" ShowDisplay="1" autostart="1"> </EMBED>
    </OBJECT> 
  < ?php
        echo "< /td>";
  }
  else
  {
  echo "< td width=1200 align=center>";
  echo " ".$rs[isi_pengumuman_detail]."";
  echo "< /td>";
  }

  echo "< /tr>";

  echo "< /table>";
}
?>

</div>
您可以使用

$('#myslides').cycle('toggle');来打开和关闭幻灯片。您可以使用after: mycallback选项来检测正在显示的幻灯片是否为视频。如果是,请暂停循环,开始播放视频。

最后,您需要找到一种方法来发送即使视频完成,或者如果用户通过转到下一张幻灯片来覆盖它。在这种情况下,您再次调用$('#myslides').cycle('toggle');以重新打开幻灯片。

获取视频事件的最简单方法是使用像 jwplayer 这样支持这些事件的播放器。这对您的访客来说也会更好。

最新更新