在 angular/cli V-11.2.5 项目中，我使用的是 angular2gridster V-11.0.0。
如下图所示，我的网格单元格包含纵横比为 16/9 的视频：
以下是我的 HTML：
<ngx-gridster [options]="gridsterOptions" [draggableOptions]="gridsterDraggableOptions" (reflow)="onReflow($event)" (optionsChange)="optionsChange($event)" #gridster1 class="dashboard">
<ngx-gridster-item *ngFor="let widget of widgets; let indx = index" #itemComp [options]="itemOptions" [dragAndDrop]="widget.dragAndDrop" [resizable]="widget.resizable" [(x)]="widget.x" [(y)]="widget.y" [(xSm)]="widget.xSm" [(ySm)]="widget.ySm" [(xMd)]="widget.xMd"
[(yMd)]="widget.yMd" [(xLg)]="widget.xLg" [(yLg)]="widget.yLg" [(xXl)]="widget.xXl" [(yXl)]="widget.yXl" [(w)]="widget.w" [(h)]="widget.h" [(wSm)]="widget.wSm" [(hSm)]="widget.hSm" [(wMd)]="widget.wMd" [(hMd)]="widget.hMd" [(wLg)]="widget.wLg"
[(hLg)]="widget.hLg" [(wXl)]="widget.wXl" [(hXl)]="widget.hXl" (change)="itemChange($event, gridster1)">
<div class="panel-body">
<video src="{{ widget.movieUrl }}" controls></video>
</div>
</ngx-gridster-item>
</ngx-gridster>
我的打字稿：
gridsterOptions: IGridsterOptions = {
// core configuration is default one - for smallest view. It has hidden minWidth: 0.
lanes: 4, // amount of lanes (cells) in the grid
direction: 'vertical', // floating top - vertical, left - horizontal
floating: true,
dragAndDrop: true, // enable/disable drag and drop for all items in grid
resizable: true, // enable/disable resizing by drag and drop for all items in grid
resizeHandles: {
s: true,
e: true,
se: true
},
widthHeightRatio: 1.7778, // proportion between item width and height
lines: {
visible: true,
color: '#afafaf',
width: 2
},
shrink: true,
useCSSTransforms: true,
responsiveView: true, // turn on adopting items sizes on window resize and enable responsiveOptions
responsiveDebounce: 500, // window resize debounce time
responsiveSizes: true,
responsiveToParent: true,
// List of different gridster configurations for different breakpoints.
// Each breakpoint is defined by name stored in "breakpoint" property. There is fixed set of breakpoints
// available to use with default minWidth assign to each.
// - sm: 576 - Small devices
// - md: 768 - Medium devices
// - lg: 992 - Large devices
// - xl: 1200 - Extra large
// MinWidth for each breakpoint can be overwritten like it's visible below.
// ResponsiveOptions can overwrite default configuration with any option available.
responsiveOptions: [
{
breakpoint: 'sm',
// minWidth: 480,
lanes: 3
},
{
breakpoint: 'md',
minWidth: 768,
lanes: 4
},
{
breakpoint: 'lg',
minWidth: 1250,
lanes: 6
},
{
breakpoint: 'xl',
minWidth: 1800,
lanes: 8
}
]
};
和我的 CSS：
.panel-body {
overflow: hidden;
padding: 0 10px 10px;
position: fixed;
top: 0px;
bottom: 0;
left: 0;
right: 0;
// height: calc(100% - 100px);
}
.panel-body video {
width: 100%;
aspect-ratio: 1.7778;
}
我想为网格中的每个单元格/电影添加一个固定高度的页眉和页脚，以显示信息和自定义控件，但这会改变网格单元格的纵横比并剪切视频。以下是我尝试过的一些事情：
<ngx-gridster [options]="gridsterOptions" [draggableOptions]="gridsterDraggableOptions" (reflow)="onReflow($event)" (optionsChange)="optionsChange($event)" #gridster1 class="dashboard">
<ngx-gridster-item *ngFor="let widget of widgets; let indx = index" #itemComp [options]="itemOptions" [dragAndDrop]="widget.dragAndDrop" [resizable]="widget.resizable" [(x)]="widget.x" [(y)]="widget.y" [(xSm)]="widget.xSm" [(ySm)]="widget.ySm" [(xMd)]="widget.xMd"
[(yMd)]="widget.yMd" [(xLg)]="widget.xLg" [(yLg)]="widget.yLg" [(xXl)]="widget.xXl" [(yXl)]="widget.yXl" [(w)]="widget.w" [(h)]="widget.h" [(wSm)]="widget.wSm" [(hSm)]="widget.hSm" [(wMd)]="widget.wMd" [(hMd)]="widget.hMd" [(wLg)]="widget.wLg"
[(hLg)]="widget.hLg" [(wXl)]="widget.wXl" [(hXl)]="widget.hXl" (change)="itemChange($event, gridster1)">
<div class="panel-heading" [ngStyle]="{'backgroundColor': widget.colour}">
<div class="card-header d-flex" [ngStyle]="{'backgroundColor': widget.colour}">
<i class="fa fa-film p-2"></i>
<div class="p-2">{{ widget.name }}</div>
<div class="ml-auto p-2">{{ widget.camera }}:{{ widget.variable }}</div>
</div>
</div>
<div class="panel-body">
<video src="{{ widget.movieUrl }}" controls></video>
</div>
<footer class="bottom d-flex">
<div id="video-progressbar">
<input #seekBar id="seekBar" class="slider" type="range" value="0" (input)="seekerSetTime()" (mousedown)="seekerMouseDown()" (mouseup)="seekerMouseUp()">
</div>
<div class="video-controls time-segment p-2">
<button class="btn-control btn-"><span class="fa fa-undo"></span></button>
<button class="btn-control btn-step-backward"><span
class="fa fa-step-backward"></span></button>
<button class="btn-control btn-play" (click)="playMovie(widget)"><span
class="fa fa-play"></span></button>
<button class="btn-control btn-step-forward"><span
class="fa fa-step-forward"></span></button>
<button class="btn-control btn-reset" hidden><span class="fa fa-undo"></span></button>
</div>
<div id="frames-indicator" class="ml-auto p-2">
<span id="seekBarLabel">Frame {{ moviesFrames.current }}/{{ moviesFrames.total }}</span>
</div>
</footer>
</ngx-gridster-item>
</ngx-gridster>
但是结果有点乱，你能帮忙吗？
