Перейти к содержанию

Video Player component

Description

The Video Player component is an adaptive video player developed using Angular, which provides a user—friendly interface for watching videos. The component includes controls for playback, volume, speed, fullscreen mode, and progress. It also supports downloading videos from a folder and displaying thumbnails of video files as a slider.

Functionality

  • ** Playback control:**
  • Play/pause the video.

  • Rewind the video using the progress bar.

  • ** Sound control:**

  • Adjust the volume using the slider.

  • Turn on/off the sound.

  • Setting the playback speed:**

  • Select the playback speed (0.5x, 1x, 1.5 x, 2x).

  • Full-screen mode:**

  • The ability to switch the video to full-screen mode.

  • Slider with thumbnails:

  • Displays a list of videos with thumbnails.
  • The ability to select videos using the slider.

  • Automatic thumbnail creation for uploaded videos.

  • ** Video Download:**

  • Support for downloading videos from a local folder.

HTML structure

Basic elements:

  1. Video element

  2. "

  3. ** Playback control buttons**

  4. Play/pause button ("playPauseBtn").
  5. The playback progress slider (`ProgressBar').

  6. Display the current time and total duration.

  7. Sound control

  8. The sound on/off button ("muteBtn").

  9. Volume control.

  10. ** Speed setting**

  11. A button to select the playback speed (`speedBtn').

  12. Full-screen mode.

  13. A button to switch to full-screen mode ("fullScreenBtn").

  14. Slider with video

  15. A list of videos with thumbnails ("video list").
  16. Navigation support ("forward" and "back" buttons).

  17. A field for uploading videos from a folder.

  18. Folder upload button

  19. A field for selecting a folder with video files: `html <input type="file" webkitdirectory (edit)="handleFolderSelection($event)" />
  20. All uploaded videos are automatically added to the list and thumbnails are generated.

The main methods of operation of the component

Video Management

  • playPauseBtn: Enables or pauses video playback.
  • "Progress bar": Controls the playback time (rewind).
  • setSpeed(speed: number): Changes the video playback speed.
  • `Edit Video': Downloads and plays the selected video.

Sound control

  • "Volume Control": Changes the volume.
  • muteBtn: Turn on/off the sound.

Full-screen mode Control

  • "fullScreenBtn": Enables or disables full-screen mode.

Working with thumbnails and uploading

  • generateThumbnail(videoUrl: string): Promise<string>: generates a thumbnail for the video (the first frame at the 5th second).
  • handleFolderSelection(event: any): Controls folder selection, creates a list of videos with thumbnails.

Display controls

  • `showControls()": Displays the controls when hovering over the video.
  • "hideControls()": Hides controls when moving the cursor.