1<div class="flex justify-center items-center h-full p-4"> 2 <div *ngIf="videoUrl" class="max-w-xl mx-auto"> 3 <div class="relative aspect-video"> 4 <video #videoPlayer [src]="videoUrl" class="object-contain w-full h-full"> 5 Your browser does not support the video tag. 6 </video> 7 </div> 8 <div class="mt-4 flex justify-center space-x-2" [style.visibility]="videoUrl ? 'visible' : 'hidden'"> 9 <button mat-icon-button (click)="goToStart()" class="mr-2"> 10 <mat-icon>first_page</mat-icon> 11 </button> 12 <button mat-icon-button (click)="stepBackward()" class="mr-2"> 13 <mat-icon>skip_previous</mat-icon> 14 </button> 15 <button mat-icon-button (click)="togglePlayPause()" class="mr-2"> 16 <mat-icon>{{ isPlaying ? 'pause' : 'play_arrow' }}</mat-icon> 17 </button> 18 <select [(ngModel)]="playbackSpeed" (change)="setPlaybackSpeed()" class="mr-2 bg-white cursor-pointer"> 19 <option value="0.25">0.25x</option> 20 <option value="0.5">0.5x</option> 21 <option value="1">1x</option> 22 <option value="1.5">1.5x</option> 23 <option value="2">2x</option> 24 </select> 25 <button mat-icon-button (click)="stepForward()" class="mr-2"> 26 <mat-icon>skip_next</mat-icon> 27 </button> 28 <button mat-icon-button (click)="goToEnd()" class="mr-2"> 29 <mat-icon>last_page</mat-icon> 30 </button> 31 </div> 32 </div> 33 <p *ngIf="!videoUrl" class="text-center text-gray-500 mt-2">No test selected.</p> 34</div>