HTML and CSS Reference
In-Depth Information
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.
HTML5 Markup
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
<div class="PlayList">
Select Video To Play : <br />
<select id="ddlPlayList" class="DropDownList">
</select>
</div>
<div>
<video id="videoPlayer" controls class="Video" poster="/content/media/poster.jpg" ></video>
</div>
<div class="Progress">
<span id="spanDuration" class="Duration"></span><br />
<span>Progress :</span>
<span id="spanProgress"></span>
</div>
<div>
<input type="button" id="btnPlayPause" value="Play" class="Button" />
<input type="button" id="btnStop" value="Stop" class="Button"/>
</div>
<br />
<div class="Speed">
<span>Playback Speed (1-5) :</span>
<input type="range" id="rngPlaybackRate" value="1" step="1" min="1" max="5" class="Range"/>
</div>
<div class="Volume">
<span>Volume (0-1) :</span>
<input type="range" id="rngVolume" value="1" step="0.1" min="0" max="1" class="Range"/>
</div>
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.
