[javascript] Universal Viewer를 사용한 웹 기반 프리젠테이션 기능

30 Nov 2023

javascript

Universal Viewer는 웹 기반의 다양한 미디어 콘텐츠를 표시하고 탐색할 수 있는 오픈 소스 라이브러리입니다. 이것을 사용하여 웹 기반 프리젠테이션 기능을 구현할 수 있습니다.

Universal Viewer란?

Universal Viewer는 다양한 형식의 디지털 자료를 웹 브라우저에서 표시할 수 있는 오픈 소스 뷰어입니다. 이미지, 동영상, 오디오, PDF 등 다양한 형식의 미디어를 지원하며, 편리한 탐색 기능을 제공합니다.

웹 기반 프리젠테이션 구현하기

Universal Viewer를 사용하여 웹 기반 프리젠테이션 기능을 구현하는 방법은 다음과 같습니다.

Universal Viewer 라이브러리를 다운로드하고 웹 페이지에 추가합니다.

<script src="universalviewer.min.js"></script>
<link rel="stylesheet" href="universalviewer.min.css">

프리젠테이션에 사용할 미디어 파일을 준비합니다. 이미지 파일, 동영상 파일 등을 사용할 수 있습니다.
웹 페이지에서 Universal Viewer를 초기화하고 미디어 파일을 로드합니다.

var viewer = new UniversalViewer({
  element: document.getElementById("viewer"),
  iiifManifest: "path/to/manifest.json"
});

viewer.load();

웹 페이지에 표시할 프리젠테이션 슬라이드를 설정합니다. Universal Viewer는 사용자가 슬라이드 간에 탐색할 수 있도록 제공합니다.

viewer.on("canvasIndexChanged", function(event) {
  console.log("Current slide index: " + event.canvasIndex);
});

// 특정 슬라이드로 이동하기
viewer.set(canvasIndex);

필요에 따라 추가적인 기능을 구현할 수 있습니다. 예를 들어, 이전/다음 슬라이드로 이동하는 버튼을 만들거나, 슬라이드 간에 자동으로 전환하는 기능을 추가할 수 있습니다.

참고 자료

Universal Viewer 공식 웹사이트: https://universalviewer.io/
Universal Viewer GitHub 페이지: https://github.com/UniversalViewer/universalviewer

Universal Viewer를 사용하여 웹 기반 프리젠테이션 기능을 구현하면 다양한 환경에서 손쉽게 프리젠테이션을 공유하고 탐색할 수 있습니다. 다양한 형식의 미디어를 표시할 수 있는 Universal Viewer의 강력한 기능을 활용해보세요!