블로그에 로컬 동영상 링크하기
목차
요즘은 Youtube, Vimeo 처럼 동영상 스트리밍 서비스를 제공하는 업체가 많이 있어서, 블로그 포스팅에 동영상을 삽입하고 싶다면 이런 서비스를 이용하는 것이 편리합니다.
클라우드 서비스에 공개하기 꺼려지는 동영상을 내 블로그에만 올리고 싶은 경우가 종종 생깁니다.
이 글에서는 이런 경우에 어떻게 해야 하는지 알려드립니다.
이노팩토리 블로그 처럼 Hugo 를 사용하는 곳에서만 적용되는 팁입니다.
video Shortcode 개요
#
Hugo 에서는 로컬 동영상 플레이 기능을 기본 기능으로 제공하지 않습니다.
이 기능은 HTML 에서 video 라는 태그를 통해 브라우저가 기본으로 제공하는 기능입니다.
Hugo 에서는 사용자가 정의한 HTML 조각을 Markdown 컨텐츠에 추가할 수 있는 Shortcode 라는 기능을 제공하기 때문에, 이 두가지를 이용하여 video Shortcode 를 제작하였습니다.
Hugo 에서 video Shortcode 이용하기
#
동영상 파일은 index.md 가 있는 디렉터리에 같이 위치시키면 됩니다.
로컬 동영상파일명을 20230525_181302.mp4 로 가정합니다.
기본 모드로 플레이하기 #
동영상 파일명을 src 값으로 지정하면 해당 파일을 화면에 보여줍니다.
아무런 옵션을 지정하지 않으면, 동영상 제어판이 화면에 표시되고, 수동 시작 모드가 됩니다.
{{< video src="20230525_181302.mp4" >}}
동영상이 첨부된 예시는 다음과 같습니다.
자동 시작 모드로 플레이하기 #
autoplay 속성을 true 로 지정하면 동영상이 자동으로 플레이 됩니다.
이때 제어판은 표시됩니다.
{{< video src="20230525_181302.mp4" autoplay="true" >}}
동영상이 첨부된 예시는 다음과 같습니다.
제어판 없이 자동 시작 모드로 플레이하기 #
controls 속성을 false 로 지정하면 제어판이 사라집니다.
{{< video src="20230525_181302.mp4" controls="false" autoplay="true" >}}
동영상이 첨부된 예시는 다음과 같습니다.