async/await를 사용하여 모든 비동기 처리를 처리하는 방법으로 코드를 변경하겠습니다. AVPlay API의 경우에는 콜백 기반의 `prepareAsync`를 Promise로 감싸주어야 하므로, 이를 async/await 구문과 함께 사용할 수 있도록 함수를 수정하겠습니다.
### HTML 구조
```html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Playlist Player</title>
<style>
#imagePlayer, #videoPlayer1, #videoPlayer2 {
width: 100%;
height: 100%;
position: absolute;
top: 0;
left: 0;
display: none;
}
</style>
</head>
<body>
<img id="imagePlayer" />
<div id="videoPlayer1"></div>
<div id="videoPlayer2은"></div>
<script src="player.js"></script>
</body>
</html>
```
### JavaScript 코드 (`player.js`)
```javascript
var imagePlayer = document.getElementById('imagePlayer');
var videoPlayer1 = document.getElementById('videoPlayer1');
var videoPlayer2 = document.getElementById('videoPlayer2');
var avPlayer1 = webapis.avplay;
var avPlayer2 = webapis.avplay;
var isPlayer1Playing = true;
var playlist = [
{ type: 'image', src: 'http://example.com/image1.jpg', duration: 5000 },
{ type: 'video', src: 'http://example.com/video1.mp4' },
{ type: 'image', src: 'http://example.com/image2.jpg', duration: 5000 },
{ type: 'video', src: 'http://example.com/video2.mp4' },
{ type: 'image', src: 'http://example.com/image3.jpg', duration: 5000 },
{ type: 'video', src: 'http://example.com/video3.mp4' },
{ type: 'image', src: 'http://example.com/image4.jpg', duration: 5000 }
];
var currentIndex = 0;
function showImage(src, duration) {
return new Promise(resolve => {
imagePlayer.src = src;
imagePlayer.style.display = 'block';
videoPlayer1.style.display = 'none';
videoPlayer2.style.display = 'none';
setTimeout(() => {
resolve();
}, duration);
});
}
function prepareVideo(player, container, src) {
return new Promise((resolve, reject) => {
player.open(src);
player.setDisplayRect(0, 0, 1920, 1080);
player.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);
}
});
player.prepareAsync();
});
}
async function playVideo(player, container) {
container.style.display = 'block';
imagePlayer.style.display = 'none';
await player.play();
}
async function playNext() {
if (currentIndex >= playlist.length) {
currentIndex = 0; // Loop back to the start
}
var item = playlist[currentIndex];
currentIndex++;
if (item.type === 'image') {
await showImage(item.src, item.duration);
playNext();
} else if (item.type === 'video') {
if (isPlayer1Playing) {
await prepareVideo(avPlayer2, videoPlayer2, item.src);
avPlayer1.stop();
await playVideo(avPlayer2, videoPlayer2);
} else {
await prepareVideo(avPlayer1, videoPlayer1, item.src);
avPlayer2.stop();
await playVideo(avPlayer1, videoPlayer1);
}
isPlayer1Playing = !isPlayer1Playing;
}
}
document.addEventListener('DOMContentLoaded', async () => {
await avPlayer1.init({
containerID: 'videoPlayer1',
mode: 'FULLSCREEN'
});
await avPlayer2.init({
containerID: 'videoPlayer2',
mode: 'FULLSCREEN'
});
await playNext();
});
```
### 요약:
1. **HTML 구조**: `imagePlayer`, `videoPlayer1`, `videoPlayer2` 요소를 사용하여 이미지와 비디오를 표시합니다.
2. **JavaScript 코드**:
- `showImage` 함수는 이미지를 표시하고 일정 시간 후에 해결되는 `Promise`를 반환합니다.
- `prepareVideo` 함수는 AVPlay API를 사용하여 비디오를 준비하고, 준비가 완료되면 `Promise`를 해결합니다.
- `playVideo` 함수는 AVPlay API를 사용하여 비디오를 재생하고, `await`을 사용하여 재생이 완료될 때까지 기다립니다.
- `playNext` 함수는 플레이리스트의 다음 항목을 재귀적으로 재생합니다. 이미지인 경우 `showImage` 함수를 호출하고, 비디오인 경우 `prepareVideo`와 `playVideo` 함수를 사용하여 재생합니다.
- `DOMContentLoaded` 이벤트 리스너에서 AVPlay API를 초기화하고, `await`을 사용하여 초기화가 완료될 때까지 기다린 후 `playNext` 함수를 호출하여 재생을 시작합니다.
이 코드는 이미지와 동영상이 섞여 있는 플레이리스트를 async/await를 사용하여 무한히 반복 재생할 수 있도록 개선한 것입니다.
카테고리 없음
댓글