我正在使用 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>