ASP.NET 웹 페이지 (Razor) 사이트에 비디오 표시Displaying Video in an ASP.NET Web Pages (Razor) Site

만든 사람 Tom FitzMackenby Tom FitzMacken

이 문서에서는 Razor (ASP.NET 웹 페이지) 웹 사이트에서 비디오 (미디어) 플레이어를 사용 하 여 사용자가 사이트에 저장 된 비디오를 볼 수 있도록 하는 방법을 설명 합니다.This article explains how to use a video (media) player in an ASP.NET Web Pages (Razor) website to let users view videos that are stored on the site. Razor 구문 ASP.NET 웹 페이지를 사용 하면 Flash ( .swf), Media Player ( .Wmv) 및 Silverlight ( .xap) 비디오를 재생할 수 있습니다.ASP.NET Web Pages with Razor syntax lets you play Flash (.swf), Media Player (.wmv), and Silverlight (.xap) videos.

학습할 내용:What you'll learn:

  • 비디오 플레이어를 선택 하는 방법How to choose a video player.
  • 웹 페이지에 비디오를 추가 하는 방법How to add video to a web page.
  • 비디오 플레이어 특성을 설정 하는 방법How to set video player attributes.

다음은이 문서에서 소개 하는 ASP.NET Razor 페이지 기능입니다.These are the ASP.NET Razor pages features introduced in the article:

  • Video 도우미입니다.The Video helper.

자습서에서 사용 되는 소프트웨어 버전Software versions used in the tutorial

  • ASP.NET 웹 페이지 (Razor) 2ASP.NET Web Pages (Razor) 2
  • WebMatrix 2WebMatrix 2

이 자습서는 WebMatrix 3 에서도 작동 합니다.This tutorial also works with WebMatrix 3.

소개Introduction

사이트에 비디오를 표시 하는 것이 좋습니다.You might want to display a video on your site. 이 작업을 수행 하는 한 가지 방법은 YouTube와 같이 이미 비디오가 있는 사이트에 연결 하는 것입니다.One way to do that is to link to a site that already has the video, like YouTube. 이러한 사이트의 비디오를 자체 페이지에 직접 포함 하려는 경우 일반적으로 사이트에서 HTML 태그를 가져온 다음 페이지에 복사할 수 있습니다.If you want to embed a video from these sites directly in your own pages, you can usually get HTML markup from the site and then copy it into your page. 예를 들어 다음 예제에서는 YouTube 비디오를 포함 하는 방법을 보여 줍니다.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 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>

자신의 웹 사이트에 있는 비디오를 재생 하려는 경우 (공용 비디오 공유 사이트가 아님) 다음과 같은 포함 태그를 사용 하 여 직접 연결할 수 없습니다.If you want to play a video that's on your own website (not on a public video-sharing site), you can't directly link to it using embedded markup like this. 그러나 미디어 플레이어를 페이지에서 직접 렌더링 하는 Video 도우미를 사용 하 여 사이트에서 비디오를 재생할 수 있습니다.However, you can play videos from your site by using the Video helper, which renders a media player directly in a page.

비디오 플레이어 선택Choosing a Video Player

비디오 파일에는 많은 형식이 있으며 각 형식에는 일반적으로 다른 플레이어와 플레이어를 구성 하는 다른 방법이 필요 합니다.There are lots of formats for video files, and each format typically requires a different player and a different way to configure the player. ASP.NET Razor 페이지에서 Video 도우미를 사용 하 여 웹 페이지에서 비디오를 재생할 수 있습니다.In ASP.NET Razor pages, you can play a video in a web page using the Video helper. Video 도우미는 웹 페이지에 비디오를 추가 하는 데 일반적으로 사용 되는 objectembed HTML 요소를 자동으로 생성 하므로 웹 페이지에 비디오를 포함 하는 프로세스를 간소화 합니다.The Video helper simplifies the process of embedding videos in a web page because it automatically generates the object and embed HTML elements that are normally used to add video to the page.

Video 도우미는 다음과 같은 미디어 플레이어를 지원 합니다.The Video helper supports the following media players:

  • Adobe FlashAdobe Flash
  • Windows MediaPlayerWindows MediaPlayer
  • Microsoft SilverlightMicrosoft Silverlight

플래시 플레이어The Flash Player

Video 도우미의 Flash 플레이어를 사용 하면 웹 페이지에서 Flash 비디오 ( .swf 파일)를 재생할 수 있습니다.The Flash player of the Video helper let you play Flash videos (.swf files) in a web page. 최소한 비디오 파일의 경로를 제공 해야 합니다.At a minimum, you have to provide a path to the video file. 아무 것도 지정 하지 않고 경로를 지정 하는 경우 플레이어는 현재 버전의 Flash에서 설정 된 기본값을 사용 합니다.If you specify nothing but the path, the player uses default values that are set by the current version of Flash. 일반적인 기본 설정은 다음과 같습니다.Typical default settings are:

  • 비디오는 기본 너비와 높이를 사용 하 여 배경색 없이 표시 됩니다.The video is displayed using its default width and height and without a background color.
  • 페이지가 로드 되 면 비디오가 자동으로 재생 됩니다.The video plays automatically when the page loads.
  • 비디오는 명시적으로 중지 될 때까지 지속적으로 반복 됩니다.The video loops continuously until it's explicitly stopped.
  • 비디오를 축소 하 여 특정 크기에 맞게 비디오를 자르는 것이 아니라 비디오를 모두 표시 합니다.The video is scaled to show all of the video, rather than cropping the video to fit a specific size.
  • 비디오는 창에서 재생 됩니다.The video plays in a window.

MediaPlayer 플레이어The MediaPlayer Player

Video 도우미의 MediaPlayer 플레이어를 사용 하면 웹 페이지에서 Windows Media 비디오 ( .wmv 파일), windows media 오디오 ( .wma 파일) 및 mp3 ( . mp3 파일)를 재생할 수 있습니다.The MediaPlayer player of the Video helper lets you play Windows Media videos (.wmv files), Windows Media audio (.wma files), and MP3 (.mp3 files) in a web page. 재생할 미디어 파일의 경로를 포함 해야 합니다. 다른 모든 매개 변수는 선택 사항입니다.You must include path of the media file to play; all other parameters are optional. 경로만 지정 하는 경우 플레이어는 다음과 같이 현재 버전의 MediaPlayer에 설정 된 기본 설정을 사용 합니다.If you specify only a path, the player uses default settings set by the current version of MediaPlayer, such as:

  • 비디오는 기본 너비와 높이를 사용 하 여 표시 됩니다.The video is displayed using its default width and height.
  • 페이지가 로드 되 면 비디오가 자동으로 재생 됩니다.The video plays automatically when the page loads.
  • 비디오가 한 번 재생 됩니다 (반복 하지 않음).The video plays once (it doesn't loop).
  • 플레이어는 사용자 인터페이스에 컨트롤의 전체 집합을 표시 합니다.The player displays the full set of controls in the user interface.
  • 비디오는 창에서 재생 됩니다.The video plays in a window.

Silverlight 플레이어The Silverlight Player

Video 도우미의 Silverlight 플레이어를 사용 하 여 Windows Media 비디오 ( .wmv 파일), Windows Media 오디오 ( .wma 파일) 및 mp3 ( . mp3 파일)를 재생할 수 있습니다.The Silverlight player of the Video helper lets you play Windows Media Video (.wmv files), Windows Media Audio (.wma files), and MP3 (.mp3 files). Silverlight 기반 응용 프로그램 패키지 ( .xap 파일)를 가리키도록 path 매개 변수를 설정 해야 합니다.You must set the path parameter to point to a Silverlight-based application package (.xap file). 또한 width 및 height 매개 변수를 설정 해야 합니다.You also must set the width and height parameters. 모든 다른 매개 변수는 선택 사항입니다.All other parameters are optional. 비디오 용 Silverlight 플레이어를 사용 하는 경우 필수 매개 변수만 설정 하면 Silverlight 플레이어에서 배경색 없이 비디오를 표시 합니다.When you use the Silverlight player for video, if you set only the required parameters, the Silverlight player displays the video without a background color.

Note

Silverlight를 아직 모르는 경우: .xap 파일은 .xaml 파일의 레이아웃 지침, 어셈블리의 관리 코드 및 선택적 리소스를 포함 하는 압축 된 파일입니다.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. Visual Studio에서 .xap 파일을 Silverlight 응용 프로그램 프로젝트로 만들 수 있습니다.You can create a .xap file in Visual Studio as a Silverlight application project.

Silverlight 비디오 플레이어는 플레이어에 대해 제공 하는 설정과 .xap 파일에 제공 되는 설정을 모두 사용 합니다.The Silverlight video player uses both the settings that you provide for the player and the settings that are provided in the .xap file.

Tip

MIME 형식MIME Types

브라우저에서 파일을 다운로드할 때 브라우저는 파일 형식이 렌더링 되는 문서에 대해 지정 된 MIME 형식과 일치 하는지 확인할 수 있습니다.When a browser downloads a file, the browser makes sure that the file type matches the MIME type that's specified for the document that's being rendered. MIME 형식은 파일의 콘텐츠 형식 또는 미디어 형식입니다.The MIME type is the content type or media type of a file. Video 도우미는 다음과 같은 MIME 형식을 사용 합니다.The Video helper uses the following MIME types:

  • application/x-shockwave-flash
  • application/x-mplayer2
  • application/x-silverlight-2

플래시 (.swf) 비디오 재생Playing Flash (.swf) Videos

이 절차에서는 .sample이라는 Flash 비디오를 재생 하는 방법을 보여 줍니다.This procedure shows you how to play a Flash video named sample.swf. 이 절차에서는 사용자가 사이트에 미디어 라는 폴더를가지고 있으며 해당 폴더에 .swf 파일이 있다고 가정 합니다.The procedure assumes that you've got a folder named Media on your site and that the .swf file is in that folder.

  1. ASP.NET 웹 페이지 사이트에 도우미 설치의 설명에 따라 웹 사이트에 ASP.NET 웹 도우미 라이브러리를 추가 합니다 (아직 추가 하지 않은 경우).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. 웹 사이트에서 페이지를 추가 하 고 이름을 FlashVideo로 다시 만듭니다.In the website, add a page and name it FlashVideo.cshtml.

  3. 페이지에 다음 태그를 추가 합니다.Add the following markup to the page:

    <!DOCTYPE html>
    <html>
    <head>
        <title>Flash Video</title>
    </head>
    <body>
        @Video.Flash(path: "Media/sample.swf",
                     width: "400",
                     height: "600",
                     play: true,
                     loop: true,
                     menu:  false,
                     bgColor: "red",
                     quality: "medium",
                     scale: "exactfit",
                     windowMode: "transparent")
    </body>
    </html>
    
  4. 브라우저에서 페이지를 실행 합니다.Run the page in a browser. (파일을 실행 하기 전에 해당 페이지가 파일 작업 영역에서 선택 되어 있는지 확인 합니다.) 페이지가 표시 되 고 비디오가 자동으로 재생 됩니다.(Make sure the page is selected in the Files workspace before you run it.) The page is displayed and the video plays automatically.

    이미지로[image]

Flash 비디오에 대 한 quality 매개 변수를 low, autolow, autohigh, medium, highbest로 설정할 수 있습니다.You can set the quality parameter for a Flash video to low, autolow, autohigh, medium, high, and best:

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

다음과 같이 설정할 수 있는 scale 매개 변수를 사용 하 여 특정 크기에서 재생 되도록 플래시 비디오를 변경할 수 있습니다.You can change the Flash video to play at a specific size using the scale parameter, which you can set to the following:

  • showall입니다.showall. 이렇게 하면 원래 가로 세로 비율을 유지 하면서 전체 비디오가 표시 됩니다.This makes the entire video visible while maintaining the original aspect ratio. 그러나 각 면에 테두리가 표시 될 수 있습니다.However, you might end up with borders on each side.
  • noorder입니다.noorder. 이는 원래 가로 세로 비율을 유지 하면서 비디오를 확장 하지만 잘릴 수 있습니다.This scales the video while maintaining the original aspect ratio, but it might be cropped.
  • exactfit입니다.exactfit. 이렇게 하면 원래 가로 세로 비율을 유지 하지 않고 전체 비디오가 표시 되지만 왜곡이 발생할 수 있습니다.This makes the entire video visible without preserving the original aspect ratio, but distortion may occur.

scale 매개 변수를 지정 하지 않으면 전체 비디오가 표시 되 고 원래 가로 세로 비율이 자르기 없이 유지 됩니다.If you don't specify a scale parameter, the entire video will be visible and the original aspect ratio will be maintained without any cropping. 다음 예제에서는 scale 매개 변수를 사용 하는 방법을 보여 줍니다.The following example shows how to use the scale parameter:

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

Flash player는 windowMode라는 비디오 모드 설정을 지원 합니다.The Flash player supports a video mode setting named windowMode. window, opaquetransparent로 설정할 수 있습니다.You can set this to window, opaque, and transparent. 기본적으로 windowMode은 웹 페이지의 별도 창에 비디오를 표시 하는 window로 설정 됩니다.By default, the windowMode is set to window, which displays the video in a separate window on the web page. opaque 설정은 웹 페이지의 비디오 뒤에 나오는 모든 항목을 숨깁니다.The opaque setting hides everything behind the video on the web page. transparent 설정을 사용 하면 비디오의 일부가 투명 하다 고 가정 하는 웹 페이지의 배경이 비디오를 통해 표시 될 수 있습니다.The transparent setting lets the background of the web page show through the video, assuming any part of the video is transparent.

MediaPlayer ( .wmv) 비디오 재생Playing MediaPlayer (.wmv) Videos

다음 절차에서는 media 폴더에 있는 Sample .Wmv 라는 창 미디어 비디오를 재생 하는 방법을 보여 줍니다.The following procedure shows you how to play a Window Media video named sample.wmv that's in the Media folder.

  1. ASP.NET 웹 페이지 사이트에 도우미 설치에 설명 된 대로 ASP.NET 웹 도우미 라이브러리를 웹 사이트에 추가 합니다 (아직 없는 경우).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.

  2. MediaPlayerVideo라는 새 페이지를 만듭니다.Create a new page named MediaPlayerVideo.cshtml.

  3. 페이지에 다음 태그를 추가 합니다.Add the following markup to the page:

    <!DOCTYPE html>
    <html>
    <head>
      <title>MediaPlayer Video</title>
    </head>
    <body>
        @Video.MediaPlayer(
            path: "Media/sample.wmv",
            width: "400",
            height: "600",
            autoStart: true,
            playCount: 2,
            uiMode:  "full",
            stretchToFit: true,
            enableContextMenu: true,
            mute: false,
            volume: 75)
    </body>
    </html>
    
  4. 브라우저에서 페이지를 실행 합니다.Run the page in a browser. 비디오가 자동으로 로드 되 고 재생 됩니다.The video loads and plays automatically.

    이미지로[image]

비디오를 자동으로 재생 하는 횟수를 나타내는 정수로 playCount를 설정할 수 있습니다.You can set 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: 2)

uiMode 매개 변수를 사용 하 여 사용자 인터페이스에 표시 되는 컨트롤을 지정할 수 있습니다.The uiMode parameter lets you specify which controls show up in the user interface. uiModeinvisible, none, mini또는 full로 설정할 수 있습니다.You can set uiMode to invisible, none, mini, or full. uiMode 매개 변수를 지정 하지 않으면 비디오 창 뿐만 아니라 상태 창, 검색 표시줄, 컨트롤 단추 및 볼륨 컨트롤과 함께 비디오가 표시 됩니다.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 use the player to play an audio file. uiMode 매개 변수를 사용 하는 방법의 예는 다음과 같습니다.Here's an example of how to use the uiMode parameter:

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

기본적으로 오디오는 비디오가 재생 될 때 켜 있습니다.By default, audio is on when the video plays. mute 매개 변수를 true로 설정 하 여 오디오를 음소거 할 수 있습니다.You can mute the audio by setting the mute parameter to true:

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

volume 매개 변수를 0에서 100 사이의 값으로 설정 하 여 MediaPlayer 비디오의 오디오 수준을 제어할 수 있습니다.You can control the audio level of the MediaPlayer video by setting the volume parameter to a value between 0 and 100. 기본값은 50입니다.The default value is 50. 예를 들면 다음과 같습니다.Here's an example:

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

Silverlight 비디오 재생Playing Silverlight Videos

이 절차에서는 Media라는 폴더에 있는 Silverlight .xap 페이지에 포함 된 비디오를 재생 하는 방법을 보여 줍니다.This procedure shows you how to play video contained in a Silverlight .xap page that's in a folder named Media.

  1. ASP.NET 웹 페이지 사이트에 도우미 설치에 설명 된 대로 ASP.NET 웹 도우미 라이브러리를 웹 사이트에 추가 합니다 (아직 없는 경우).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 .

  2. SilverlightVideo라는 새 페이지를 만듭니다.Create a new page named SilverlightVideo.cshtml.

  3. 페이지에 다음 태그를 추가 합니다.Add the following markup to the page:

    <!DOCTYPE html>
    <html>
    <head>
      <title>Silverlight Video</title>
    </head>
    <body>
        @Video.Silverlight(
            path: "Media/sample.xap",
            width: "400",
            height: "600",
            bgColor: "red",
            autoUpgrade: true)
    </body>
    </html>
    
  4. 브라우저에서 페이지를 실행 합니다.Run the page in a browser.

    이미지로[image]

추가 리소스Additional Resources

Silverlight 개요Silverlight Overview

Flash 개체 및 EMBED 태그 특성Flash OBJECT and EMBED tag attributes

Windows Media Player 11 SDK 매개 변수 태그Windows Media Player 11 SDK PARAM Tags