다음을 통해 공유

Silverlight 프로젝트에서 미디어 재생 제어

  • 아티클

이 페이지는 Silverlight 1 프로젝트에만 적용됨

Microsoft Silverlight 1.0 프로젝트에 미디어 파일(오디오 또는 비디오)을 추가한 다음 해당 파일을 아트보드에 삽입하면 MediaElement 개체에 파일이 추가되고 자동으로 재생되도록 설정됩니다. 이는 Windows Presentation Foundation 프로젝트에 오디오 또는 비디오 파일을 삽입할 때 스토리보드에 타임라인이 만들어지는 것과 차이를 보입니다. 애니메이션 스토리보드를 제어하는 것과 동일한 방법으로 Microsoft Silverlight 1.0 프로젝트에서 비디오 또는 오디오 파일의 재생을 제어할 수는 없습니다.

[!참고]

Microsoft Expression Encoder 2를 사용하여 미디어 플레이어를 만들고 여러 가지 Silverlight 1.0 템플릿 중 하나를 이용해서 스킨을 적용할 수 있습니다. 미디어 플레이어에는 재생, 일시 중지를 포함한 여러 제어 단추가 이미 포함되어 있습니다. Expression Encoder 2와 함께 기본적으로 제공되는 Silverlight 1.0 템플릿의 복사본을 수정하거나, Expression Blend 2에서 인코딩된 프로젝트를 열어 시각적 요소와 기능을 추가할 수 있습니다.

Expression Blend 2에서 Silverlight 1.0 프로젝트의 미디어 파일 재생을 제어하려면 다음 절차를 수행하십시오. Silverlight 1.0 프로젝트의 미디어 제어에 대한 자세한 내용은 Silverlight 빠른 시작을 참조하십시오.

Silverlight 1.0 프로젝트의 미디어 파일 재생 제어

  1. 프로젝트에 미디어 파일을 추가합니다. 자세한 절차는 Silverlight 1.0 프로젝트에 미디어 파일 추가를 참조하십시오.

  2. 코드 숨김 파일에서 참조할 수 있도록 미디어 개체 이름을 바꿉니다. 예를 들어 개체 및 타임라인에서 미디어 개체를 마우스 오른쪽 단추로 클릭하고 이름 바꾸기를 선택한 다음 MyVideo를 입력합니다.

  3. 사용자가 클릭하여 미디어 파일을 중지하고 시작할 수 있는 개체를 제공하려면 이 단계에서 아트보드에 해당 개체를 추가하고 이름을 바꿉니다. 예를 들어 아트보드에 타원을 추가한 다음 Pause로 이름을 지정합니다. 자세한 내용은 Silverlight 프로젝트의 XAML 문서에 요소 추가 및 개체 이름 바꾸기를 참조하십시오.

  4. 프로젝트 패널의 파일 아래에서 XAML 문서의 코드 숨김 파일을 두 번 클릭합니다. 예를 들어 편집 중인 XAML 문서의 이름이 Page.xaml이면 Page.xaml.js 파일을 두 번 클릭합니다. Expression Blend 2의 JavaScript 편집기에서 코드 숨김 파일이 열립니다.

  5. 이벤트 처리기를 연결하는 코드 줄 예제는 코드 숨김 파일에 이미 포함되어 있으며 다음과 유사합니다.

    rootElement.addEventListener("MouseLeftButtonDown", Silverlight.createDelegate(this, this.handleMouseDown));

    이 코드 줄 아래에 다음 줄을 추가합니다.

    this.control.content.findName("Pause").addEventListener("MouseLeftButtonDown", Silverlight.createDelegate(this, this.handleClickPause));

    이 코드는 Pause라는 개체가 클릭되었을 때 MouseLeftButtonDown 이벤트에 응답하는 handleClickPause라는 이벤트 처리기 메서드를 추가합니다.

  6. 코드 숨김 파일에는 handleMouseDown이라는 예제 이벤트 처리기 메서드가 이미 포함되어 있습니다. handleLoad 메서드의 끝에 있는 마지막 중괄호(}) 뒤에는 쉼표(,)가 있지만 handleMouseDown 메서드의 마지막 중괄호 뒤에는 쉼표가 없습니다. handleMouseDown이 선언된 마지막 메서드이기 때문입니다. 새 메서드를 추가할 때는 마지막 메서드를 제외한 각 메서드의 마지막 중괄호 뒤에 쉼표를 삽입해야 합니다.

  7. handleMouseDown 이벤트 앞에 다음 이벤트 처리기 메서드를 추가하는 것이 권장됩니다.

    handleClickPause: function(sender, eventArgs) 
{
    sender.findName("MyVideo").pause();
},

    이 메서드는 사용자가 Pause 개체 안쪽을 마우스 왼쪽 단추로 클릭하는 액션에 응답하여 미디어 재생을 일시 중지합니다.

  8. F5 키를 눌러 Silverlight 1.0 응용 프로그램을 테스트합니다. Pause 개체를 클릭하여 미디어 재생이 일시 중지되는지 확인합니다. 필요한 경우 Play 및 Stop 단추에 대해 이 단계를 반복합니다.

참조

개념

Silverlight 1.0 프로젝트에 미디어 파일 추가