ASP.NET WP - Working with Videos

In this chapter, we will be covering how to display a video on your web page. In ASP.NET you can easily play Flash (*.swf), Media Player (*.wmv), and Silverlight (*.xap) videos.

Sometimes you might need to display a video on your website.
You can display a video by linking to a site that already has the video, like YouTube, Dailymotion, etc.
To embed a video from these sites into your own pages directly, you will need to get HTML markup from the site and then copy it into your page.

How to Embed a Video?

Let’s have a look into a simple example in which we will embed a video from the YouTube. To begin with, we need to create a new CSHTML file.

Enter EmbededVideo.cshtml in the name field and click OK.

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

Let’s run the application and specify the following url − http://localhost:36905/embededvideo then you will see the following output.

You can simply play the video now.

Choosing a Player

If you want to play a video which is available on your own website. You can play videos from your site by using the Video helper, which renders a media player directly in a page.

As you know that there are a lot of formats for video files, and each format typically requires a different player and a different way to configure the player.
In ASP.NET Razor pages, you can play a video in a web page using the Video helper.
The Video helper simplifies the process of embedding videos in a web page because it automatically generates the object and embeds HTML elements that are normally used to add video to the page.

The Video helper supports the following media players −

Adobe Flash
Windows MediaPlayer
Microsoft Silverlight

Displaying a Video using Windows Media Player

Let’s have a look into a simple example in which we will display a video on our web page using the Windows Media Player. To start with, we will create a new CSHTML file.

Enter MediaPlayer.cshtml in the name field and click Ok.

Now let’s create a new folder in your website and name it as Media, then add the video file which you want to play on your webpage as shown in the following screenshot.

Now replace the following code in FlashPlayer.cshtml file.

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

</html>

When you run this application and specify the following url − http://localhost:36905/MediaPlayer then you will see the following error.

This is because we have not installed the Web helper. To do this, let’s open the NuGet from the WebMatrix.

Search for ASP.NET Web Helpers Library and then click Install. Once the installation is completed successfully then you can run your application again by specifying the same url and you will see that it will play the video using Windows Media Player.

Similarly, you can also use Silverlight player and Flash player to display videos on your web page.