본문 바로가기
카테고리 없음

avplay 우측하단 1/4 보여주기

by pishio 2024. 7. 6.

비디오의 우측 하단 1/4만 보여주려면 `setDisplayRect` 함수를 사용하여 화면의 우측 하단 1/4 크기에 맞게 디스플레이 영역을 설정해야 합니다. 4K 해상도(3840x2160)를 기준으로 한다면, 우측 하단 1/4 영역은 (1920, 1080) 좌표에서 시작하여 1920x1080 크기가 됩니다.

다음은 비디오의 우측 하단 1/4만 보여주기 위한 설정 예제입니다.

### 예제 코드

```javascript
// AVPlay 인스턴스 생성
var avPlayer = webapis.avplay;

// 비디오 URL 설정
var videoUrl = 'http://example.com/video4k.mp4';

// 비디오 준비 함수
function prepareVideo(url) {
    return new Promise((resolve, reject) => {
        avPlayer.open(url);
        // 우측 하단 1/4 영역 설정: (1920, 1080, 1920, 1080)
        avPlayer.setDisplayRect(1920, 1080, 1920, 1080);
        avPlayer.setListener({
            onbufferingstart: function() {
                console.log("Buffering start.");
            },
            onbufferingprogress: function(percent) {
                console.log("Buffering progress: " + percent + "%");
            },
            onbufferingcomplete: function() {
                console.log("Buffering complete.");
            },
            onstreamcompleted: function() {
                console.log("Stream Completed");
                resolve();
            },
            onerror: function(error) {
                reject(error);
            }
        });
        avPlayer.prepareAsync(resolve, reject);
    });
}

// 비디오 재생 함수
async function playVideo(url) {
    try {
        await prepareVideo(url);
        avPlayer.play();
    } catch (error) {
        console.error("Failed to prepare video:", error);
    }
}

// 페이지 로드 후 비디오 재생
document.addEventListener('DOMContentLoaded', async () => {
    await avPlayer.init({
        containerID: 'videoPlayer',
        mode: 'FULLSCREEN'
    });
    await playVideo(videoUrl);
});
```

### 주요 포인트
- **전체 해상도와 우측 하단 1/4**: 전체 해상도가 3840x2160인 경우, 우측 하단 1/4 영역은 (1920, 1080)에서 시작하여 1920x1080 크기입니다.
- **`setDisplayRect` 메서드**: `avPlayer.setDisplayRect(1920, 1080, 1920, 1080)`는 비디오가 화면의 우측 하단 1/4 영역에만 표시되도록 설정합니다.

이 코드를 사용하면 비디오의 우측 하단 1/4 영역만 화면에 표시됩니다. 다른 영역을 설정하려면 좌표와 크기를 조정하여 원하는 위치에 맞게 설정할 수 있습니다.

댓글