Question

功能性：

点击后，我将以下视频设置为全屏模式。因此，初始视频Container Css样式为：<div id="Journal_Video" style="position:absolute; left: 120px; top: 180px;" class="jp-video jp-video-750p" role="application" aria-label="media player"></div>。因此，当用户点击时，视频将扩展为全屏，当用户再次点击视频时，视频将恢复为原始大小和样式。

做了什么：

我设法将视频设置为展开并恢复原始屏幕大小。

我已附上以下代码供您阅读：

<script>
//Journal Video
$("#Journal_Video").jPlayer({
ready: function() {
var self = this;
var fullScreen = $(self).jPlayer("option", "fullScreen");

$(this).jPlayer("setMedia", {
  m4v: "https://www.youtube.com/embed/YE7VzlLtp-4"
}).jPlayer("play");
$(".jp-jplayer video").click(function() {

  if (fullScreen = !fullScreen) {
    $("#Journal_Video").css({
      "top": "0",
      "left": "0"
    });
    $(self).jPlayer("option", {
      "fullScreen": fullScreen
    });
  } else if (fullScreen == fullScreen) {
    $(self).jPlayer("option", {
      "fullScreen": false
    });
    $("#Journal_Video").css({
      "top": "180",
      "left": "120"
    });
  }

  });
   },
  swfPath: "javascript",
  supplied: "webmv, ogv, m4v",
  loop: true,
  useStateClassSkin: true,
  autoBlur: false,
  smoothPlayBar: true,
  keyEnabled: true,
  sizeFull: {
    top: 0,
    cssClass: "jp-video-750p",
  },
  size: {
    width: 1200,
    height: 750
  }
  });
  $("#Journal_Video").show();
  </script>

  <div id="Journal_Video" style="position:absolute; left: 120px; top: 180px;" class="jp-video jp-video-750p" role="application" aria-label="media player"></div>

问题：

当用户点击fullScreen视频返回原始视频时。

的Css样式

$("#Journal_Video").css({
  "top": "180",
  "left": "120"
});

<{1}}处的

未被调用。

因此，我不明白为什么我可以在展开屏幕时设置CSS设置，但是在关闭展开的全屏时无法设置Css样式。

请帮忙。

Answer 1

变化

else if (fullScreen == fullScreen;)

到

else if (fullScreen == fullScreen)

Answer 2

您似乎在(fullScreen = !fullScreen)中将fullScreen值设置为false，因此else条件永远不会为真。你的意思是(fullScreen !== fullScreen)？

.css（）方法未被调用，因此<div>未更新

2 个答案: