이어서 메인 페이지 기본 상단 영역에 비디오를 추가해 보겠습니다.
우선 비디오를 추가하기 위해 사이트에서 무료 비디오를 다운로드합니다.
무료 비디오 다운로드 받기
저는 비디오를 어도비 스톡(Adobe Stock)에서 무료 라이선스로 다운로드했습니다.
이미지/비디오 무료 다운로드(https://carrotweb.tistory.com/150)를 참고하세요.
다운로드한 비디오는 MOV 파일입니다. <video> 태그에서 실행되게 하기 위해 MOV 파일을 MP4 파일로 변환해야 합니다.
비디오 MOV 파일을 MP4 파일로 변환
저는 다운로드한 비디오 파일을 어도비 크리에이티브 클라우드 익스프레스(Adobe Creative Cloud Express)를 사용하여 무료로 MP4 파일로 변환하였습니다.
비디오 편집 - MOV 파일 MP4 파일 변환, MP4 파일 용량 줄이기(https://carrotweb.tistory.com/152)를 참고하세요.
MP4 파일 용량 줄이기
저는 비디오 MP4 파일을 용량을 줄이기 위해 VideoSmaller 사이트에서 무료로 MP4 파일의 크기를 줄였습니다.
MP4 파일의 용량이 크면 다운로드 속도와 화면에서 로딩되는 시간이 걸리기 때문에 파일의 용량을 줄이는 것이 좋습니다.
비디오 편집 - MOV 파일 MP4 파일 변환, MP4 파일 용량 줄이기(https://carrotweb.tistory.com/152)를 참고하세요.
참고로
티스토리에서의 외부 파일 업로드를 위해 20MB가 제공하고 있습니다.
비디오 MP4 파일을 업로드하기 위해서는 MP4 파일의 용량을 최소한으로 줄여야 합니다.
먼저 콘솔을 실행하고 Vue 프로젝트가 있는 C:\workspaces\nodeserver\testvue 폴더로 이동합니다. 그리고 콘솔에서 npm run 명령어를 실행합니다.
npm run serve
메인 페이지 기본 상단 영역에 비디오 추가
1. 다운로드한 비디오 MP4 파일을 C:\workspaces\nodeserver\testvue\src\assets 폴더에 복사합니다.
비디오 파일을 C:\workspaces\nodeserver\testvue\src\assets 폴더에 복사하여 배포하게 되면 다음 배포할 때까지 비디오 파일을 변경할 수 없습니다. 그래서 비디오 파일들은 Node 서버의 정적 파일로 처리하시거나 별로 서버로 구성하는 것이 좋습니다.
2. C:\workspaces\nodeserver\testvue\src\views\Home.vue 파일을 오픈합니다. 그리고 <div> 태그(class가 .container) 위에 <video> 태그를 추가합니다.
<template>
<div class="main-top-promotion">
<video class="main-top-promotion-video" autoplay="autoplay" loop="loop" muted="muted">
<source src="../assets/AdobeStock_197561178_AdobeCreativeCloudExpress.mp4" type="video/mp4">
</video>
<div class="container">
<div class="row align-items-center">
<div class="col-sm-12 col-md-6 text-md-start">
<div class="py-3 py-md-5">
<h1 class="text-white fw-bold">
Welcome to Your <br>Vue.JS Application
</h1>
<p class="text-white mb-4 fs-5">
당신의 이야기가 세상을 바꿉니다.
</p>
<router-link :to="{name:'BoardWrite'}" class="btn btn-success">나의 이야기 쓰기</router-link>
</div>
</div>
<div class="col-sm-12 col-md-6">
<img src="../assets/AdobeStock_440217805-removebg-preview.png" alt="" class="img-fluid">
</div>
</div>
</div>
</div>
<div class="home">
<img alt="Vue logo" src="../assets/logo.png">
<HelloWorld msg="Welcome to Your Vue.js App"/>
</div>
</template>비디오가 자동으로 무한 반복하여 플레이가 되기 위해 autoplay(자동 플레이), loop(반복), muted(음소거)를 속성으로 추가합니다. muted가 있어야 자동 실행됩니다.
그리고 <video> 태그의 class에 .main-top-promotion-video를 추가합니다.
그리고 하단에 <style> 태그에 .main-top-promotion-video를 추가합니다.
.main-top-promotion-video {
height: 100%;
width: 100%;
margin: 0px;
padding: 0px;
position: absolute;
left: 0;
top: 0;
object-fit: cover;
}
object-fit는 <img>나 <video>의 크기(넓이, 높이)를 부모 요소에서 어떤 비율로 채울지 설정합니다.
fill은 부모 요소의 크기에 맞게 <img>나 <video>의 크기가 맞추어 설정됩니다. 그래서 <img>나 <video>가 비율대로 조정되지 않고 강제로 넓이와 높이가 변경되어서 찌그러지거나 퍼지게 됩니다.
contain은 부모 요소의 크기에 맞게 <img>나 <video>의 크기가 비율대로 조정되어 설정됩니다. <img>나 <video>의 전체 화면이 부모 요소 안에 들어가게 됩니다. 크기 작으면 확대되어 처리됩니다. (scale-up)
cover은 부모 요소의 크기에 맞게 <img>나 <video>의 크기를 비율대로 조정하여 공백 없이 나오도록 설정됩니다. <img>나 <video>를 부모 요소 안에서 중앙에 위치하게 합니다. 부모 요소보다 크기가 크면 부모 요소의 크기만큼만 나오고 크기가 작으면 확대되어 나옵니다.
none은 <img>나 <video>의 크기와 상관없이 부모 요소 안에서 중앙에 위치하게 설정됩니다.
scale-down은 부모 요소의 크기에 맞게 <img>나 <video>의 크기가 비율대로 조정되어 설정됩니다. 크기가 크면 작게 축소합니다.
3. <style> 태그에 .main-top-promotion 안의 .container를 추가합니다.
.main-top-promotion > .container {
position: relative;
}<video> 태그의 position이 absolute이기 때문에 <div> 태그보다 위에 나오게 됩니다. 그래서 <div> 태그의 position을 relative로 설정해야 합니다. z-index를 추가하셔도 됩니다.
비디오 위에 이미지가 있으니 조금 어색해 보이기는 합니다.
오른쪽 영역을 삭제해 보겠습니다.
<template>
<div class="main-top-promotion">
<video class="main-top-promotion-video" autoplay="autoplay" loop="loop" muted="muted">
<source src="../assets/AdobeStock_197561178_AdobeCreativeCloudExpress.mp4" type="video/mp4">
</video>
<div class="container">
<div class="row align-items-center">
<div class="col-sm-12 col-md-6 text-md-start">
<div class="py-3 py-md-5">
<h1 class="text-white fw-bold">
Welcome to Your <br>Vue.JS Application
</h1>
<p class="text-white mb-4 fs-5">
당신의 이야기가 세상을 바꿉니다.
</p>
<router-link :to="{name:'BoardWrite'}" class="btn btn-success">나의 이야기 쓰기</router-link>
</div>
</div>
</div>
</div>
</div>
<div class="home">
<img alt="Vue logo" src="../assets/logo.png">
<HelloWorld msg="Welcome to Your Vue.js App"/>
</div>
</template>
비디오 위에 이미지가 없으니 괜찮아 보입니다.