Displaying media from a database

There is often a requirement to deliver media content based on information held on a database. The Embedded Media tutorial discuss the techniques used for embedding media content as static, standards compliant xhtml.

These notes will discuss how to take the XHTML code and implement it within a data aware server control. For this example we will use Windows Media Video files, though the principle can be applied for any media type by using the appropriate XHTML template code.

Download a working copy of this example.


Assume we have an SQL database 'media.mdf' containing a table 'tblMovies' with the following field layout:

Field structure for table tblMovies

In this case 'MediaId' is an auto generated key field and is used to identify the media files which are held in a folder called 'media'. The original filename of each media item is held in the 'Filename' field. The 'MediaType' field is not used in this example and is set to 'wmv' for all records. The layout of the solution, with a simple 'default.aspx' home page and some sample data files is shown below:

Project layout in Solution Explorer

Basic Plan

For this example we will have a simple drop down list linked to the data table displaying the titles of the videos, and a FormView control displaying the detail of the selected video. To get started put a heading on the home page followed by a drop down list (ddlMovies) with a suitable label and a FormView control (frmMovie). For example:

Simple page layout

Linking to the database

For the DropDownList connect a data source to tblMovies, selecting just the MediaId and Title fields and choose the Title field for the data field to display in the DropDownList and the MediaId field for the data field for the value of the DropDownList. You also need to set the AutoPostBack property of the DropDownList to true.

For the FormView connect to the database using a new SQLDataSource and select all the fields. Use the 'WHERE...' button to link the MediaId filed to the ddlMovies control. You will end up with a default template for the FormView displaying each of the fields as follows:

Controls linked to the database

When you run the application you get a typical Master/Detail form as follows:

Basic master/detail form running

Modifying the FormView to display media

The basic XHTML for displaying a WMV file is:

<object type="video/x-ms-wmv" data="media/filename.WMV"
        width="320" height="260">
  <param name="src" value="media/filename.WMV" />
  <param name="autoStart" value="False" />
  <param name="showControls" value="True" />
  <p>Cannot play WMV files!</p>

The above code shows elements highlighted where they would vary from one media record to another.

In this simple example we only neeed to have an ItemTemplate for the FormView, so we can delete the automatically generated EditItemTemplate and InsertItemTemplate. We end up with:

 <asp:FormView ID="frmMovie" runat="server"
      <asp:Label ID="MediaIdLabel" runat="server" 
                 Text='<%# Eval("MediaId") %>' /><br />
      <asp:Label ID="FilenameLabel" runat="server" 
                 Text='<%# Bind("Filename") %>' /><br />
      <asp:Label ID="TitleLabel" runat="server"
                 Text='<%# Bind("Title") %>' /><br />
      <asp:Label ID="DescriptionLabel" runat="server" 
                 Text='<%# Bind("Description") %>' /><br />
      <asp:Label ID="WidthLabel" runat="server"
                 Text='<%# Bind("Width") %>' /><br />
      <asp:Label ID="HeightLabel" runat="server"
                 Text='<%# Bind("Height") %>' /><br />
      <asp:Label ID="MediaTypeLabel" runat="server"
                 Text='<%# Bind("MediaType") %>' /><br />

Note the ItemTemplate is just plain XHTML and Text interspersed with <%# Eval("fieldname") %> elements for dropping values from the database - note some use Bind("fieldname") instead of Eval(). We need to replace the template contents with our XHTML and drop the field references into the highlighted positions. We use Eval as it is simple values.

We will include the Title (as a sub-heading) and the filename and description in a paragraph too, just to make the layout a little more realistic. We get:

<h2><%# Eval("Title") %></h2>
<p>Filename: <%# Eval("Filename") %>
             - <%# Eval("Description") %></p>
<object type="video/x-ms-wmv"
        data='media/<%# Eval("MediaId") %>.wmv'
 width='<%# Eval("Width") %>' height='<%# Eval("Height") %>'>
 <param name="src" value='media/<%# Eval("MediaId") %>.wmv' />
 <param name="autoStart" value="False" />
 <param name="showControls" value="True" />
 <p>Unable to display video!</p>

Note the use of single quotes for attributes in the <object> and <param> elements as the field syntax needs to use double quotes.

When we run the application we get:

Demo application running


Now we have a template for displaying our media (and associated data) we can use in any data bound control which supports templated design.

If we want to upload media we can use the PicPick example as the basis for creating an upload page.

Valid XHTML 1.0! | Valid CSS! | WCAG Approved AA
Page design by: John P Scott - Hosting with: Netcetera