전체 화면 모드로 비디오 재생

브라우저에서 Flash Player의 전체 화면 모드 활성화

브라우저에서 Flash Player에 대한 전체 화면 모드를 구현하려면 먼저 응용 프로그램의 제작 템플릿을 통해 전체 화면 모드를 사용하도록 설정해야 합니다. 전체 화면을 허용하는 템플릿에는 allowFullScreen 매개 변수가 들어 있는 <object> 및 <embed> 태그가 포함되어 있습니다. 다음 예제에서는 <embed> 태그 내의 allowFullScreen 매개 변수를 보여 줍니다.

<object classid="clsid:D27CDB6E-AE6D-11cf-96B8-444553540000" 
    id="fullScreen" width="100%" height="100%" 
    codebase="http://fpdownload.macromedia.com/get/flashplayer/current/swflash.cab"> 
    ... 
    <param name="allowFullScreen" value="true" /> 
    <embed src="fullScreen.swf" allowFullScreen="true" quality="high" bgcolor="#869ca7" 
        width="100%" height="100%" name="fullScreen" align="middle" 
        play="true" 
        loop="false" 
        quality="high" 
        allowScriptAccess="sameDomain" 
        type="application/x-shockwave-flash" 
        pluginspage="http://www.adobe.com/go/getflashplayer"> 
    </embed> 
    ... 
</object>

Flash에서 [파일] > [제작 설정]을 선택하고 [제작 설정] 대화 상자의 [HTML] 탭에서 [Flash 전용 - 전체 화면 가능] 템플릿을 선택합니다.

Flex에서는 HTML 템플릿에 전체 화면을 지원하는 <object> 및 <embed> 태그가 들어 있는지 확인합니다.

전체 화면 모드 시작

브라우저에서 실행되는 Flash Player 내용의 경우 마우스 클릭 또는 키 누르기에 대한 응답으로 비디오에 대한 전체 화면 모드를 시작합니다. 예를 들어 사용자가 [전체 화면] 버튼을 클릭하거나 컨텍스트 메뉴에서 [전체 화면] 명령을 선택할 때 전체 화면 모드를 시작할 수 있습니다. 사용자에게 응답하려면 액션이 발생한 객체에 이벤트 리스너를 추가합니다. 다음 코드에서는 전체 화면 모드를 시작하기 위해 사용자가 클릭하는 버튼에 이벤트 리스너를 추가합니다.

var fullScreenButton:Button = new Button(); 
fullScreenButton.label = "Full Screen"; 
addChild(fullScreenButton); 
fullScreenButton.addEventListener(MouseEvent.CLICK, fullScreenButtonHandler); 
 
function fullScreenButtonHandler(event:MouseEvent) 
{ 
    stage.displayState = StageDisplayState.FULL_SCREEN;     
 
}

이 코드에서는 Stage.displayState 속성을 StageDisplayState.FULL_SCREEN으로 설정하여 전체 화면 모드를 시작합니다. 이 코드에서는 스테이지의 비디오 표시 공간에 비례한 비디오 크기 조절을 통해 전체 스테이지를 전체 화면으로 확대합니다.

fullScreenSourceRect 속성을 사용하면 스테이지의 특정 영역을 지정하여 전체 화면으로 확대할 수 있습니다. 먼저 전체 화면으로 확대할 사각형을 정의합니다. 그런 다음 이 사각형을 Stage.fullScreenSourceRect 속성에 할당합니다. 이 버전의 fullScreenButtonHandler() 함수는 비디오만을 전체 화면으로 확대하는 두 행의 코드를 추가합니다.

private function fullScreenButtonHandler(event:MouseEvent) 
{ 
    var screenRectangle:Rectangle = new Rectangle(video.x, video.y, video.width, video.height); 
    stage.fullScreenSourceRect = screenRectangle; 
    stage.displayState = StageDisplayState.FULL_SCREEN; 
}

이 예제에서는 마우스 클릭에 대한 응답으로 이벤트 핸들러를 호출하지만 전체 화면 모드로 전환하는 방법은 Flash Player와 AIR 모두에서 동일합니다. 크기를 조절할 사각형을 정의하고 Stage.displayState 속성을 설정합니다. 자세한 내용은 Adobe Flash 플랫폼용 ActionScript 3.0 참조 설명서를 참조하십시오.

다음에 나오는 전체 예제에서는 연결과 비디오에 대한 NetStream 객체를 만들고 비디오 재생을 시작하는 코드를 추가합니다.

package 
{ 
    import flash.net.NetConnection; 
    import flash.net.NetStream; 
    import flash.media.Video; 
    import flash.display.StageDisplayState; 
    import fl.controls.Button; 
    import flash.display.Sprite; 
    import flash.events.MouseEvent; 
    import flash.events.FullScreenEvent; 
    import flash.geom.Rectangle; 
     
    public class FullScreenVideoExample extends Sprite 
    {     
        var fullScreenButton:Button = new Button(); 
        var video:Video = new Video(); 
 
        public function FullScreenVideoExample() 
        { 
            var videoConnection:NetConnection = new NetConnection(); 
            videoConnection.connect(null); 
             
            var videoStream:NetStream = new NetStream(videoConnection); 
            videoStream.client = this; 
 
            addChild(video); 
             
            video.attachNetStream(videoStream); 
             
            videoStream.play("http://www.helpexamples.com/flash/video/water.flv"); 
             
            fullScreenButton.x = 100; 
            fullScreenButton.y = 270; 
            fullScreenButton.label = "Full Screen"; 
            addChild(fullScreenButton); 
            fullScreenButton.addEventListener(MouseEvent.CLICK, fullScreenButtonHandler); 
        } 
 
        private function fullScreenButtonHandler(event:MouseEvent) 
        {  
            var screenRectangle:Rectangle = new Rectangle(video.x, video.y, video.width, video.height); 
            stage.fullScreenSourceRect = screenRectangle; 
            stage.displayState = StageDisplayState.FULL_SCREEN;  
        }     
         
        public function onMetaData(infoObject:Object):void 
        { 
            // stub for callback function 
        } 
    } 
}

onMetaData() 함수가 있는 경우 이 함수는 비디오 메타데이터를 처리하기 위한 콜백 함수입니다. 콜백 함수는 런타임에 특정 유형의 사건 또는 이벤트에 대한 응답으로 호출되는 함수입니다. 이 예제에서 onMetaData()함수는 함수를 제공하는 데 필요한 요구 사항을 충족시키는 스텁입니다. 자세한 내용은 메타데이터 및 큐 포인트에 대한 콜백 메서드 작성을 참조하십시오.

전체 화면 모드 종료

Esc 키와 같은 키보드 단축키 중 하나를 눌러 전체 화면 모드를 종료할 수 있습니다. ActionScript에서는 Stage.displayState 속성을 StageDisplayState.NORMAL로 설정하여 전체 화면 모드를 종료할 수 있습니다. 다음 예제의 코드에서는 NetStream.Play.Stop netStatus 이벤트가 발생할 때 전체 화면 모드를 종료합니다.

videoStream.addEventListener(NetStatusEvent.NET_STATUS, netStatusHandler); 
 
private function netStatusHandler(event:NetStatusEvent) 
{ 
    if(event.info.code == "NetStream.Play.Stop") 
        stage.displayState = StageDisplayState.NORMAL; 
}

전체 화면 하드웨어 가속

스테이지의 사각형 영역을 전체 화면 모드로 확대하는 경우 Flash Player 또는 AIR에서는 활성화된 하드웨어 가속을 사용합니다. 런타임에서는 컴퓨터의 비디오 어댑터를 사용하여 비디오 또는 스테이지의 일부분을 전체 화면 크기로 빠르게 확대할 수 있습니다. 따라서 Video 클래스에서 StageVideo 클래스로 전환하는 것이 Flash Player 응용 프로그램에 이로운 경우가 많습니다.

전체 화면 모드에서의 하드웨어 가속에 대한 자세한 내용은 전체 화면 모드 작업을 참조하십시오. StageVideo에 대한 자세한 내용은 하드웨어 가속 렌더링에 StageVideo 클래스 사용을 참조하십시오.