`videoPlayer` 요소는 AVPlay API를 사용하여 비디오를 재생할 때 사용됩니다. HTML 구조를 변경하여 비디오 재생을 위한 컨테이너 역할을 하도록 설정하고, AVPlay API를 초기화할 때 `videoPlayer`를 사용합니다.
수정된 HTML 구조와 JavaScript 코드는 다음과 같습니다:
### 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, #videoPlayer {
width: 100%;
height: 100%;
position: absolute;
top: 0;
left: 0;
display: none;
}
</style>
</head>
<body>
<img id="imagePlayer" />
<div id="videoPlayer"></div>
<script src="player.js"></script>
</body>
</html>
```
### JavaScript 코드 (`player.js`)
```javascript
var imagePlayer = document.getElementById('imagePlayer');
var videoPlayer = document.getElementById('videoPlayer');
var avPlayer = webapis.avplay;
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 getNextVideoIndex() {
return (currentVideoIndex + 1) % videoUrls.length;
}
function showImage(src, duration) {
imagePlayer.src = src;
imagePlayer.style.display = 'block';
videoPlayer.style.display = 'none';
return new Promise(resolve => {
setTimeout(() => {
resolve();
}, duration);
});
}
function prepareVideo(player, url) {
return new Promise((resolve, reject) => {
player.open(url);
player.prepareAsync(resolve, reject);
});
}
function playVideo() {
videoPlayer.style.display = 'block';
imagePlayer.style.display = 'none';
avPlayer.play();
}
async function playFirstVideo() {
var currentUrl = videoUrls[currentVideoIndex];
var nextIndex = getNextVideoIndex();
var nextUrl = videoUrls[nextIndex];
await prepareVideo(avPlayer, currentUrl);
playVideo();
console.log('Playing first video');
// Prepare the second video while the first video is playing
await prepareVideo(avPlayer, nextUrl);
console.log('Second video is ready to play');
currentVideoIndex = nextIndex;
}
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);
} else if (item.type === 'video') {
await prepareVideo(avPlayer, item.src);
playVideo();
}
playNext(); // Play the next item
}
document.addEventListener('DOMContentLoaded', () => {
avPlayer.init({
containerID: 'videoPlayer',
mode: 'FULLSCREEN',
success: function() {
playNext();
},
error: function(error) {
console.error('AVPlay initialization failed', error);
}
});
});
```
### 요약:
1. **HTML 구조**: `videoPlayer` 요소는 비디오를 재생할 때 사용되며, `imagePlayer` 요소는 이미지를 보여줄 때 사용됩니다.
2. **JavaScript 코드**:
- `showImage` 함수는 이미지를 보여주고 일정 시간 후에 `Promise`를 해결합니다.
- `prepareVideo` 함수는 비디오를 준비하고 `Promise`를 반환합니다.
- `playVideo` 함수는 비디오를 재생하고, 비디오 플레이어를 보여줍니다.
- `playNext` 함수는 재귀적으로 플레이리스트의 다음 항목을 재생합니다.
- `DOMContentLoaded` 이벤트 리스너에서 AVPlay API를 초기화하고 `playNext` 함수를 호출하여 재생을 시작합니다.
이 코드는 이미지와 동영상이 섞여 있는 플레이리스트를 무한히 반복 재생할 수 있도록 합니다. `videoPlayer` 요소는 비디오를 재생할 때 사용되며, AVPlay API의 초기화 시에 사용됩니다.
카테고리 없음
댓글