HTML and CSS Reference
The custom video player shown in Figure 3-7 provides a drop-down list of video files that can be
played. This list resides in a SQL Server database and is fetched using jQuery $.ajax() method. You can
play, pause, or stop a video using the Play and Stop buttons. (A single button is used to play as well as
pause a video.) The playback speed and volume can be set using the respective range input controls. Once
a video starts playing, the overall percentage of progress (%) is shown along with the video's total duration.
The player also includes a poster that tells the user to select a video file from the drop-down list.
The HTML5 markup for the custom video player resides in an MVC view ( Index.aspx ) and is shown in
Listing 3-9. For the sake of clarity, Listing 3-9 shows only the markup required for the video player rather
than the complete view.
Listing 3-9. HTML Markup for the Custom Video Player
Select Video To Play : <br />
<select id="ddlPlayList" class="DropDownList">
<video id="videoPlayer" controls class="Video" poster="/content/media/poster.jpg" ></video>
<span id="spanDuration" class="Duration"></span><br />
<input type="button" id="btnPlayPause" value="Play" class="Button" />
<input type="button" id="btnStop" value="Stop" class="Button"/>
<span>Playback Speed (1-5) :</span>
<input type="range" id="rngPlaybackRate" value="1" step="1" min="1" max="5" class="Range"/>
<span>Volume (0-1) :</span>
<input type="range" id="rngVolume" value="1" step="0.1" min="0" max="1" class="Range"/>
This HTML5 markup consists of six <div> elements. The first <div> contains a <select> element that
displays a list of videos that can be played.
The second <div> element contains an HTML5 <video> tag. The id attribute of the <video> element is
set to videoPlayer , and its poster attribute points to the poster.jpg file. The image indicated by the poster
property is displayed initially when no file is yet being played in the videoPlayer . Notice that the src
attribute of the <video> tag isn't set because the actual video URL is selected from the drop-down list. Even
though the markup sets the controls attribute, you can skip it if you wish because you control the play and
pause operations programmatically.