비디오 디렉티브

이 문서는 위키링크 비디오 임베드 기능을 별도 페이지로 정리합니다. 기본 삽입, 캡션 지정, mp4/webm 파일 구성까지 운영 문서에서 자주 사용하는 패턴을 분리해 설명합니다.

위키링크 비디오 임베드

위키링크 비디오는 영상 파일을 문서 안에서 직접 재생해야 할 때 사용합니다. | 뒤에 캡션을 넣으면 영상 목적을 명확히 보여줄 수 있고, 같은 파일이라도 문맥에 따라 다른 설명으로 재사용할 수 있습니다.

기본 작성 문법

![[test video.mp4]]

기본 작성 문법으로 비디오 렌더링

동해물과 백두산이 마르고 닳도록, 하느님이 보우하사 우리나라 만세. Lorem ipsum dolor sit amet, consectetur adipiscing elit. 봄이 오면 꽃이 피고, 여름에는 나무가 무성합니다. 강물은 유유히 흘러가고, 구름은 바람에 따라 모양을 바꿉니다.

test video

새는 하늘을 날고, 물고기는 물 속을 헤엄칩니다. 계절은 반복되지만주 매번 새롭습니다. 모든 시작은 한 걸음에서 비롯되며, 빨간색 글자 이것은 화면 서식 확인을 위한 더미 텍스트입니다.

`figcaption` 적용 작성 문법

![[test video.mp4|설치 단계 3 - 환경 변수 확인]]

`figcaption` 작성 문법으로 비디오 렌더링

하늘과 바람과 별과 시를 노래하며 살아가는 것은 참으로 행복한 일이다. 봄이 오면 꽃이 피고, 여름에는 나무가 무성합니다. Sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. 강물은 유유히 흘러가고, 회색 글자구름은 바람에 따라 모양을 바꿉니다.

Lorem ipsum — 더미 비디오 캡션

새는 하늘을 날고, 물고기는 물 속을 헤엄칩니다. 빛이 있으면 반드시주 그림지가 따르는 법입니다. 빨간색 글자, 이것은 화면 서식 확인을 위한 더미 텍스트입니다. 사람들은 저마다의 꿈을 가지고 그것을 향해 한 걸음씩 나아가고 있다.

mp4/webm 파일 구성

mp4를 기준으로 문법을 작성하되 같은 폴더에 webm을 함께 두면 재생 호환성 운영이 쉬워집니다. 확장 렌더러는 ![[파일명.mp4]]를 기준으로 비디오를 생성하고, 같은 이름의 webm 파일이 있으면 source 후보로 함께 구성합니다.

같은 베이스 이름을 유지하는 것이 핵심입니다. 예를 들어 test video.mp4를 문서에 넣었다면 test video.webm을 같은 폴더에 두어야 자동으로 쌍을 맞춰 처리할 수 있습니다.

feature-guide/
- interactive-video/
  - index.md
  - test video.mp4 //비디오파일
  - test video.webm //비디오 파일

작성 방법

작성 순서는 먼저 mp4 파일을 기준으로 문법을 작성하고, 이후 동일 파일명의 webm을 추가하는 방식이 안정적입니다. 문서에서는 링크나 임베드 문법을 바꾸지 않고 파일만 추가해도 렌더러가 source 구성을 갱신하므로 운영 부담이 줄어듭니다.

![[test video.mp4|설치 단계 3 - 환경 변수 확인]]

최종 HTML 렌더링 구조

최종 결과는 figure.video-figure 안에 video와 복수 source, 그리고 필요 시 figcaption이 생성되는 형태로 렌더링됩니다. 브라우저는 위에서 아래 순서로 source를 검사해 재생 가능한 포맷을 선택합니다.

<figure class="video-figure">
  <video controls preload="metadata">
    <source src="./test%20video.webm" type="video/webm" />
    <source src="./test%20video.mp4" type="video/mp4" />
  </video>
  <figcaption>설치 단계 3 - 환경 변수 확인</figcaption>
</figure>

렌더링 해석

webm 재생 가능 브라우저: webm source를 우선 선택합니다.
webm 미지원 브라우저: mp4 source로 자동 폴백합니다.
캡션 지정 시: figcaption이 생성되어 영상 목적을 본문 밖에서도 확인할 수 있습니다.
캡션 미지정 시: figcaption 없이 비디오만 렌더링됩니다.