요즘은 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" >}}
동영상이 첨부된 예시는 다음과 같습니다.