Firebase 배우기 16 - 인트로 비디오 추가하기

특정 상점이나, 조직 등의 웹 페이지를 만들다 보면, 간혹 소개나 홍보용 동영상을 자동으로 재생하고 싶은 경우가 있는데, Firebase를 이용하여 웹서비스 호스팅을 하려는 경우에도 다음과 같은 간단한 한 줄의 명령으로 intro 비디오의 재생이 가능하다.

이렇게 video 태그에 controls 설정을 적용하면, 다음과 같이 비디오 화면 하부에 재생 및 중단 스위치 버튼이 추가되어 표시되며, 이를 통해 해당 동영상을 재생할 수 있게 된다. 동영상은 재생을 위한 로딩에 시간이 걸리므로, 가급적 작은 파일 사이즈를 갖도록 구성하는 것이 바람직하다.

그런데 만일 이런 과정이 번거롭게 느껴지는 경우에는, 해당 웹페이지가 열리면 비디오가 자동으로 재생되도록 설정할 수도 있는데, 다음과 같이 autoplay 설정을 지정해 주면 된다.

다만 일부 브라우저에서는 해당 브라우저의 자체적인 정책에 따라, autoplay 설정이 있는 경우라도, 자동 재생이 안되는 경우가 있을 수도 있다.

만일 재생되는 동영상의 화면 크기를 조절하려고 하는 경우, 다음과 같이 width를 이용하여 가로폭 픽셀수를 지정하면 된다.

참고로, Firebase를 이용한 웹서비스 호스팅을 하는 경우에 intro 비디오를 사용하는 전체 소스 코드 예는 다음과 같다.

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Intro Video</title>
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.3/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-QWTKZyjpPEjISv5WaRU9OFeRpok6YctnYmDr5pNlyT2bRjXh0JMhjY6hW+ALEwIH" crossorigin="anonymous">
<script src="https://www.gstatic.com/firebasejs/8.6.5/firebase-app.js"></script>
<script src="https://www.gstatic.com/firebasejs/8.6.5/firebase-auth.js"></script>
<script src="https://www.gstatic.com/firebasejs/8.6.5/firebase-firestore.js"></script>
<script src="https://www.gstatic.com/firebasejs/8.6.5/firebase-storage.js"></script>
<script src="https://code.jquery.com/jquery-3.7.1.min.js" integrity="sha256-/JqT3SQfawRcv/BIHPThkBvs0OEvtFFmqPF/lYI/Cxo=" crossorigin="anonymous"></script>
<script src="/firebaseConfig.js"></script>
<style>
      video {
border: 3px solid #333; /* 테두리 너비와 색상 설정 */
        border-radius: 10px; /* 테두리 둥글게 설정 */
}
</style>
</head>
<body>
<video src="/asset/shop.mp4" controls width="500"></video>
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.3/dist/js/bootstrap.bundle.min.js" integrity="sha384-YvpcrYf0tY3lHB60NNkmXc5s9fDVZLESaAA55NDzOxhy9GkcIdslK1eN7N6jIeHz" crossorigin="anonymous"></script>
</body>
</html>

Firebase 배우기 16 – 인트로 비디오 추가하기