스마트홈 위키

웹에 동영상 넣기

Properties2
tags프론트엔드, 인트로, 매뉴얼
aliases동영상 넣기, 매뉴얼 영상, 사용 방법 영상, video 태그, 영상 안 나옴, 인트로 매뉴얼

2 min read

배경

웹 인트로의 매뉴얼 영역에 플랫폼 사용 방법 영상을 넣기로 함. 유튜브 업로드 후 <iframe>을 넣는 방법도 있었지만, 영상을 외부에 올리지 않기 위해 웹 서버에 직접 두고 <video> 태그로 재생하는 쪽을 택함.

변경 내용

먼저 시도한 방법 (실패)

영상을 /smahshare/common에 올리고 Spring Boot에서 핸들링하도록 WebConfig.java에 리소스 핸들러를 추가함.

registry.addResourceHandler("/video/**")
        .addResourceLocations("file:/smahshare/common/");

동영상이 불러와지지 않았음. 매뉴얼 파일 다운로드도 같이 안 됐음. 아파치 쪽 설정이 따로 필요한 구조였음.

최종 방법

영상을 프론트 public 폴더에 넣어 정적 자원으로 같이 배포함.

  • 위치: public/documents/manual/web_manual.mp4
  • 파일: frontend/src/views/intro/components/TheManual.vue
<b-row class="justify-content-center mt-5">
  <div>
    <h1>플랫폼 사용 방법</h1>
    <video controls style="width: 800px; height: 522px;">
      <source src="/documents/manual/web_manual.mp4" type="video/mp4" />
    </video>
  </div>
</b-row>

정적 파일(영상, 매뉴얼 문서)은 서버 공유 폴더가 아니라 public 폴더에 넣어 배포함. 이 규칙은 다운로드 파일에도 똑같이 적용됨.

확인 방법

  1. 배포 후 인트로 화면에서 영상이 재생되는지 봄.
  2. 매뉴얼 다운로드 링크가 404가 아닌지 확인함.
  3. 안 나오면 브라우저 네트워크 탭에서 /documents/manual/ 경로의 응답 코드를 봄.

관련

백링크