1

我只是建立一个视频库

这是视频库的链接

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">&nbsp;</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]. "&amp;h=54&amp;w=109&amp;zc=1&amp;a=c></a></li>"; $index++;
                                } ?>
                            </ul>
                        </div>
                    </div>
                    <div id="playlistNavNxt">
                        <a id="imgNavNext" onclick="MoveToDirection('Down');"><span class="arrow">&nbsp;</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)] + "&amp;h=54&amp;w=109&amp;zc=1&amp;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();
                 }
             }
         }
     }
 }
4

1 回答 1

0

我相信,图像闪烁的原因是因为直到单击按钮才加载它们。

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)] + "&amp;h=54&amp;w=109&amp;zc=1&amp;a=c></a></li>";
             rowNo++;
         }
     }

当视图向上或向下滚动时,列表会重新生成,并加载图像。

如果您预加载图像,您可以防止闪烁。

您可以通过一次预加载所有图像或在显示“正在加载(请稍候)图形”的同时加载图像来做到这一点。请参阅此http://perishablepress.com/3-ways-preload-images-css-javascript-ajax/

于 2013-02-05T15:07:00.003 回答