2015
Lynda
Joseph Labrecque
1:22
English

HTML video doesn't require plugins for playback, but the default experience differs drastically across browsers. Using a combination of Bootstrap and AngularJS, you can develop a responsive video app that performs and appears great in all browsers—unifying the user experience and allowing custom functionality, such as playlists and full-screen playback. Join Joseph Labrecque for this start-to-finish course that guides you through every step in the process, from installing the software to employing a variety of foundational AngularJS directives. All you need to bring is the video and the time.

Introduction
Welcome
What you should know before taking this course
Using the exercise files
1. Setting Up the Project
Acquiring Bootstrap, jQuery, and a dark theme
Acquiring AngularJS and Animate.css
Creating a working project in Brackets
2. HTML Video Playback
Creating a video element
Making it responsive
Building simple controls
Basic JavaScript interactions
3. AngularJS Integration
Initializing our AngularJS app
Setting up the AngularJS controller
Preparing our AngularJS app properties
Binding dynamic properties to our app
4. Playback Customization with AngularJS
Layout and display
Playback and mute controls
Time display
Formatting time and setting interval
Playback progress meters
Seeking the playback
Scrubbing the playback
Enabling Fullscreen
5. Advanced Features
Building a details panel
Playlist data formation
Rendering playlist selections
Animating player controls
Conclusion
Next steps

Download File Size:527.5 MB

---