This device is not compatible.
You will learn to:
Implement dependency injection using Angular services.
Use Videogular to deal with video objects.
Integrate Tailwind with Angular to make the application responsive.
Use BehaviorSubject to keep track of the current video state.
Skills
Web Development
Front-end Development
Prerequisites
Basic understanding of Angular framework
Basic understanding of dependency injection
Familiarity with Tailwind CSS
Familiarity with the Videogular framework
Technologies
Angular
Tailwind
Project Description
We’ll create a video player application from scratch using Angular, the Videogular framework, and Tailwind CSS in this project. Videogular is an HTML5 video player that enables the addition of various video features, such as play, pause, speed control, mute, volume adjustment, and seek functionality. We will utilize these features in this project.
The application will enable users to play MP4 video files. We’ll also use dependency injection to make some functionality, like managing currently playing video, available throughout the project. The video player application will give users full control over their viewer experience. They can play or pause a video, adjust the playback speed, change the volume, and seek to any point within a video. Users will also have the option to mark videos as favorites, making it convenient for them to find and watch their preferred videos easily.
Lastly, we’ll enable users to effortlessly add or remove any video from the already provided playlists. The users can continuously play all videos from any selected playlist.
The final video player will look like this:
Project Tasks
1
Get Started
Task 0: Introduction
Task 1: Set Up the Routes
2
Display and Play Videos
Task 2: Display Videos on the Home Page
Task 3: Develop the Functions to Store the State of Current Video
Task 4: Display and Play a Single Video
Task 5: Extract and Display Similar Videos
3
Handle and Play Playlists
Task 6: Develop Functions to Handle the State of Playlists
Task 7: Add or Remove a Video from a Playlist
Task 8: Display Playlists
Task 9: Set Up Route Guard for a Single Playlist
Task 10: Handle a Single Playlist
4
Implement and Display Favorites
Task 11: Develop a Functionality to Deal with Favorites
Task 12: Implement the Favorites’ Template
Congratulations!
Relevant Courses
Use the following content to review prerequisites or explore specific concepts in detail.