Join Joseph Labrecque for an in-depth discussion in this video Playback progress meters, part of Building Custom HTML5 Video Playback with AngularJS 1.
- Along with out time readout,…it would also be useful to have a sort of progress bar…that users can view…to indicate the current position of the video…in a more visual and comparative way.…This will also set the groundwork…for custom seeking mechanisms,…allowing users to jump from different points in the video.…So the first thing we'll do is,…inside of our HTML,…we need to create an element…that will contain our progress bar.…So I'm going to paste in a snippet here,…and basically what we have is a parent element…called progressMeterFull,…and this is a meter that's going to stretch across…the entire screen no matter what.…
And it's going to show, basically the duration…of the entire film in a visual way.…Within there, we have the progressMeter itself,…so this progressMeter is going to grow…as time goes by in the movie,…and shrink if somebody kind of skips back…a few minutes or whatnot.…You'll notice here that I have a style attribute,…where I'm setting the width using angular data binding…to something called scrubLeft.…
- Setting up
- Creating a video element
- Making the video element responsive
- Building controls
- Setting up an AngularJS controller
- Binding properties
- Customizing the playback controls and time display
- Enabling full-screen playback and playlist support
- Using AngularJS directives and filters
Skill Level Intermediate
Up and Running with AngularJS 1with Ray Villalobos1h 20m Intermediate
Building a Mobile App with AngularJS 1 and Ionicwith Ray Villalobos3h 31m Intermediate
1. Setting Up the Project
2. HTML Video Playback
3. AngularJS Integration
4. Playback Customization with AngularJS
5. Advanced Features
- Mark as unwatched
- Mark all as unwatched
Are you sure you want to mark all the videos in this course as unwatched?
This will not affect your course history, your reports, or your certificates of completion for this course.Cancel
Take notes with your new membership!
Type in the entry box, then click Enter to save your note.
1:30Press on any video thumbnail to jump immediately to the timecode shown.
Notes are saved with you account but can also be exported as plain text, MS Word, PDF, Google Doc, or Evernote.