title: Video Player duplication issue with JavaScript and HTML
body: <p>I am using a jPlayer to show Video. It is shown on the page through a Javascript that assesses the browser before showing it. When the page has single Video, it shows fine, but when I want two videos to be shows, it shows weirdly. What it does is that when I show both the videos, it plays/pause the second video, when I play/pause the first video. So, in short, It doesn't play the second video, but plays both videos when I play the first video.</p>
  
  <p>To show second video, I copied the first video's code and that is the reason why this is happening, but I did change all the IDs to make sure that it has it's own parameters.</p>
  
  <p>Could you have a look to see what I am missing?</p>
  
  <p>JS Code:-</p>
  
  <pre><code>jQuery(document).ready(function() {
  
      if($("#jquery_jplayer_1")[0] &amp;&amp; jplayerparameters &amp;&amp; videoparameters) {
  
        $("#jquery_jplayer_1").jPlayer({
            ready: function () {
                $(this).jPlayer("setMedia", {
                    m4v: jplayerparameters.m4v, 
                  flv: videoparameters.src, 
                    poster: jplayerparameters.poster
                });
            },
            swfPath: "files/flv",
            solution:"flash,html",
            supplied: 'flv, m4v',
  
            size: {
                width: jplayerparameters.width || "544px",
                height: jplayerparameters.height || "308px",
                cssClass: "jp-video"
            },
  
            canplay: function() { $("#jquery_jplayer_1").jPlayer("play") },
  
            error: function (event) { 
                if (event.jPlayer.error.type == "e_no_solution") {
                    $("#backup-video").show();
                    $("#jp_container_1").hide();
                    swfobject.embedSWF(
                      "https://path/video/StrobeMediaPlayback.swf"
                      , "StrobeMediaPlayback"
                      , videoparameters.width || 544
                      , videoparameters.height || 308
                      , "0.0.0"
                      , "expressInstall.swf"
                      , videoparameters
                      , {
                          allowFullScreen: "true",
                          allowscriptaccess:'always',
                          wmode: "transparent"
                      }
                      , {
                          name: "StrobeMediaPlayback"
                      }
                  );
                }
            }
        })
  
  
      }
  
  
  
      /* Second Video Parameters*/
  
      if($("#jquery_jplayer_2")[0] &amp;&amp; jplayerparameters2 &amp;&amp; videoparameters2) { 
        $("#jquery_jplayer_2").jPlayer({
            ready: function () {
                $(this).jPlayer("setMedia", {
                    m4v: jplayerparameters2.m4v, 
                  flv: videoparameters2.src, 
                    poster: jplayerparameters2.poster
                });
            },
            swfPath: "files/flv",
            solution:"flash,html",
            supplied: 'flv, m4v',
  
            size: {
                width: jplayerparameters2.width || "544px",
                height: jplayerparameters2.height || "308px",
                cssClass: "jp-video"
            },
  
            canplay: function() { $("#jquery_jplayer_2").jPlayer("play") },
  
            error: function (event) { 
                if (event.jPlayer.error.type == "e_no_solution") {
                    $("#backup-video2").show();
                    $("#jp_container_2").hide();
                    swfobject.embedSWF(
                      "https://path/video/StrobeMediaPlayback.swf"
                      , "StrobeMediaPlayback"
                      , videoparameters2.width || 544
                      , videoparameters2.height || 308
                      , "0.0.0"
                      , "expressInstall.swf"
                      , videoparameters2
                      , {
                          allowFullScreen: "true",
                          allowscriptaccess:'always',
                          wmode: "transparent"
                      }
                      , {
                          name: "StrobeMediaPlayback"
                      }
                  );
                }
            }
        })
  
  
  
  });
  </code></pre>
  
  <p>Below is the HTML:-</p>
  
  <pre><code>&lt;script type="text/javascript"&gt;
  
      var videoparameters = { 
          src: "https://path/uploads/videos/risks.flv",         
          autoPlay: "true",       
          verbose: true, 
          controlBarAutoHide: "true", 
          controlBarPosition: "bottom", 
                      width: 544,
                      height: 308
      };
      var jplayerparameters = { 
          m4v: "https://path/uploads/videos/risks.m4v",
                      width: '544px',
                      height: '308px',
                      poster: 'https://path/uploads/images/risks-video-cover.jpg'
      };
  
  
      var videoparameters2 = { 
          src: "https://path/uploads/videos/Periscope.flv",         
          autoPlay: "true",       
          verbose: true, 
          controlBarAutoHide: "true", 
          controlBarPosition: "bottom", 
                      width: 544,
                      height: 308
      };
      var jplayerparameters2 = { 
          m4v: "https:/path/uploads/videos/Periscope.m4v",
                      width: '544px',
                      height: '308px',
                      poster: 'https://path/uploads/images/video-cover-1.jpg'
      };
  
  
  
  &lt;/script&gt;
  &lt;h1 class="entry-title"&gt;Video interviews&lt;/h1&gt;
  &lt;p&gt;View interviews with T-30 participants. More videos to come soon...&lt;/p&gt;
  &lt;h3 style="border: none"&gt;What risks do you see for the semiconductor industry?&lt;/h3&gt;
  
  &lt;div class="media-container" style="width: 544px; border: none"&gt;
          &lt;div id="jp_container_1" class="jp-video jp-video-330p" style="height: 306px;" &gt;
                  &lt;div class="jp-type-single"&gt;
                          &lt;div id="jquery_jplayer_1" class="jp-jplayer"&gt;&lt;/div&gt;
                          &lt;div class="jp-gui"&gt;
                                  &lt;div class="spinner"&gt;&lt;/div&gt;
                                  &lt;div class="jp-video-play"&gt; &lt;a href="javascript:;" class="jp-video-play-icon" tabindex="1"&gt;play&lt;/a&gt; &lt;/div&gt;
                                  &lt;div class="jp-interface"&gt;
                                          &lt;div class="jp-progress"&gt;
                                                  &lt;div class="jp-seek-bar"&gt;
                                                          &lt;div class="jp-play-bar"&gt;&lt;/div&gt;
                                                  &lt;/div&gt;
                                          &lt;/div&gt;
                                          &lt;div class="jp-current-time"&gt;&lt;/div&gt;
                                          &lt;div class="jp-duration"&gt;&lt;/div&gt;
                                          &lt;div class="jp-controls-holder"&gt;
                                                  &lt;ul class="jp-controls"&gt;
                                                          &lt;li&gt;&lt;a href="javascript:;" class="jp-play" tabindex="1"&gt;play&lt;/a&gt;&lt;/li&gt;
                                                          &lt;li&gt;&lt;a href="javascript:;" class="jp-pause" tabindex="1"&gt;pause&lt;/a&gt;&lt;/li&gt;
                                                          &lt;li&gt;&lt;a href="javascript:;" class="jp-stop" tabindex="1"&gt;stop&lt;/a&gt;&lt;/li&gt;
                                                  &lt;/ul&gt;
                                          &lt;/div&gt;
                                  &lt;/div&gt;
                          &lt;/div&gt;
                  &lt;/div&gt;
          &lt;/div&gt;
          &lt;div id="backup-video"&gt;
                  &lt;p id="StrobeMediaPlayback"&gt; &lt;/p&gt;
          &lt;/div&gt;
  &lt;/div&gt;
  
  &lt;br /&gt;
  
  &lt;div class="media-container" style="width: 544px; border: none"&gt;
          &lt;div id="jp_container_2" class="jp-video jp-video-330p" style="height: 306px;" &gt;
                  &lt;div class="jp-type-single"&gt;
                          &lt;div id="jquery_jplayer_2" class="jp-jplayer"&gt;&lt;/div&gt;
                          &lt;div class="jp-gui"&gt;
                                  &lt;div class="spinner"&gt;&lt;/div&gt;
                                  &lt;div class="jp-video-play"&gt; &lt;a href="javascript:;" class="jp-video-play-icon" tabindex="1"&gt;play&lt;/a&gt; &lt;/div&gt;
                                  &lt;div class="jp-interface"&gt;
                                          &lt;div class="jp-progress"&gt;
                                                  &lt;div class="jp-seek-bar"&gt;
                                                          &lt;div class="jp-play-bar"&gt;&lt;/div&gt;
                                                  &lt;/div&gt;
                                          &lt;/div&gt;
                                          &lt;div class="jp-current-time"&gt;&lt;/div&gt;
                                          &lt;div class="jp-duration"&gt;&lt;/div&gt;
                                          &lt;div class="jp-controls-holder"&gt;
                                                  &lt;ul class="jp-controls"&gt;
                                                          &lt;li&gt;&lt;a href="javascript:;" class="jp-play" tabindex="1"&gt;play&lt;/a&gt;&lt;/li&gt;
                                                          &lt;li&gt;&lt;a href="javascript:;" class="jp-pause" tabindex="1"&gt;pause&lt;/a&gt;&lt;/li&gt;
                                                          &lt;li&gt;&lt;a href="javascript:;" class="jp-stop" tabindex="1"&gt;stop&lt;/a&gt;&lt;/li&gt;
                                                  &lt;/ul&gt;
                                          &lt;/div&gt;
                                  &lt;/div&gt;
                          &lt;/div&gt;
                  &lt;/div&gt;
          &lt;/div&gt;
          &lt;div id="backup-video2"&gt;
                  &lt;p id="StrobeMediaPlayback2"&gt; &lt;/p&gt;
          &lt;/div&gt;
  &lt;/div&gt;
  
  &lt;div style="clear:both"&gt;&lt;/div&gt;
  </code></pre>