webpack 사용 시 비디오 출력

코드 자체의 문제..라기 보다 영상 파일 자체에 문제가 있었다. <video> 태그에 controls속성을 부과하여 영상의 문제인 것을 파악했다. 오디오만 나오고 영상이 출력되지 않았다.

비디오 파일을 읽기위해 file-loader를 이용하였으며 wepack설정과 js에서 video태그를 추가한 부분만 다시 한번 살펴보자.

 

module: {
    rules: [
      {
        test: /\.s?css$/,
        use: [
          'style-loader',
          'css-loader',
          'sass-loader'
        ]
      },
      {
        test: /\.mp4$/,
        use: [
          {
            loader: 'file-loader',
            options: {
              name: "[name].[ext]",
              outputPath: "video"
            }
          }
        ]
      }
    ]
  }

file-loader를 사용하여 mp4파일을 읽을 수 있게 하였다.

name 옵션을 추가했는데 이것은 파일명을 변경하는 것이다. 기본적으로 설정된 해쉬값을 퀴리스트링으로 옮겨서 'bg.svg?b08916f341839041bb8a5d07051ef13c' 형식으로 파일을 요청하도록 변경했다.

publicPath라는 옵션도 존재하는데 파일을 사용할 때 경로 앞에 추가되는 문자열이다. (해당 코드에는 존재X) output에 설정한 'dist' 폴더에 파일을 옮겨질 것이니깐 publicPath 값을 './dist/'로 설정할 수 있다. 이 파일을 사용하는 측에서는 'bg.svg'를 'dist/bg.svg'로 변경하여 사용할 것이다.

 

svg는 벡터를 기반으로 이미지를 표현한다. 그러다보니 크기를 조절함에 따라 깨지는 것이 없고, 용량이 작기 때문에 웹에서 자주 사용하는 이미지 형식이다.

 

import video from '../video/sister.mp4';

function addVideo() {
  const videoAdd = document.createElement('video');
  videoAdd.src = video;
  videoAdd.setAttribute("controls", "");

  const videoPlayerEl = document.querySelector('.player');
  videoPlayerEl.appendChild(videoAdd);
}

addVideo();

아주 간단한 js를 구현했다. video요소를 만들고 src값으로 import한 video주소를, 속성으로 controls를 추가하였고

부모 클래스인 player에 자식으로 넣어주었다.