분류 전체보기79 image, 2videos 두 개의 AVPlay 인스턴스를 사용하여 첫 번째 영상이 재생 중일 때 다음 영상을 미리 준비하고, 이미지와 영상을 섞어 무한히 재생할 수 있도록 코드를 개선하겠습니다. 이를 위해 두 개의 AVPlay 인스턴스를 번갈아 가며 사용하고, 이미지와 영상을 섞어 재생합니다. ### HTML 구조 ```html ``` ### JavaScript 코드 (`player.js`) ```javascript var imagePlayer = document.getElementById('imagePlayer'); var videoPlayer1 = document.getElementById('videoPlayer1'); var videoPlayer2 = document.getElementById('videoPlayer2');.. 2024. 7. 22. avplay with image `videoPlayer` 요소는 AVPlay API를 사용하여 비디오를 재생할 때 사용됩니다. HTML 구조를 변경하여 비디오 재생을 위한 컨테이너 역할을 하도록 설정하고, AVPlay API를 초기화할 때 `videoPlayer`를 사용합니다. 수정된 HTML 구조와 JavaScript 코드는 다음과 같습니다: ### HTML 구조 ```html ``` ### JavaScript 코드 (`player.js`) ```javascript var imagePlayer = document.getElementById('imagePlayer'); var videoPlayer = document.getElementById('videoPlayer'); var avPlayer = webapis.avplay; var p.. 2024. 7. 22. avplay prepare 1 `await`를 사용하여 비동기 작업을 더 명확하게 처리할 수 있도록 코드를 개선하겠습니다. `prepareAsync` 함수는 콜백 기반이므로, 이를 `Promise`로 감싸서 `await`을 사용할 수 있게 변환합니다. 다음은 `await`을 사용하여 영상을 무한히 반복해서 재생하고, 현재 재생 중인 영상이 끝나기 전에 다음 영상을 준비하는 방법을 보여줍니다. ```javascript var player1 = webapis.avplay; var player2 = webapis.avplay; var isPlayer1Playing = true; var videoUrls = [ 'http://your-video-url1.mp4', 'http://your-video-url2.mp4', 'http://your-.. 2024. 7. 22. avplay 우측하단 1/4 보여주기 비디오의 우측 하단 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 n.. 2024. 7. 6. 이전 1 ··· 8 9 10 11 12 13 14 ··· 20 다음