Displaying Video in an ASP.Cyberspace Web Pages (Razor) Site

  • Article
  • 7 minutes to read

by Tom FitzMacken

This article explains how to use a video (media) player in an ASP.Cyberspace Web Pages (Razor) website to let users view videos that are stored on the site. ASP.NET Web Pages with Razor syntax lets you play Flash (.swf), Media Player (.wmv), and Silverlight (.xap) videos.

What you lot'll learn:

  • How to choose a video histrion.
  • How to add video to a web folio.
  • How to set up video player attributes.

These are the ASP.NET Razor pages features introduced in the article:

  • The Video helper.

Software versions used in the tutorial

  • ASP.NET Web Pages (Razor) ii
  • WebMatrix 2

This tutorial also works with WebMatrix 3.

Introduction

You might desire to display a video on your site. One way to do that is to link to a site that already has the video, similar YouTube. If yous desire to embed a video from these sites directly in your own pages, you can usually get HTML markup from the site and so copy it into your page. For example, the following example shows how to embed a YouTube video:

              <!DOCTYPE html> <html lang="en">     <head>         <meta charset="utf-8" />         <title>Embedded Video Instance</championship>     </head>     <body>         <h1>Embedded Video Example</h1>         <p>The post-obit video provides an introduction to WebMatrix:</p>         <iframe width="560"                  elevation="315"                  src="http://www.youtube.com/embed/fxCEcPxUbYA"                  frameborder="0"                  allowfullscreen></iframe> </trunk> </html>

If you want to play a video that's on your own website (non on a public video-sharing site), you can't direct link to it using embedded markup like this. Yet, you can play videos from your site past using the Video helper, which renders a media histrion directly in a page.

Choosing a Video Player

At that place are lots of formats for video files, and each format typically requires a dissimilar player and a unlike fashion to configure the player. In ASP.NET Razor pages, y'all can play a video in a web page using the Video helper. The Video helper simplifies the process of embedding videos in a spider web page because it automatically generates the object and embed HTML elements that are normally used to add video to the page.

The Video helper supports the post-obit media players:

  • Adobe Wink
  • Windows MediaPlayer
  • Microsoft Silverlight

The Wink Histrion

The Flash histrion of the Video helper let you lot play Wink videos (.swf files) in a web page. At a minimum, you have to provide a path to the video file. If you specify aught but the path, the player uses default values that are set past the current version of Flash. Typical default settings are:

  • The video is displayed using its default width and meridian and without a background colour.
  • The video plays automatically when the page loads.
  • The video loops continuously until it's explicitly stopped.
  • The video is scaled to testify all of the video, rather than cropping the video to fit a specific size.
  • The video plays in a window.

The MediaPlayer Player

The MediaPlayer player of the Video helper lets y'all play Windows Media videos (.wmv files), Windows Media sound (.wma files), and MP3 (.mp3 files) in a spider web folio. Y'all must include path of the media file to play; all other parameters are optional. If you specify only a path, the histrion uses default settings set by the electric current version of MediaPlayer, such as:

  • The video is displayed using its default width and summit.
  • The video plays automatically when the folio loads.
  • The video plays in one case (it doesn't loop).
  • The player displays the full set of controls in the user interface.
  • The video plays in a window.

The Silverlight Player

The Silverlight player of the Video helper lets yous play Windows Media Video (.wmv files), Windows Media Audio (.wma files), and MP3 (.mp3 files). You must set the path parameter to bespeak to a Silverlight-based awarding package (.xap file). You besides must set the width and superlative parameters. All other parameters are optional. When you use the Silverlight histrion for video, if yous prepare only the required parameters, the Silverlight player displays the video without a groundwork color.

Notation

In case you don't already know Silverlight: the .xap file is a compressed file that contains layout instructions in a .xaml file, managed code in assemblies, and optional resources. Yous tin create a .xap file in Visual Studio as a Silverlight awarding project.

The Silverlight video player uses both the settings that y'all provide for the player and the settings that are provided in the .xap file.

Tip

MIME Types

When a browser downloads a file, the browser makes sure that the file type matches the MIME type that'southward specified for the document that'south being rendered. The MIME type is the content blazon or media blazon of a file. The Video helper uses the following MIME types:

  • application/x-shockwave-flash
  • awarding/ten-mplayer2
  • application/10-silverlight-two

Playing Flash (.swf) Videos

This process shows you lot how to play a Flash video named sample.swf. The process assumes that you've got a folder named Media on your site and that the .swf file is in that folder.

  1. Add the ASP.Net Web Helpers Library to your website as described in Installing Helpers in an ASP.NET Web Pages Site, if you haven't already added it.

  2. In the website, add a page and proper noun it FlashVideo.cshtml.

  3. Add the following markup to the folio:

                      <!DOCTYPE html> <html> <head>     <championship>Flash Video</title> </head> <torso>     @Video.Wink(path: "Media/sample.swf",                  width: "400",                  height: "600",                  play: true,                  loop: true,                  menu:  faux,                  bgColor: "red",                  quality: "medium",                  calibration: "exactfit",                  windowMode: "transparent") </body> </html>

  4. Run the page in a browser. (Brand sure the page is selected in the Files workspace before you run information technology.) The page is displayed and the video plays automatically.

    [image]

You can set the quality parameter for a Wink video to depression, autolow, autohigh, medium, loftier, and best:

              <!-- Set the Flash video quality --> @Video.Wink(path: "Media/sample.swf", quality: "autohigh")

You tin change the Wink video to play at a specific size using the scale parameter, which you tin set up to the following:

  • showall. This makes the unabridged video visible while maintaining the original aspect ratio. Nonetheless, y'all might finish up with borders on each side.
  • noorder. This scales the video while maintaining the original aspect ratio, but it might be cropped.
  • exactfit. This makes the entire video visible without preserving the original aspect ratio, but distortion may occur.

If you don't specify a scale parameter, the entire video will exist visible and the original aspect ratio will be maintained without whatever cropping. The post-obit example shows how to employ the scale parameter:

              <!-- Prepare the Wink video to an exact size --> @Video.Flash(path: "Media/sample.swf", width: "1000", height: "100",     scale: "exactfit")

The Flash role player supports a video manner setting named windowMode. Yous can set up this to window, opaque, and transparent. By default, the windowMode is set to window, which displays the video in a split window on the web page. The opaque setting hides everything backside the video on the spider web page. The transparent setting lets the groundwork of the web page show through the video, bold any part of the video is transparent.

The post-obit procedure shows you how to play a Window Media video named sample.wmv that's in the Media folder.

  1. Add the ASP.Cyberspace Web Helpers Library to your website every bit described in Installing Helpers in an ASP.NET Spider web Pages Site, if you haven't already.

  2. Create a new page named MediaPlayerVideo.cshtml.

  3. Add the following markup to the folio:

                      <!DOCTYPE html> <html> <caput>   <title>MediaPlayer Video</title> </caput> <body>     @Video.MediaPlayer(         path: "Media/sample.wmv",         width: "400",         height: "600",         autoStart: truthful,         playCount: 2,         uiMode:  "full",         stretchToFit: truthful,         enableContextMenu: true,         mute: false,         volume: 75) </torso> </html>

  4. Run the page in a browser. The video loads and plays automatically.

    [image]

You can set up playCount to an integer that indicates how many times to play the video automatically:

              <!-- Set the MediaPlayer video playCount --> @Video.MediaPlayer(path: "Media/sample.wmv", playCount: ii)

The uiMode parameter lets you specify which controls show upward in the user interface. You tin can ready uiMode to invisible, none, mini, or total. If you don't specify a uiMode parameter, the video will be displayed with the status window, seek bar, control buttons, and volume controls in addition to the video window. These controls will also be displayed if you utilize the role player to play an audio file. Here'southward an example of how to use the uiMode parameter:

              <!-- Set the MediaPlayer command UI --> @Video.MediaPlayer(path: "Media/sample.wmv", uiMode: "mini")

Past default, sound is on when the video plays. You lot tin can mute the sound by setting the mute parameter to true:

              <!-- Play the MediaPlayer video without audio --> @Video.MediaPlayer(path: "Media/sample.wmv", mute: truthful)

Y'all can control the audio level of the MediaPlayer video by setting the volume parameter to a value betwixt 0 and 100. The default value is 50. Hither's an example:

              <!-- Play the MediaPlayer video without audio --> @Video.MediaPlayer(path: "Media/sample.wmv", volume: 75)

Playing Silverlight Videos

This procedure shows you how to play video contained in a Silverlight .xap page that's in a folder named Media.

  1. Add together the ASP.NET Spider web Helpers Library to your website as described in Installing Helpers in an ASP.Net Spider web Pages Site, if y'all oasis't already .

  2. Create a new folio named SilverlightVideo.cshtml.

  3. Add together the following markup to the page:

                      <!DOCTYPE html> <html> <head>   <title>Silverlight Video</title> </caput> <body>     @Video.Silverlight(         path: "Media/sample.xap",         width: "400",         superlative: "600",         bgColor: "ruddy",         autoUpgrade: truthful) </body> </html>

  4. Run the page in a browser.

    [image]

Additional Resources

Silverlight Overview

Flash OBJECT and EMBED tag attributes

Windows Media Thespian 11 SDK PARAM Tags