[javascript] SweetAlert와 동영상 재생 기능

24 Nov 2023

javascript

SweetAlert는 사용자에게 간단하고 아름다운 팝업창을 제공하는 JavaScript 라이브러리입니다. 이 라이브러리를 사용하여 SweetAlert 팝업창에 동영상을 재생하는 기능을 추가할 수 있습니다. 이번 포스트에서는 SweetAlert와 HTML5 video 요소를 사용하여 동영상을 팝업창에서 재생하는 방법을 알아보겠습니다.

SweetAlert 설치하기

먼저 SweetAlert를 설치해야 합니다. npm을 사용하여 설치하려면 아래의 명령어를 실행하세요.

npm install sweetalert

CDN을 사용하려면 HTML 파일의 <head> 태그 내에 아래의 코드를 추가하세요.

<script src="https://cdn.jsdelivr.net/npm/sweetalert@11"></script>

동영상 재생 기능 추가하기

HTML 파일에는 동영상을 재생할 수 있는 <video> 요소가 필요합니다. 아래의 코드를 사용하여 <video> 요소를 추가하세요.

<video id="myVideo" controls>
    <source src="path/to/video.mp4" type="video/mp4">
</video>

SweetAlert 팝업창을 띄우려면 스크립트 내에서 Swal.fire() 함수를 호출해야 합니다. 아래의 코드를 사용하여 동영상을 팝업창에서 재생할 수 있도록 SweetAlert 팝업창을 설정하세요.

document.querySelector('#myVideo').addEventListener('click', () => {
    Swal.fire({
        html: '<video id="popupVideo" controls><source src="path/to/video.mp4" type="video/mp4"></video>',
        showCancelButton: true,
        showConfirmButton: false,
        onAfterClose: () => {
            document.querySelector('#popupVideo').pause();
        }
    });
});

위의 코드에서 Swal.fire() 함수의 html 옵션에 동영상을 포함한 HTML 코드를 넣어 팝업창 내에 동영상을 표시합니다. 또한, 팝업창이 닫힐 때 동영상 재생을 멈추기 위해 onAfterClose 콜백 함수를 사용합니다.

실행 결과 확인하기

위의 코드를 HTML 파일에 추가하고 동영상 파일의 경로를 올바르게 설정한 뒤, 브라우저에서 HTML 파일을 실행하면 동영상을 클릭할 때 SweetAlert 팝업창이 열리고 동영상이 재생됩니다.

결론

이번 포스트에서는 SweetAlert와 HTML5 video 요소를 사용하여 동영상을 팝업창에서 재생하는 방법을 알아보았습니다. SweetAlert는 사용자에게 편리하고 아름다운 인터페이스를 제공하여 웹 애플리케이션의 사용성을 향상시킬 수 있습니다. 동영상 재생 기능을 추가하여 사용자에게 더욱 흥미로운 경험을 제공해보세요.