Trying to Run Next Previous Button to Play Video From List Media Player Code Giving Error?

Question

i am trying to run video from list i have i use two buttons to run next previous videos from list and by default it run first one but it giving me error and i am getting confuse also so i need help to make it run let me tell its my video list code,

    <div>
<SELECT id=cancion onchange=PlayIt() size=20 name="cancion" style="width: 470; color:#C0C0C0; height:22; background-color:#000000;">
<option value=Peace1.wmv>. . Countdown</option>
<option value=Fire.wmv>. . Time Crisis 4</option>
<option value=Water.wmv>. . Need For Speed</option>
<option value=http://liamalexander.com/computing/gallery/albums/video/assessment.wmv>. . Meli's Video</option>
<option value=http://liamalexander.com/computing/gallery/albums/video/k_0001.wmv>. . Keldin's Video</option>
<option value=http://liamalexander.com/computing/gallery/albums/video/Skateboard_Tricks_Video.wmv>. . Chris's Video</option>
<option value=http://liamalexander.com/computing/gallery/albums/video/video_0001.wmv>. . Salinina's Video</option>
<option value=http://liamalexander.com/computing/gallery/albums/video/JORDAN_MOVES_23.wmv>. . Josh's Video</option>
<option value=http://liamalexander.com/computing/gallery/albums/video/robots_video_0001.wmv>. . Sam's Video</option>
<option value=http://liamalexander.com/computing/gallery/albums/video/Unexpected2.wmv>. . Unexpected</option>
<option value=http://liamalexander.com/computing/gallery/albums/video/By_brendan_wu.wmv>. . Brendan's Video</option>
<option value=http://liamalexander.com/computing/gallery/albums/video/rebecca01.wmv>. . Rebecca's Video 1</option>
<option value=http://liamalexander.com/computing/gallery/albums/video/rebecca_robots002.wmv>. . Rebecca's Video 2</option>
<option value=http://liamalexander.com/computing/gallery/albums/video/robotics_videoo_002.wmv>. . Robotics Video</option>
<option value=http://liamalexander.com/computing/gallery/albums/video/joys_01.wmv>. . The Joys of Spring</option>
</SELECT>
</div>

we have two buttons next and previous for switching video,

<button type="button" onclick="showDiv(1 - 1)">Previous</button>
<button type="button" onclick="showDiv(1 + 1)">Next</button>

now the script that will run on next or previous button,

function showDiv(which) {
var currentImage = 1;
   for(i = 0; i < 13; i++) {
      //document.getElementById("image"+i).style.display="none";
 document.getElementById("music1").innerHTML='<object id="mediaPlayer" width="470" height="400" '
+'classid="CLSID:22d6f312-b0f6-11d0-94ab-0080c74c7e95" '
+'codebase="http://activex.microsoft.com/activex/controls/mplayer/en/nsmp2inf.cab#Version=5,1,52,701" '
+'standby="Loading Microsoft Windows Media Player components..." type="application/x-oleobject">'
+'<param name="fileName" value="'+document.getElementById('cancion'+i).value+'">'
+'<param name="animationatStart" value="true">'
+'<param name="transparentatStart" value="true">'
+'<param name="autoStart" value="1">'
+'<param name="showControls" value="true">'
+'<param name="loop" value="true">'
+'<param name="ShowStatusBar" value="true">'
+'<param name="ShowPositionControls" value="true">'
+'<param name="enableContextMenu" value="1" />'
+'<param name="fullScreen" value="0" />'
+'<embed type="application/x-mplayer2" '
+'pluginspage="http://microsoft.com/windows/mediaplayer/en/download/" '
+'bgcolor="darkblue" showcontrols="true" showpositioncontrols="true" showstatusbar="true" showgotobar="true" width="470" height="400" '
+'src="'+document.getElementById('cancion'+i).value+'" autostart="true" designtimesp="5311" loop="true">'
+'</embed>'
+'</object>'
   }
   //in the next 2 lines, you make sure which isn't lower than 1, and isn't greater than the number of images
   if(which < 1) which = 1;
   if(which > 13) which = 13;
   document.getElementById("image" + which).style.display = "block";
   currentImage = which;
}

i am using three videos "Peace1" "Fire" "Water" you can use any video here you have to check this code

Hopes to listen from you soon thanks in advance

score 0 · Accepted Answer · answered Jun 11 '12 at 09:26

Here is the script you should use:

<script type="text/javascript">

       var currentTrack = 1;

       function showDiv(direction) {

             if(direction == "prev") {
                 // previous pressed
                 if(currentTrack > 1) {
                     currentTrack--;
                 }
             } else {
                 // next pressed
                 if(currentTrack < 13) {
                     currentTrack++;
                 }
             }

             document.getElementById("image" + currentTrack).style.display = "block";

             document.getElementById("music1").innerHTML='<object id="mediaPlayer" width="470" height="400" '
                    +'classid="CLSID:22d6f312-b0f6-11d0-94ab-0080c74c7e95" '
                    +'codebase="http://activex.microsoft.com/activex/controls/mplayer/en/nsmp2inf.cab#Version=5,1,52,701" '
                    +'standby="Loading Microsoft Windows Media Player components..." type="application/x-oleobject">'
                    +'<param name="fileName" value="'+document.getElementById('cancion').options[currentTrack].value+'">'
                    +'<param name="animationatStart" value="true">'
                    +'<param name="transparentatStart" value="true">'
                    +'<param name="autoStart" value="1">'
                    +'<param name="showControls" value="true">'
                    +'<param name="loop" value="true">'
                    +'<param name="ShowStatusBar" value="true">'
                    +'<param name="ShowPositionControls" value="true">'
                    +'<param name="enableContextMenu" value="1" />'
                    +'<param name="fullScreen" value="0" />'
                    +'<embed type="application/x-mplayer2" '
                    +'pluginspage="http://microsoft.com/windows/mediaplayer/en/download/" '
                    +'bgcolor="darkblue" showcontrols="true" showpositioncontrols="true" showstatusbar="true" showgotobar="true" width="470" height="400" '
                    +'src="'+document.getElementById('cancion').options[currentTrack].value+'" autostart="true" designtimesp="5311" loop="true">'
                    +'</embed>'
                    +'</object>'
       }


</script>

And the buttons changed accordingly:

<button type="button" onclick="showDiv('prev')">Previous</button>
<button type="button" onclick="showDiv('next')">Next</button>

A few things I want to tell you:
1. for attributes use "" or ''
2. don't do onclick="", bind event handlers through javascript (I've left the example the same so you can learn something searching for the answer to how you bind event handlers)

Good luck!

it is awsome it works for me but 1 think is going wrong that it plays video at the first and second position only video at position 0 is not playing ??? — Syed Raza, Jun 11 '12 at 11:14
Well, just make these changes: var currentTrack = 0; and if(currentTrack > 0) { instead of if(currentTrack > 1) { and it will also take the zero index in the drop down. I believe that is your problem. Let me know how it goes. — Angel, Jun 12 '12 at 07:04
i am successfully doing it but i wanna do it not as list i want it to be like tree view then how would it be possible ??? — Syed Raza, Jun 14 '12 at 11:26
by using this tree technique in select tag how to get option group — Syed Raza, Jun 14 '12 at 11:36

Trying to Run Next Previous Button to Play Video From List Media Player Code Giving Error?

1 Answers1