Video Player JavaScript和HTML的重复问题

Question

我正在使用jPlayer来显示视频。它通过Javascript显示在页面上，在显示之前评估浏览器。当页面有单个视频时，它显示正常，但是当我想要显示两个视频时，它显示很奇怪。它的作用是当我显示两个视频时，它播放/暂停第二个视频，当我播放/暂停第一个视频时。所以，简而言之，它不播放第二个视频，但在播放第一个视频时播放两个视频。

为了显示第二个视频，我复制了第一个视频的代码，这就是为什么会发生这种情况的原因，但我确实更改了所有ID，以确保它有自己的参数。

你能看看我错过了吗？

JS代码： -

jQuery(document).ready(function() {

    if($("#jquery_jplayer_1")[0] && jplayerparameters && 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] && jplayerparameters2 && 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"
                    }
                );
              }
          }
      })



});

下面是HTML： -

<script type="text/javascript">

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



</script>
<h1 class="entry-title">Video interviews</h1>
<p>View interviews with T-30 participants. More videos to come soon...</p>
<h3 style="border: none">What risks do you see for the semiconductor industry?</h3>

<div class="media-container" style="width: 544px; border: none">
        <div id="jp_container_1" class="jp-video jp-video-330p" style="height: 306px;" >
                <div class="jp-type-single">
                        <div id="jquery_jplayer_1" class="jp-jplayer"></div>
                        <div class="jp-gui">
                                <div class="spinner"></div>
                                <div class="jp-video-play"> <a href="javascript:;" class="jp-video-play-icon" tabindex="1">play</a> </div>
                                <div class="jp-interface">
                                        <div class="jp-progress">
                                                <div class="jp-seek-bar">
                                                        <div class="jp-play-bar"></div>
                                                </div>
                                        </div>
                                        <div class="jp-current-time"></div>
                                        <div class="jp-duration"></div>
                                        <div class="jp-controls-holder">
                                                <ul class="jp-controls">
                                                        <li><a href="javascript:;" class="jp-play" tabindex="1">play</a></li>
                                                        <li><a href="javascript:;" class="jp-pause" tabindex="1">pause</a></li>
                                                        <li><a href="javascript:;" class="jp-stop" tabindex="1">stop</a></li>
                                                </ul>
                                        </div>
                                </div>
                        </div>
                </div>
        </div>
        <div id="backup-video">
                <p id="StrobeMediaPlayback"> </p>
        </div>
</div>

<br />

<div class="media-container" style="width: 544px; border: none">
        <div id="jp_container_2" class="jp-video jp-video-330p" style="height: 306px;" >
                <div class="jp-type-single">
                        <div id="jquery_jplayer_2" class="jp-jplayer"></div>
                        <div class="jp-gui">
                                <div class="spinner"></div>
                                <div class="jp-video-play"> <a href="javascript:;" class="jp-video-play-icon" tabindex="1">play</a> </div>
                                <div class="jp-interface">
                                        <div class="jp-progress">
                                                <div class="jp-seek-bar">
                                                        <div class="jp-play-bar"></div>
                                                </div>
                                        </div>
                                        <div class="jp-current-time"></div>
                                        <div class="jp-duration"></div>
                                        <div class="jp-controls-holder">
                                                <ul class="jp-controls">
                                                        <li><a href="javascript:;" class="jp-play" tabindex="1">play</a></li>
                                                        <li><a href="javascript:;" class="jp-pause" tabindex="1">pause</a></li>
                                                        <li><a href="javascript:;" class="jp-stop" tabindex="1">stop</a></li>
                                                </ul>
                                        </div>
                                </div>
                        </div>
                </div>
        </div>
        <div id="backup-video2">
                <p id="StrobeMediaPlayback2"> </p>
        </div>
</div>

<div style="clear:both"></div>