Javascript 角度2/4/5：如何在另一个元素中移动元素

在我的Angular项目中，我使用CSS将图像/视频元素移动到“stage”元素中

到目前为止，我所拥有的：

SCSS:

.stage {
  width: 400px;
  height: 300px;
  position: relative;
  overflow: hidden;
  background-color: coral
}

video {
  position: absolute;
  width: 500px;
  height: 400px;
}

<div class="stage">
  <video controls autoplay [ngStyle]="{'top': top, 'left': left">
    <source src="http://www.archive.org/download/AnimatedMechanicalArtPiecesAtMit/P1120973_512kb.mp4" type="video/mp4">
  </video>
</div>

<div class="row">
  <div class="col-1 ">
    <button type="button" class="btn btn-primary btn-tn " (click)="moveLeft()">
      Left
    </button>
  </div>
  <div class="col-1">
    <button type="button" class="btn btn-primary btn-tn " (click)="moveRight()">
      Right
    </button>
  </div>
  <div class="col-1">
    <button type="button" class="btn btn-primary btn-tn " (click)="moveUp()">
      Up
    </button>
  </div>
  <div class="col-1">
    <button type="button" class="btn btn-primary btn-tn " (click)="moveDown()">
      Down
    </button>
  </div>
</div>

l: number = 0;
t: number = 0;
left = '0px';
top = '0px';

moveUp() {
  this.t -= 5;
  this.top = this.t + 'px';
}

moveDown() {

  this.t += 5;
  this.top = this.t + 'px';

}

moveLeft() {
  this.l -= 5;
  this.left = this.l + 'px';
}

moveRight() {
  this.l += 5;
  this.left = this.l + 'px';
}

HTML:

.stage {
  width: 400px;
  height: 300px;
  position: relative;
  overflow: hidden;
  background-color: coral
}

video {
  position: absolute;
  width: 500px;
  height: 400px;
}

<div class="stage">
  <video controls autoplay [ngStyle]="{'top': top, 'left': left">
    <source src="http://www.archive.org/download/AnimatedMechanicalArtPiecesAtMit/P1120973_512kb.mp4" type="video/mp4">
  </video>
</div>

<div class="row">
  <div class="col-1 ">
    <button type="button" class="btn btn-primary btn-tn " (click)="moveLeft()">
      Left
    </button>
  </div>
  <div class="col-1">
    <button type="button" class="btn btn-primary btn-tn " (click)="moveRight()">
      Right
    </button>
  </div>
  <div class="col-1">
    <button type="button" class="btn btn-primary btn-tn " (click)="moveUp()">
      Up
    </button>
  </div>
  <div class="col-1">
    <button type="button" class="btn btn-primary btn-tn " (click)="moveDown()">
      Down
    </button>
  </div>
</div>

l: number = 0;
t: number = 0;
left = '0px';
top = '0px';

moveUp() {
  this.t -= 5;
  this.top = this.t + 'px';
}

moveDown() {

  this.t += 5;
  this.top = this.t + 'px';

}

moveLeft() {
  this.l -= 5;
  this.left = this.l + 'px';
}

moveRight() {
  this.l += 5;
  this.left = this.l + 'px';
}

结果：图像/视频移动并留下空白

我的问题：当向左、向右、向上、向下移动时，如何使图像/视频保持在舞台内

例如，当图像到达舞台的顶部和左侧边缘（黄色）时，图像（蓝色）将保持不变

---

希望我的解释清楚。感谢您的建议。

您的示例视频元素比舞台大，因此您无法将整个视频保留在舞台内。你能详细说明视频是如何在舞台内移动的吗？是的，比舞台大的视频元素是为了展示专注于视频不同区域的想法。只显示舞台内的视频区域，隐藏视频的剩余部分（舞台外）（有关更多详细信息，请参阅SCS）。