HTML and CSS Reference
In-Depth Information
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
