다음을 통해 공유

ASP.NET 웹 페이지(Razor) 사이트에 비디오 표시

Tom FitzMacken

이 문서에서는 사용자가 사이트에 저장된 비디오를 볼 수 있도록 ASP.NET 웹 페이지(Razor) 웹 사이트에서 비디오(미디어) 플레이어를 사용하는 방법을 설명합니다. Razor 구문을 사용하는 ASP.NET 웹 페이지 Flash(.swf), Media Player(.wmv) 및 Silverlight(.xap) 비디오를 재생할 수 있습니다.

학습할 내용:

  • 비디오 플레이어를 선택하는 방법.
  • 웹 페이지에 비디오를 추가하는 방법입니다.
  • 비디오 플레이어 특성을 설정하는 방법.

다음은 문서에 도입된 ASP.NET Razor 페이지 기능입니다.

  • 도우미입니다 Video .

자습서에서 사용되는 소프트웨어 버전

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

이 자습서는 WebMatrix 3에서도 작동합니다.

소개

사이트에 비디오를 표시할 수 있습니다. 이 작업을 수행하는 한 가지 방법은 YouTube와 같은 비디오가 이미 있는 사이트에 연결하는 것입니다. 이러한 사이트의 비디오를 사용자 고유의 페이지에 직접 포함하려는 경우 일반적으로 사이트에서 HTML 태그를 받은 다음 페이지에 복사할 수 있습니다. 예를 들어 다음 예제에서는 YouTube 비디오를 포함하는 방법을 보여줍니다.

<!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>

공개 비디오 공유 사이트가 아닌 자신의 웹 사이트에 있는 비디오를 재생하려는 경우 이와 같은 포함된 태그를 사용하여 직접 연결할 수 없습니다. 그러나 페이지에서 직접 미디어 플레이어를 렌더링하는 도우미를 Video 사용하여 사이트에서 비디오를 재생할 수 있습니다.

비디오 플레이어 선택

비디오 파일에는 다양한 형식이 있으며 각 형식에는 일반적으로 다른 플레이어와 플레이어를 구성하는 다른 방법이 필요합니다. ASP.NET Razor 페이지에서 도우미를 사용하여 Video 웹 페이지에서 비디오를 재생할 수 있습니다. 도우미는 Video 일반적으로 페이지에 비디오를 추가하는 데 사용되는 및 embed HTML 요소를 자동으로 생성 object 하므로 웹 페이지에 비디오를 포함하는 프로세스를 간소화합니다.

도우미는 Video 다음 미디어 플레이어를 지원합니다.

  • Adobe Flash
  • Windows MediaPlayer
  • Microsoft Silverlight

플래시 플레이어

Flash 도우미의 Video 플레이어를 사용하면 웹 페이지에서 Flash 비디오(.swf 파일)를 재생할 수 있습니다. 최소한 비디오 파일의 경로를 제공해야 합니다. 경로만 지정하면 플레이어는 현재 버전의 Flash에 의해 설정된 기본값을 사용합니다. 일반적인 기본 설정은 다음과 같습니다.

  • 비디오는 배경색 없이 기본 너비와 높이를 사용하여 표시됩니다.
  • 페이지가 로드되면 비디오가 자동으로 재생됩니다.
  • 비디오는 명시적으로 중지될 때까지 계속 반복됩니다.
  • 비디오는 특정 크기에 맞게 비디오를 자르는 대신 모든 비디오를 표시하도록 크기가 조정됩니다.
  • 비디오는 창에서 재생됩니다.

MediaPlayer 플레이어

MediaPlayer 도우미의 Video 플레이어를 사용하면 웹 페이지에서 Windows Media 비디오(.wmv 파일), Windows Media 오디오(.wma 파일) 및 MP3(.mp3 파일)를 재생할 수 있습니다. 재생할 미디어 파일의 경로를 포함해야 합니다. 다른 모든 매개 변수는 선택 사항입니다. 경로만 지정하면 플레이어는 다음과 같이 현재 버전의 MediaPlayer에서 설정한 기본 설정을 사용합니다.

  • 비디오는 기본 너비와 높이를 사용하여 표시됩니다.
  • 페이지가 로드되면 비디오가 자동으로 재생됩니다.
  • 비디오는 한 번 재생됩니다(반복되지 않음).
  • 플레이어는 사용자 인터페이스에 전체 컨트롤 집합을 표시합니다.
  • 비디오는 창에서 재생됩니다.

Silverlight 플레이어

Silverlight 도우미의 Video 플레이어를 사용하면 Windows Media 비디오(.wmv 파일), Windows Media Audio(.wma 파일) 및 MP3(.mp3 파일)를 재생할 수 있습니다. Silverlight 기반 애플리케이션 패키지(.xap 파일)를 가리키도록 path 매개 변수를 설정해야 합니다. 너비 및 높이 매개 변수도 설정해야 합니다. 모든 다른 매개 변수는 선택 사항입니다. 비디오에 Silverlight 플레이어를 사용하는 경우 필요한 매개 변수만 설정하면 Silverlight 플레이어는 배경색 없이 비디오를 표시합니다.

참고

Silverlight를 모르는 경우. .xap 파일은 .xaml 파일의 레이아웃 명령, 어셈블리의 관리 코드 및 선택적 리소스를 포함하는 압축된 파일입니다. Visual Studio에서 Silverlight 애플리케이션 프로젝트로 .xap 파일을 만들 수 있습니다.

Silverlight 비디오 플레이어는 플레이어에 대해 제공하는 설정과 .xap 파일에 제공된 설정을 모두 사용합니다.

팁

MIME 형식

브라우저에서 파일을 다운로드할 때 브라우저는 파일 형식이 렌더링되는 문서에 대해 지정된 MIME 형식과 일치하는지 확인합니다. MIME 형식은 파일의 콘텐츠 형식 또는 미디어 형식입니다. 도우미는 Video 다음 MIME 형식을 사용합니다.

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

Flash(.swf) 비디오 재생

이 절차에서는 sample.swf라는 Flash 비디오를 재생하는 방법을 보여줍니다. 이 절차에서는 사이트에 Media 라는 폴더가 있고 .swf 파일이 해당 폴더에 있다고 가정합니다.

  1. 아직 추가하지 않은 경우 ASP.NET 웹 페이지 사이트에 도우미 설치에 설명된 대로 웹 사이트에 ASP.NET 웹 도우미 라이브러리를 추가합니다.

  2. 웹 사이트에서 페이지를 추가하고 이름을 FlashVideo.cshtml로 지정합니다.

  3. 페이지에 다음 태그를 추가합니다.

    <!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. 브라우저에서 페이지를 실행합니다. (실행하기 전에 파일 작업 영역에서 페이지가 선택되어 있는지 확인합니다.) 페이지가 표시되고 비디오가 자동으로 재생됩니다.

    [스크린샷은 자동으로 재생된 비디오를 보여줍니다.]

Flash 비디오의 quality 매개 변수를 , , autolow, autohighmedium, high및 best로 low설정할 수 있습니다.

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

매개 변수를 사용하여 scale 특정 크기로 재생되도록 Flash 비디오를 변경할 수 있으며, 다음으로 설정할 수 있습니다.

  • showall. 이렇게 하면 원래 가로 세로 비율을 유지하면서 전체 비디오가 표시됩니다. 그러나 양쪽에 테두리가 있을 수 있습니다.
  • noorder. 이렇게 하면 원래 가로 세로 비율을 유지하면서 비디오의 크기를 조정하지만 잘렸을 수 있습니다.
  • exactfit. 이렇게 하면 원래 가로 세로 비율을 유지하지 않고 전체 비디오가 표시되지만 왜곡이 발생할 수 있습니다.

매개 변수를 scale 지정하지 않으면 전체 비디오가 표시되고 원래 가로 세로 비율이 자르기 없이 유지됩니다. 다음 예제에서는 매개 변수를 사용하는 scale 방법을 보여줍니다.

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

Flash 플레이어는 라는 windowMode비디오 모드 설정을 지원합니다. 이를 , opaque및 transparent로 window설정할 수 있습니다. 기본적으로 는 windowMode 웹 페이지의 별도 창에 비디오를 표시하는 로 설정 window됩니다. 설정은 opaque 웹 페이지의 비디오 뒤에 있는 모든 것을 숨깁니다. 설정을 transparent 사용하면 비디오의 일부가 투명하다고 가정하여 웹 페이지의 배경이 비디오를 통해 표시될 수 있습니다.

MediaPlayer(.wmv) 비디오 재생

다음 절차에서는 Media 폴더에 있는 sample.wmv 라는 Window Media 비디오를 재생하는 방법을 보여줍니다.

  1. 아직 ASP.NET 웹 페이지 사이트에 도우미 설치에 설명된 대로 웹 사이트에 ASP.NET 웹 도우미 라이브러리를 추가합니다.

  2. MediaPlayerVideo.cshtml이라는 새 페이지를 만듭니다.

  3. 페이지에 다음 태그를 추가합니다.

    <!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. 브라우저에서 페이지를 실행합니다. 비디오가 자동으로 로드되고 재생됩니다.

    [스크린샷은 페이지가 브라우저에서 실행되면 자동으로 재생되는 비디오를 보여줍니다.]

비디오를 자동으로 재생할 횟수를 나타내는 정수로 설정할 playCount 수 있습니다.

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

매개 변수를 uiMode 사용하면 사용자 인터페이스에 표시되는 컨트롤을 지정할 수 있습니다. , , nonemini또는 full로 invisible설정할 uiMode 수 있습니다. 매개 변수를 uiMode 지정하지 않으면 비디오 창 외에도 상태 창, 검색 막대, 컨트롤 단추 및 볼륨 컨트롤과 함께 비디오가 표시됩니다. 플레이어를 사용하여 오디오 파일을 재생하는 경우에도 이러한 컨트롤이 표시됩니다. 매개 변수를 사용하는 방법의 예는 uiMode 다음과 같습니다.

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

기본적으로 비디오 재생 시 오디오가 켜집니다. 매개 변수를 true로 설정하여 오디오를 mute 음소거할 수 있습니다.

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

매개 변수를 0에서 100 사이의 값으로 설정 volume 하여 MediaPlayer 비디오의 오디오 수준을 제어할 수 있습니다. 기본값은 50입니다. 예를 들면 다음과 같습니다.

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

Silverlight 비디오 재생

이 절차에서는 Media라는 폴더에 있는 Silverlight .xap 페이지에 포함된 비디오를 재생하는 방법을 보여줍니다.

  1. 아직 ASP.NET 웹 페이지 사이트에 도우미 설치에 설명된 대로 웹 사이트에 ASP.NET 웹 도우미 라이브러리를 추가합니다.

  2. SilverlightVideo.cshtml이라는 새 페이지를 만듭니다.

  3. 페이지에 다음 태그를 추가합니다.

    <!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. 브라우저에서 페이지를 실행합니다.

    [스크린샷은 브라우저에서 실행되는 페이지를 보여줍니다.]

추가 리소스

Silverlight 개요

Flash OBJECT 및 EMBED 태그 특성

Windows 미디어 플레이어 11개의 SDK PARAM 태그