删除视频库中闪烁的视频导航
Remove video navigation flickering from video gallery
我刚刚建立了一个视频库
这是视频库的链接
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>
这是javascript代码。。
var video = new Array();
var image = new Array();
var title = new Array();
var noOfImagesCanShow = 6;
var selected = 1;
var slideNo = 1;
String.prototype.trim = function () {
return this.replace(/^'s+|'s+$/g, "");
};
function SetPlayList() {
var listHtml = '';
var lastIndex = slideNo * noOfImagesCanShow;
var firstIndex = (slideNo * noOfImagesCanShow) - (noOfImagesCanShow - 1);
var rowNo = 1;
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++;
}
}
document.getElementById('ulSlider').innerHTML = listHtml;
document.getElementById('liButton_1').tabIndex = 2;
document.getElementById('liButton_1').focus();
}
function ShowVideo(videoIndex) {
var streamToBeUsed = "";
var provideType = "";
if (video[videoIndex].trim().substring(0, 7) == "http://") {
streamToBeUsed = '';
provideType = "http";
} else {
streamToBeUsed = "rtmp://cp87191.edgefcs.net/ondemand/";
provideType = "rtmp";
}
var autostart = "true";
if (jwplayer("divVideoPlayer") != null) {
jwplayer("divVideoPlayer").stop();
}
jwplayer("divVideoPlayer").setup({
file: streamToBeUsed + video[videoIndex].trim(),
image: image[videoIndex],
icons: "true",
autostart: autostart,
screencolor: "black",
'width': '800',
'height': '510',
streamer: streamToBeUsed,
provider: provideType,
events: {
onBeforePlay: function () {
document.getElementById('liButton_' + videoIndex).tabIndex = '2';
document.getElementById('liButton_' + videoIndex).focus();
}
}
});
// clearing all style
var totalImages = noOfImagesCanShow;
for (var i = 1; i <= totalImages; i++) {
var imageId = (((slideNo * noOfImagesCanShow) - (noOfImagesCanShow)) + i).toString();
if (document.getElementById('liButton_' + i) != null && document.getElementById('ImageButton_' + imageId) != null) {
document.getElementById('liButton_' + i).className = 'inactiveli';
document.getElementById('ImageButton_' + imageId).className = 'inactive';
}
}
document.getElementById('liButton_' + videoIndex).className = 'activeli';
document.getElementById('ImageButton_' + (((slideNo - 1) * noOfImagesCanShow) + parseInt(videoIndex)).toString()).className = 'active';
SetButtonStatus(((slideNo - 1) * noOfImagesCanShow) + parseInt(videoIndex));
document.getElementById('liButton_' + videoIndex).tabIndex = '2';
document.getElementById('liButton_' + videoIndex).focus();
document.getElementById('divVideoPlayer').tabIndex = '-1';
}
function SetButtonStatus(imageIndex) {
if (imageIndex <= noOfImagesCanShow) {
document.getElementById('imgNavPrev').className = 'disable_up';
document.getElementById('imgNavPrev').tabIndex = '-1';
document.getElementById('imgNavNext').tabIndex = '3';
} else {
document.getElementById('imgNavPrev').className = 'enable_up';
document.getElementById('imgNavPrev').tabIndex = '1';
}
if (imageIndex > (image.length - noOfImagesCanShow)) {
document.getElementById('imgNavNext').className = 'disable_down';
document.getElementById('imgNavNext').tabIndex = '-1';
document.getElementById('imgNavPrev').tabIndex = '1';
} else {
document.getElementById('imgNavNext').className = 'enable_down';
document.getElementById('imgNavNext').tabIndex = '3';
}
}
function MoveToDirection(direction) {
if (direction == 'Down') {
if (document.getElementById('imgNavNext').className != 'disable_down') {
slideNo++;
SetButtonStatus(slideNo * noOfImagesCanShow);
SetPlayList();
var topEle = document.getElementById('liButton_1');
var nextSelImgId = topEle.getElementsByTagName("img")[0].getAttribute("id");
document.getElementById(nextSelImgId).className = 'active';
}
} else if (direction == 'Up') {
if (document.getElementById('imgNavPrev').className != 'disable_up') {
slideNo--;
SetButtonStatus(slideNo * noOfImagesCanShow);
SetPlayList();
var topEle = document.getElementById('liButton_6');
var nextSelImgId = topEle.getElementsByTagName("img")[0].getAttribute("id");
document.getElementById(nextSelImgId).className = 'active';
console.log('Setting active element ' + nextSelImgId);
document.getElementById('liButton_6').focus();
console.log('active element ' + document.activeElement.id);
}
}
}
function HandleKeyDown(ev) {
if (document.activeElement != null) {
var element = document.activeElement;
if (ev.keyCode == 13) {
/*User Pressed Enter, Handle If required*/
if (element.id == "imgNavNext" && element.className != "disable_down") {
MoveToDirection('Down');
} else if (element.id == "imgNavPrev" && element.className != "disable_up") {
MoveToDirection('Up');
} else if (element.id.indexOf("liButton_") > -1) {
var nameSections = element.id.split('_');
ShowVideo(nameSections[1]);
}
} else if (ev.keyCode == 40) {
/*User Pressed Down*/
console.log('Pressed Down');
console.log('Element Id is ' + element.id);
if (element.id.indexOf("liButton_") > -1) {
console.log('Entered liButton_ Checking....');
var nameSections = element.id.split('_');
var imgName = element.getElementsByTagName("img")[0].getAttribute("id");
var imgSection = imgName.split('_');
var nextImgToFocus = (parseInt(imgSection[1])) + 1;
var nextIndexToFocus = (parseInt(nameSections[1])) + 1;
if (document.getElementById("liButton_" + nextIndexToFocus) != null) {
document.getElementById("liButton_" + nextIndexToFocus).tabIndex = element.tabIndex;
element.tabIndex = "-1";
document.getElementById("ImageButton_" + nextImgToFocus).className = 'active';
document.getElementById("ImageButton_" + (nextImgToFocus - 1)).className = 'inactive';
document.getElementById("liButton_" + nextIndexToFocus).focus();
} else //need to focus in navNext
{
if (document.getElementById('imgNavNext').className != 'disable_down') {
console.log("Enetred need to focus navNext");
var topEle = document.getElementById('liButton_6');
var nextSelImgId = topEle.getElementsByTagName("img")[0].getAttribute("id");
document.getElementById(nextSelImgId).className = 'inactive';
document.getElementById('imgNavNext').focus();
}
}
} else {
if (element.id.indexOf("imgNavPrev") > -1) {
document.getElementById("liButton_1").focus();
}
}
} else if (ev.keyCode == 38) {
/*User Pressed Up Up*/
if (element.id.indexOf("liButton_") > -1) {
console.log('Up pressed ' + element.id);
var nameSections = element.id.split('_');
var imgName = element.getElementsByTagName("img")[0].getAttribute("id");
var imgSection = imgName.split('_');
var nextImgToFocus = (parseInt(imgSection[1])) - 1;
var nextIndexToFocus = (parseInt(nameSections[1])) - 1;
if (document.getElementById("liButton_" + nextIndexToFocus) != null) {
document.getElementById("liButton_" + nextIndexToFocus).tabIndex = element.tabIndex;
element.tabIndex = "-1";
document.getElementById("ImageButton_" + nextImgToFocus).className = 'active';
document.getElementById("ImageButton_" + (nextImgToFocus + 1)).className = 'inactive';
document.getElementById("liButton_" + nextIndexToFocus).focus();
} else //need to focus in navPrev
{
if (document.getElementById('imgNavPrev').className != 'disable_up') {
var topEle = document.getElementById('liButton_1');
var nextSelImgId = topEle.getElementsByTagName("img")[0].getAttribute("id");
document.getElementById(nextSelImgId).className = 'inactive';
document.getElementById('imgNavPrev').focus();
}
}
} else /* To handle up button from imgNavNext */
{
if (element.id.indexOf("imgNavNext") > -1) {
document.getElementById("liButton_6").focus();
}
}
}
}
}
我相信，图像闪烁的原因是因为在单击按钮之前不会加载它们。
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++;
}
}
当视图向上或向下滚动时，会重新生成列表，并加载图像。
如果预加载图像，则可以防止闪烁。
您可以通过一次预加载所有图像或在显示"加载（请等待）图形"的同时加载图像来完成此操作http://perishablepress.com/3-ways-preload-images-css-javascript-ajax/
相关文章：
- 如何检查用户在html5视频播放器中观看了完整的视频
- 删除移动视图粘性js上的粘性导航栏
- 在主页上时，我的整个导航都会突出显示
- 在javascript中添加和显示对象的随机数组中的视频
- 如何解析Brightcove视频中的视频缩略图
- 如何创建包含多个视频的视频横幅
- 在BootStrap菜单栏中为所选项目设置背景，类似于BootStrap中的父导航选项
- 将桌面上的悬停导航栏转换为触摸屏上的可点击导航栏
- 如何使用angularjs在iframe中嵌入来自数据库的视频链接
- 使我的视频标头响应
- Javascript的视频音量问题
- 我可以设置HTML5文件上传的视频长度限制吗
- 如何将缩略图链接到新页面上的视频
- 使用SeleniumWebdriver(带有Java）测试没有ID的视频
- AudioContext从blob获取数据的视频创建MediaElementSource
- 如何让iPhone用户在我的网站上观看带字幕的视频
- 如何修改此功能以获得最受欢迎的视频?(YouTube API v3）
- 缩小并更改滚动时的背景导航栏
- 由视频覆盖的引导导航栏 - 如何用不透明背景覆盖它
- 删除视频库中闪烁的视频导航
