HTML and CSS Reference
The third <div> element shows the total duration of the video and a progress indicator specifying the
percentage of the video already played.
The fourth <div> element holds two buttons: Play/Pause and Stop. btnPlayPause toggles between Play
and Pause modes.
The fifth and sixth <div> elements display a range selector for video playback rate and volume. Notice
that both <input> elements representing the range selectors have their type attribute set to range . (You
learn about several new <input> types available in HTML5 in Chapter 5.) The min and max attributes of
these range selectors indicate the minimum value and maximum value that can be selected. The step
attribute indicates a step by which a range can be incremented or decremented.
The CSS classes used by the Index.aspx view reside in the application's Site.css file. For the sake of
reducing clutter, the CSS classes aren't shown here.
SQL Server Database and Entity Framework Data Model
The application stores a list of videos that can be played in a SQL Server Express database ( VideoDb.mdf ).
VideoDb consists of a single table ( Videos ) that stores the titles and URLs of video files. Figure 3-8 shows the
schema of the Videos table in Server Explorer.
Figure 3-8. Schema of the Videos table
To represent the Videos table at the code level and get data out of this table, you use an Entity
Framework data model. The data model resides in the Models folder and looks like Figure 3-9.
Figure 3-9. Entity Framework data model class for the Videos table