[시길] epub3에서 동영상 사이즈 조정

epub3에서 동영상 사이즈 조정

세로로 긴 숏츠(Shorts) 형식의 비디오를 EPUB3에 삽입하려면 가로(width)보다 세로(height)를 길게 설정해야 합니다. 보통 스마트폰 화면에서 보기 좋도록 9:16 비율(예: 360x640, 720x1280)로 설정하는 것이 좋습니다.

숏츠폼을 전자책에 사용한 경우

1. 비디오 태그를 활용한 삽입 (9:16 비율)

<video controls width="360" height="640">
    <source src="../Video/V0002.mp4" type="video/mp4">
    이 비디오는 현재 장치에서 지원되지 않습니다. <a href="../Video/V0002.mp4">다운로드</a>하여 확인하세요.
</video>

• width="360" height="640" → 세로형 비디오의 비율(9:16)
• controls → 사용자가 재생, 일시 정지 등을 할 수 있도록 컨트롤 추가
• <source> 태그 → EPUB 리더기가 적절한 형식을 찾을 수 있도록 지원

2. CSS를 활용하여 반응형 지원

뷰어에 따라 화면 크기가 다를 수 있으므로 CSS를 활용해 반응형으로 조절하면 더 유연하게 적용됩니다.

HTML 코드

<video class="vertical-video" controls>
    <source src="../Video/V0002.mp4" type="video/mp4">
</video>

CSS 코드 (styles.css)

.vertical-video {
    width: 100%; /* 화면 크기에 맞게 조정 */
    max-width: 360px; /* 최대 너비 설정 */
    height: auto; /* 세로 길이 자동 조정 */
    display: block;
    margin: auto;
}

• width: 100% → 화면 크기에 맞춰 자동 조정 (뷰어에 따라 유동적 적용)
• max-width: 360px → 가로 최대 크기 제한
• height: auto → 원본 비율을 유지하며 세로 크기 자동 조정

3. 비디오를 전체 화면으로 보이도록 설정

만약 사용자가 클릭했을 때 전체 화면 모드로 볼 수 있도록 설정하려면 playsinline 속성을 추가합니다.

<video class="vertical-video" controls playsinline>
    <source src="../Video/V0002.mp4" type="video/mp4">
</video>

• playsinline → 모바일 환경에서 전체 화면 강제 전환을 막고 인라인 재생 가능

4. EPUB 뷰어 테스트 시 고려할 사항

1. 파일 포맷
   • EPUB 뷰어는 주로 MP4 (H.264) 포맷을 지원하므로, 비디오가 MP4 형식인지 확인하세요.
   • WEBM이나 OGG는 일부 뷰어에서 지원되지 않습니다.
2. 파일 크기 최적화
   • EPUB 파일 크기를 줄이려면 FFmpeg을 사용해 비디오를 최적화하세요.

   ffmpeg -i input.mp4 -vf "scale=360:640" -c:v libx264 -preset slow -crf 28 output.mp4
   

   • 위 명령어는 360x640 해상도로 비디오 크기를 줄여 EPUB 용량을 최적화합니다.
3. 뷰어별 호환성 확인
   • Apple Books, Adobe Digital Editions, Calibre 등 다양한 EPUB 뷰어에서 테스트하세요.
   • 일부 뷰어에서는 비디오가 재생되지 않을 수 있으므로 대체 텍스트 또는 다운로드 링크 제공을 고려하세요.

---

결론

세로형 비디오(숏츠)를 EPUB에 삽입하려면 width="360" height="640"로 설정하고, CSS를 활용해 반응형으로 조정하면 다양한 화면에서 적절하게 표시됩니다. 또한 playsinline 속성을 추가하면 모바일에서 원활하게 재생할 수 있습니다.