Join Joseph Labrecque for an in-depth discussion in this video Layout and display, part of Building Custom HTML5 Video Playback with AngularJS 1.
We'll now setup some layout and UI elements…using HTML and CSS.…When dealing with these items,…we will attempt to leverage Bootstrap as much as possible.…So the first thing we want to do is to create a container…that's going to contain all the elements of our player.…So to do that we'll create a new div element here,…and we'll give it an id of "fullPlayer".…We'll also go ahead and add some classes to this.…So, one class that we'll set is something…we haven't created yet, but we will momentarily.…
And, that class is called "unselectable".…This is going to make it so that…a user can not select any of the elements with the mouse…inside of our video playback.…The other one is a specific angular class called "ng-cloak".…What ng-cloak does, is it makes sure that…none of this stuff is visible until angular…is completely loaded in and running.…So, it's sort of like a safe guard…so they don't see any partial elements or flashing things…before the angular application actually loads.…
I'm going to remove this ending div here,…
- 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
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.