tedst
페이지 정보
작성자 최고관리자 작성일 24-12-21 18:40 조회 59 댓글 0본문
<!DOCTYPE html>
<html lang="ko">
<head>
<meta charset="UTF-8" />
<title>EGIS 미디어 예시</title>
</head>
<body>
<h1>EGIS 미디어 예시</h1>
<div id="media-container"></div>
<script>
// data.json 파일을 비동기 요청(fetch)하여 JSON 데이터를 가져옵니다.
fetch('data.json')
.then(response => {
if (!response.ok) {
throw new Error('데이터를 가져오는 데 실패했습니다. 상태 코드: ' + response.status);
}
return response.json();
})
.then(jsonData => {
// JSON 구조가 { "media": [ ... ] } 라고 가정
const mediaArray = jsonData.media;
const container = document.getElementById('media-container');
// media 배열을 순회하며 각 항목을 화면에 표시
mediaArray.forEach(item => {
// item은 { id, title, description, image, audio, video } 등의 필드를 가정
const section = document.createElement('section');
section.style.border = '1px solid #ccc';
section.style.margin = '10px';
section.style.padding = '10px';
// HTML 템플릿 문자열을 구성
section.innerHTML = `
<h2>${item.title}</h2>
<p>${item.description}</p>
${
item.image
? `<img src="${item.image}" alt="이미지" width="200" />`
: '<p>이미지 없음</p>'
}
<br/>
${
item.audio
? `<audio controls src="${item.audio}"></audio>`
: '<p>오디오 없음</p>'
}
<br/>
${
item.video
? `<video controls width="320" src="${item.video}"></video>`
: '<p>비디오 없음</p>'
}
`;
container.appendChild(section);
});
})
.catch(error => {
console.error('data.json 로딩/파싱 에러:', error);
});
</script>
</body>
</html>
<html lang="ko">
<head>
<meta charset="UTF-8" />
<title>EGIS 미디어 예시</title>
</head>
<body>
<h1>EGIS 미디어 예시</h1>
<div id="media-container"></div>
<script>
// data.json 파일을 비동기 요청(fetch)하여 JSON 데이터를 가져옵니다.
fetch('data.json')
.then(response => {
if (!response.ok) {
throw new Error('데이터를 가져오는 데 실패했습니다. 상태 코드: ' + response.status);
}
return response.json();
})
.then(jsonData => {
// JSON 구조가 { "media": [ ... ] } 라고 가정
const mediaArray = jsonData.media;
const container = document.getElementById('media-container');
// media 배열을 순회하며 각 항목을 화면에 표시
mediaArray.forEach(item => {
// item은 { id, title, description, image, audio, video } 등의 필드를 가정
const section = document.createElement('section');
section.style.border = '1px solid #ccc';
section.style.margin = '10px';
section.style.padding = '10px';
// HTML 템플릿 문자열을 구성
section.innerHTML = `
<h2>${item.title}</h2>
<p>${item.description}</p>
${
item.image
? `<img src="${item.image}" alt="이미지" width="200" />`
: '<p>이미지 없음</p>'
}
<br/>
${
item.audio
? `<audio controls src="${item.audio}"></audio>`
: '<p>오디오 없음</p>'
}
<br/>
${
item.video
? `<video controls width="320" src="${item.video}"></video>`
: '<p>비디오 없음</p>'
}
`;
container.appendChild(section);
});
})
.catch(error => {
console.error('data.json 로딩/파싱 에러:', error);
});
</script>
</body>
</html>
EGIS 미디어 예시
댓글목록 0
등록된 댓글이 없습니다.