From the course: Angular: Animations
Video playback overview - Angular Tutorial
From the course: Angular: Animations
Video playback overview
- [Instructor] Now that we understand how Angular animations are used within a new project, it would be beneficial to see how an existing project can be modified to make use of this functionality. For this purpose, we'll use a slightly update version of the Angular Video Playback application from my course Building Custom HTML5 Video Playback with Angular 2. The only difference in this project, is that has been updated to make use of Angular 4. So as you can see, we get a number of things on the screen here. We have a title, we have this big play button. We have a toolbar with a scrubber, volume, playback, time readout, and so forth. So if we go ahead and play this, we can see the present video. When we pause it, then the video pauses. We've got full screen capability and we also have this little video details panel where it provides a description of the video and you're actually able to go through and click to play other videos. And that's the basics of this current Angular application which does not use Angular animations at this time. We're going to go ahead and fix that though.
Practice while you learn with exercise files
Download the files the instructor uses to teach the course. Follow along and learn by watching, listening and practicing.
Contents
-
-
-
-
-
-
-
Video playback overview1m 18s
-
Adding animation packages3m 31s
-
Old animation cleanup1m 51s
-
Creating Angular components2m 57s
-
Component instantiation and data value translation4m 3s
-
Animating the video title2m 58s
-
Animating the playback overlay3m 6s
-
Providing playlist motion3m 31s
-
Challenge: Transition the toolbar with a fade28s
-
Solution: Transition the toolbar with a fade3m 21s
-
-
-