从视频播放列表，响应式视频库列表中播放视频

Question

我已经使用jPlayer创建了一个视频播放内容，另外，我添加了一个视频img缩略图库，允许用户点击并查看其他视频资源。

此外，我为视频的实施设置了以下功能：

1。）主视频帧将自动播放默认视频，此视频将一直播放，直到用户选择下一个/新视频

2。）用户可以滚动浏览可滚动视频缩略图库，每个视频缩略图都有一个视频标题和简要说明。

3。）当用户选择任何新视频时，新视频将替换当前播放的视频

4。）用户可以在视频的任何位置退出视频，并将其带回视频页面，在那里他们可以选择新视频。

因此，这些是定义视频播放内容行为的以下功能。

问题：

我设法将以下功能的视频设置为feature3。在功能4处出现问题，其中当用户选择新视频时，将显示新视频，替换正在播放的当前视频，此时，用户无法退出视频。

我只能通过刷新页面或点击工具栏上的后退按钮退出视频，这是我不想要的行为。用户应该能够从正在播放的视频中退出视频。

因此，我怎么能纠正这个问题？感谢。

我附上了细读代码。

＆＃13;

＆＃13;

$("#Reading_Video").jPlayer({

  ready: function() {},
  swfPath: "javascript",
  supplied: "webmv, ogv, m4v",
  loop: true,
  fullScreen: true,
  size: {
    width: 500,
    height: 500
  }
}).bind($.jPlayer.event.play, function() { // pause other instances of player when current one play
  $(this).jPlayer("pauseOthers");
}).bind($.jPlayer.event.click, function() {
  // allow for full screen
  console.log("fullscreen")
  var video_elem = document.getElementById("Reading_Video");
  if (video_elem.requestFullscreen) {
    video_elem.requestFullscreen();
  } else if (video_elem.msRequestFullscreen) {
    video_elem.msRequestFullscreen();
  } else if (video_elem.mozRequestFullScreen) {
    video_elem.mozRequestFullScreen();
  } else if (video_elem.webkitRequestFullscreen) {
    video_elem.webkitRequestFullscreen();
  }
});
$("#Reading_Video").jPlayer("setMedia", {
  //set m4v tag to array Footprints VideoList
  m4v: "lib/video/Video_1.mp4"
}).jPlayer("play");
$("#Reading_Video").show();
}

function loadVideo(event, videoID) {
  $("#EnjoyReading_Video").loadVideoByID(videoId);
  event.preventDefault();
}

＆＃13;

.playListContainer {
  position: absolute;
  top: 180px;
  left: 1350px;
  height: 750px;
  width: 550px;
  overflow: scroll;
}
.innerScroll {
  position: absolute;
  overflow-y: scroll;
}
.playListThumb {
  position: relative;
  width: 300px;
  height: 200px;
  float: left;
  top: 25px;
  left: 0;
  overflow: hidden;
}
.playListInfo {
  position: relative;
  right: 0px;
  left: 10px;
  top: 20px;
  float: right;
  width: 250px;
  height: 230px;
  overflow: hidden;
}
.playListTitle {
  position: relative;
  font-size: 30px;
  color: #c66 !important;
  font-weight: 700;
}
.playListContent {
  position: relative;
  font-size: 20px;
  color: #000 !important;
  font-weight: 300;
}

＆＃13;

<div id="ReadingPage" align="center" style="position:absolute; width:1920px; height:1080px; background-repeat: no-repeat; display: none; z-index=2; top:0px; left:1921px; ">

  <!--Video Div-->
  <div id="Reading_Video" style="position:absolute; left: 120px; top: 180px;"></div>

  <!--Video Thumbnail-->
  <div class="playListContainer">
    <div class="innerScroll">

      <div id="Thumbnail_1" style="position:relative; width:550px; height: 250px;" data-id="1" data-type="local">
        <a href="lib/video/ReadingVideo_1.mp4" onclick="loadVsideo(event, 1)">
          <div class="playListThumb">
            <img alt src="lib/img/Thumbnail_1.png" style="opacity:1;">
          </div>
          <div class="playListInfo" align="left">
            <p>
              <span class="playListTitle"><strong>Video Title</strong></span>
              <br>
              <span class="playListContent">Video Description</span>
            </p>
          </div>
      </div>

      <div id="Thumbnail_2" style="position:relative; width:550px; height: 250px" data-id="2" data-type="local">
        <a href="lib/video/ReadingVideo_2.mp4" onclick="loadVideo(event, 2)">
          <div class="playListThumb">
            <img alt src="lib/img/Thumbnail_2.png">
          </div>
          <div class="playListInfo" align="left">
            <p>
              <span class="playListTitle"><strong>Video Title</strong></span>
              <br>
              <span class="playListContent">Video Description</span>
            </p>
          </div>
      </div>
    </div>
  </div>

＆＃13;

＆＃13;

＆＃13;