Remove video navigation flickering from video gallery

Question

i just build a video gallery

Here is the link to the video gallery

http://www.braddockinfotech.com/demo/dvnonline/vod1/

Two issues : :

1) While navigating through the gallery using up and down arrow keys there is kind of video jump or flicker.how to remove that

2)Unequal extra spaces before and after the first and last video in gallery.

Here is the html code

    <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>

Here is the javascript code..

 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();
                 }
             }
         }
     }
 }

Check your `MoveToDirection('Down');` function. See how it works. — user1477388, Feb 05 '13 at 14:51

score 0 · Answer 1 · answered Feb 05 '13 at 15:07

The reason, I believe, the images flicker is because they aren't loaded until the button is clicked.

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++;
         }
     }

When the view is scrolled up or down, the list regenerates, and the images are loaded.

You can prevent the flicker if you preload the images.

You can do this by preloading all of the images at once or by loading the images while showing a "loading (please wait) graphic." Please see this http://perishablepress.com/3-ways-preload-images-css-javascript-ajax/

i think u misunderstood the question.while we navigate using arrow keys the videos move downwards towards the gallery not on click of button. — iJade, Feb 05 '13 at 15:12
Yes, the arrow keys are a button, too. When you click the arrow keys (buttons) new images are loaded. When you load these images (which are not already stored in temp cache) the images appear to "flicker." To prevent this, you can preload the images. Does that make sense? — user1477388, Feb 05 '13 at 15:13

Remove video navigation flickering from video gallery

1 Answers1