1. 브라우저에서 자동 재생 정책 설정
Chrome
- Chrome 설정:
- 주소창에
chrome://settings/content/autoplay 입력 후 Enter를 누릅니다.
자동 재생 설정을 찾아 사이트에서 오디오를 자동 재생할 수 있도록 허용 옵션을 선택합니다.
- 사이트별 설정:
- 주소창에
chrome://settings/content 입력 후 Enter를 누릅니다.
자동 재생 섹션에서 특정 사이트에 대해 자동 재생을 허용하거나 차단할 수 있습니다.
Firefox
- Firefox 설정:
- 주소창에
about:preferences#privacy 입력 후 Enter를 누릅니다.
권한 섹션에서 자동 재생을 클릭하고 사이트별로 허용 설정을 합니다.
- 사이트별 설정:
- 사이트를 방문할 때 자동 재생 정책을 설정하려면,
사이트 정보 (주소창에서 자물쇠 아이콘 클릭)에서 권한을 클릭하여 자동 재생을 설정할 수 있습니다.
Safari
- Safari 설정:
- Safari 메뉴에서
환경설정을 클릭한 후 웹사이트 탭으로 이동합니다.
자동 재생을 선택하고, 사이트별로 자동 재생 설정을 변경할 수 있습니다.
- 사이트별 설정:
환경설정의 웹사이트 탭에서 자동 재생을 설정하여, 사이트별로 자동 재생을 허용하거나 차단할 수 있습니다.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Media Viewer</title>
<style>
#media-container {
display: flex;
justify-content: center;
align-items: center;
height: 100vh;
}
#media-container img,
#media-container video {
max-width: 100%;
max-height: 100%;
}
#media-container img.fit,
#media-container video.fit {
width: 100%;
height: auto;
}
#media-container img.original,
#media-container video.original {
width: auto;
height: auto;
}
</style>
</head>
<body>
<div id="media-container"></div>
<button id="prev-button">Previous</button>
<button id="next-button">Next</button>
<script>
const mediaData = [
{
"type": "image",
"src": "path/to/image1.jpg",
"duration": 3000,
"size": "original"
},
{
"type": "video",
"src": "path/to/video1.mp4",
"duration": 0,
"size": "fit"
},
{
"type": "image",
"src": "path/to/image2.jpg",
"duration": 5000,
"size": "fit"
},
{
"type": "video",
"src": "path/to/video2.mp4",
"duration": 10000,
"size": "original"
}
];
let currentIndex = 0;
const mediaContainer = document.getElementById('media-container');
const prevButton = document.getElementById('prev-button');
const nextButton = document.getElementById('next-button');
let timer = null;
function displayMedia(index) {
clearTimeout(timer);
mediaContainer.innerHTML = '';
const media = mediaData[index];
const mediaElement = document.createElement(media.type === 'image' ? 'img' : 'video');
mediaElement.src = media.src;
if (media.type === 'image') {
mediaElement.alt = 'Media Image';
} else {
mediaElement.controls = true;
mediaElement.autoplay = true;
mediaElement.muted = true;
}
if (media.size === 'fit') {
mediaElement.classList.add('fit');
} else if (media.size === 'original') {
mediaElement.classList.add('original');
}
mediaElement.onerror = function() {
nextMedia();
};
mediaElement.onload = function() {
mediaContainer.appendChild(mediaElement);
if (media.type === 'image') {
timer = setTimeout(nextMedia, media.duration);
}
};
if (media.type === 'video') {
mediaElement.addEventListener('canplay', function() {
mediaContainer.appendChild(mediaElement);
if (media.duration === 0) {
mediaElement.addEventListener('ended', nextMedia);
} else {
timer = setTimeout(nextMedia, media.duration);
}
mediaElement.play();
document.addEventListener('click', unmuteOnClick);
document.addEventListener('keydown', unmuteOnClick);
});
}
mediaContainer.appendChild(mediaElement);
}
function unmuteOnClick() {
const mediaElement = mediaContainer.querySelector('video');
if (mediaElement) {
setTimeout(() => {
mediaElement.muted = false;
}, 1000);
document.removeEventListener('click', unmuteOnClick);
document.removeEventListener('keydown', unmuteOnClick);
}
}
function nextMedia() {
if (currentIndex < mediaData.length - 1) {
currentIndex++;
} else {
currentIndex = 0;
}
displayMedia(currentIndex);
}
function prevMedia() {
if (currentIndex > 0) {
currentIndex--;
} else {
currentIndex = mediaData.length - 1;
}
displayMedia(currentIndex);
}
prevButton.addEventListener('click', prevMedia);
nextButton.addEventListener('click', nextMedia);
// Initialize with the first media item
displayMedia(currentIndex);
</script>
</body>
</html>
