Javascript 从视频库中删除闪烁的视频导航
我刚建了一个视频库 这是视频库的链接Javascript 从视频库中删除闪烁的视频导航,javascript,html,css,gallery,Javascript,Html,Css,Gallery,我刚建了一个视频库 这是视频库的链接 http://www.braddockinfotech.com/demo/dvnonline/vod1/ 两个问题: 1) 使用上下箭头键在多媒体资料中导航时,会出现某种视频跳跃或闪烁。如何消除这种情况 2) 库中第一个和最后一个视频前后的额外空间不相等 下面是html代码 <body onkeydown="HandleKeyDown(event);"> <table cellpadding="0px" cellspaci
http://www.braddockinfotech.com/demo/dvnonline/vod1/
两个问题:
1) 使用上下箭头键在多媒体资料中导航时,会出现某种视频跳跃或闪烁。如何消除这种情况
2) 库中第一个和最后一个视频前后的额外空间不相等
下面是html代码
<body onkeydown="HandleKeyDown(event);">
<table cellpadding="0px" cellspacing="0px" border="0px" class="sitewidth">
<tr>
<td align="left" valign="top" style="width:800px;">
<div id='divVideoPlayer'></div>
</td>
<td align="center" style="width:140px;">
<div id="divPlaylistContainer">
<div id="playlistNavPrev">
<a id="imgNavPrev" onclick="MoveToDirection('Up');"><span class="arrow"> </span>
</a>
</div>
<div id="divPlaylist">
<!--playlist-->
<div id="spanSlider" style='top:0px; position:relative;'>
<ul id="ulSlider">
<?php $index=1 ; $firstVideoUrl='' ; $firstImageUrl='' ; $videoDetails=G
etVideoDetails(); echo "<script> var siteUrl = '".$siteUrl.
"' </script>"; while ($row=m ysql_fetch_array($videoDetails)) { echo
"<script>video[".$index. "]='";echo $row[3]. "';</script>"; echo "<script>image[".$index.
"]='";echo $row[2]. "';</script>"; //echo "<script>title[".$index. "]='";echo
$row[1]. "';</script>"; echo "<script>title[".$index. "]='";echo str_replace(
"'", "\'",$row[1]). "';</script>"; // 0 - id , 1 - Title , 2- ImageUrl, 3
- VideoUrl //echo $row[0].$row[1].$row[2].$row[3]. "<br/>"; //echo
"<li id='liButton_".$index. "'><a onclick=\"ShowVideo( '".$index."');\
"><img id='ImageButton_".$index. "' title='".$row[1]. "' alt='".$row[1]. "' src=".$siteUrl.
"timthumb/timthumb.php?src=".$row[2]. "&h=54&w=109&zc=1&a=c></a></li>"; $index++;
} ?>
</ul>
</div>
</div>
<div id="playlistNavNxt">
<a id="imgNavNext" onclick="MoveToDirection('Down');"><span class="arrow"> </span>
</a>
</div>
</div>
</td>
</table>
</body>
我认为,图像闪烁的原因是,在单击按钮之前,图像不会被加载
for (var i = firstIndex; i <= lastIndex; i++) {
if (firstIndex >= 1 && lastIndex < title.length) {
listHtml += "<li id='liButton_" + rowNo + "'><a onclick=\"ShowVideo('" + i + "');\"><img id='ImageButton_" + i + "' title=\"" + title[i] + "\" alt='" + title[i] + "' src=" + siteUrl + "timthumb/timthumb.php?src=" + image[(i)] + "&h=54&w=109&zc=1&a=c></a></li>";
rowNo++;
}
}
for(变量i=firstIndex;i=1&&lastIndex listHtml+=“检查您的MoveToDirection('Down'))
函数。看看它是如何工作的。我不明白。请你清楚地指出我想你误解了这个问题。当我们使用箭头键导航时,视频会向下移动到多媒体资料中,而不是单击按钮。是的,箭头键也是一个按钮。当你单击箭头键(按钮)时已加载新图像。当您加载这些图像(尚未存储在临时缓存中)时,图像显示为“闪烁”。为防止出现这种情况,您可以预加载图像。这有意义吗?
for (var i = firstIndex; i <= lastIndex; i++) {
if (firstIndex >= 1 && lastIndex < title.length) {
listHtml += "<li id='liButton_" + rowNo + "'><a onclick=\"ShowVideo('" + i + "');\"><img id='ImageButton_" + i + "' title=\"" + title[i] + "\" alt='" + title[i] + "' src=" + siteUrl + "timthumb/timthumb.php?src=" + image[(i)] + "&h=54&w=109&zc=1&a=c></a></li>";
rowNo++;
}
}