Vue: video 삽입하기 (자동재생, 반복재생)

Vuex를 활용한 프로젝트에서, 비디오를 삽입하고 그 위에 문구를 띄우고자 한다.

방법은 크게 video와 iframe, 두 가지이다.

 

 

1. video 파일을 가지고 있는 경우, video

1. 동영상 삽입

src/assets/video 폴더를 생성하고, 그 안에 비디오 파일을 넣어뒀다.

이 경우, video tag와 source tag를 활용하면 된다.

먼저, 비디오가 화면에 꽉 차지 않을 경우 여백이 남는데 그 부분의 css를 설정할 수 있도록 div 태그를 만든다.

그리고 그 안에 video tag를 넣고 그 밑에 source tag를 넣는다.

source tag의 src 속성에는 현재 비디오가 있는 위치-나는 상대 위치를 선호한다-를 넣으면 된다.

 

2. 동영상 속성 설정

동영상 자동재생을 하고 싶은 경우, video tag에 autoplay="autoplay"를 넣는다.

동영상 반복재생을 하고 싶은 경우, video tag에 loop="loop"를 넣는다.

이 때 새로고침을 반복해보면 어떨 때는 동영상이 자동 재생되고, 어떨 때는 되지 않는다.

검색해 보니까 autoplay 기능이 잘 먹지 않기 때문이고, muted="true"를 하면 항상 자동재생이 된다.

하지만 muted="true"를 하면 동영상의 소리가 없어지기 때문에 필요에 따라 잘 사용해야 한다.

 

3. 동영상 위에 글자 올리기

앞서 video tag 상위에 div tag를 만들어줬었다. 여기서 background-color 등등을 설정하면 되는데, 만약 동영상 위에 글자를 올리고 싶은 경우에는 이 div tag에서 position: relative로 설정한다.

그리고 글자의 tag를 position: absolute로 설정하면 된다. (top, left는 50% 등 원하는 위치에 맞게 조절하면 된다.)

<template>
  <div>
    <div class="video-wrap">
      <video class="video" ref="video" autoplay="autoplay" loop="loop" muted="true">
        <source src="@/assets/video/...">
      </video>
      <div class="content">
      	abc
      </div>
    </div>
  </div>
</template>

<style>
  .video-wrap {
    background-color: black;
    position: relative;
  }

  .content {
    position: absolute;
    top: 50%;
    left: 50%;
  }
</style>

 

 

2. video url을 가지고 있는 경우, iframe

iframe 태그는 보통 유튜브 영상을 삽입할 때 많이 사용한다고 한다.

1번에서는 video 안에 source tag를 넣었던 반면, 여기서는 iframe tag만 사용한다.

src는 video의 url인데, 유튜브 영상의 경우 video key를 활용해 videoUrl을 가져오게 된다.

따라서 methods에서 video URL을 얻는 함수를 만들고, iframe의 src에 해당 url을 넣으면 된다.

또, 유튜브 영상을 삽입할 때는 video URL 자체에다가 muted, autoplay, loop 기능을 적어줘야 한다.

<template>
    <div class="video-wrap">
        <iframe 
            id="ytplayer" type="text/html" 
            width="100%" height="100%" 
            :src="videoURL(video)" 
            frameborder="0">
        </iframe>
    </div>
</template>

<script>
export default {
    ...
    methods: {
        videoURL(video) {
          return "https://www.youtube.com/embed/" + video.key + "?amp;autoplay=1&mute=1&amp;playlist=" + video.key + "&loop=1"
        },
    },
</script>