기본 동영상 알아보기 참여도 높이기
웹사이트에 동영상을 추가하고 싶으신가요? 기기와 네트워크 연결이 더 빠르고 강력해지면서 이미지를 넘어 웹을 빌드하는 기술 도구 상자에 동영상을 추가할 수 있습니다. 연구에 따르면 동영상이 포함된 웹사이트는 참여도와 판매량이 더 높습니다. 따라서 아직 사이트에 동영상을 추가하지 않은 경우에도 언젠가는 동영상을 추가하게 될 것입니다.
대부분의 경우 사이트에 추가하는 동영상 파일이 다운로드되는 파일 중 가장 큰 파일이 됩니다. 따라서 모든 고객에게 빠르고 안정적으로 재생할 수 있도록 파일을 빌드하는 것이 매우 중요합니다.
동영상은 참여도와 고객 만족도를 높일 수 있지만 재생되지 않거나 재생 중에 멈추는 동영상은 고객의 불만을 야기할 수 있습니다.
이 게시물에서는 동영상 전송을 위한 HTML5 <video> 태그 사용에 중점을 두므로 스트리밍 동영상을 다루지 않습니다.
그럼 시작해 보겠습니다.
<video> 태그
당연한 것 같죠? 동영상을 추가하려면 <video> 태그를 추가하고 소스를 가리킨 다음 시작하면 됩니다.
<video src="myVideo.mp4">
맞습니다. 대략적으로 웹에 동영상을 추가하는 데 필요한 작업은 이 정도입니다. 하지만 동영상 태그에 추가하여 동영상의 레이아웃과 전송을 개선할 수 있는 속성은 많습니다.
<source> 태그
웹에서 동영상 전송을 개선하는 가장 좋은 방법은 브라우저에 전송되는 파일을 최적화하는 것입니다. 이를 위해서는 <source> 태그를 사용하면 됩니다.
<video>
<source src="myWebmVideo.webm" type="video/webm">
<source src="myh265Video.mp4" type="video/mp4">
<source src="myh264Video.mp4" type="video/mp4">
</video>
이는 세 개의 별도 소스 파일을 참조합니다. 브라우저는 맨 위에서 시작하여 사용할 수 있는 첫 번째 형식과 코덱을 선택합니다. 동영상 업계에서 일반적으로 컨테이너라고 하는 파일 형식은 각각 다른 속성을 가진 여러 코덱으로 저장할 수 있습니다. (자세한 내용은 여기를 참고하세요.) 위 예시에서 첫 번째 선택사항은 WebM 형식(VP8 또는 VP9 코덱으로 인코딩할 수 있음)이며, 이 형식은 전 세계 사용자의 78%가 지원합니다(작성 시점 기준). 두 번째 옵션은 iOS 및 이후 버전의 Mac에서 지원되는 mp4의 H.265 코덱입니다. 이러한 코덱은 최신 코덱으로 데이터 압축이 개선되었으며 이전 동영상 형식과 동일한 품질의 동영상을 제공합니다.
마지막으로 H.264 mp4가 있습니다. 이 형식은 모든 전 세계 사용자의 92%가 지원하지만 이전 형식이며 따라서 일반적으로 WebM 또는 H.265 동영상보다 훨씬 큽니다. 다음 예에서는 2분 길이의 영화의 차이를 확인할 수 있습니다.
| 코덱 | 파일 크기 |
|---|---|
| VP8 | 5.5MB |
| VP9 | 4.2MB |
| H.265 | 5.4MB |
| H.264 | 16.1MB |
더 작은 파일을 전송하는 것이 동영상을 더 효과적으로 전송하기 위한 최선의 성능 최적화입니다. 작은 동영상이 다운로드되면 동영상 재생이 더 빨리 발생하고 동영상 버퍼가 더 빨리 채워집니다. 따라서 동영상 재생 중 멈춤이 줄어듭니다. 또한 서버 부하가 감소하여 여러 동영상 파일의 증가된 스토리지 요구사항을 보완합니다.
프리로드 속성
동영상이 로컬에 다운로드되어 저장될 때까지는 동영상 재생을 시작할 수 없습니다. 미리 로드 속성을 사용하면 페이지 로드 시 다운로드되는 동영상 양을 제어할 수 있습니다. 미리 로드 속성에는 auto, metadata, none의 세 가지 값이 있습니다.
preload='auto'
'auto'를 사용하면 사용자가 재생을 눌렀는지 여부와 상관없이 전체 동영상이 다운로드됩니다. 이렇게 하면 사용자가 재생을 누르기 전에 동영상이 로컬에 다운로드되므로 빠른 동영상 재생이 가능합니다. 데이터 사용량 (및 서버 로드 관점에서)
시청할 가능성이 매우 높은 경우에만
사용해야 합니다. 그러지 않으면 전체 동영상 다운로드의 모든 데이터가 낭비됩니다.
preload='metadata'
이는 Chrome 및 Safari의 미리 로드에 대한 기본 설정입니다. 'metadata'를 사용하면 동영상의 처음 3% 가 다운로드됩니다. 이렇게 하면 'auto'에 주의해야 할 사항이 있기는 하지만 동영상의 3% 만 다운로드하면 전체 동영상보다 훨씬 적은 서버/데이터 사용 비용을 보유하면서도 빠른 동영상 시작을 위해 동영상의 일부를 로컬에 저장할 수 있습니다.
preload='none'
이렇게 하면 데이터가 가장 많이 절약되지만 재생을 누르면 동영상이 더 느리게 시작됩니다. 설정에 따라 기기에 로컬로 미리 로드되는 동영상 크기가 0KB이기 때문입니다. 존재하지만 재생될 가능성이 낮은 동영상에는 이 설정이 적합합니다. 사용자가 브라우저에서 라이트 모드를 사용 설정한 경우에도 사용될 수 있습니다.
포스터
동영상 재생이 시작되기 전에 동영상 창 위에 포스터 이미지를 표시할 수 있습니다.
<video src="myVideo.mp4" poster="/image/myVideoImage.jpg">
포스터가 없는 동영상은 시작하기 전에 검은색 화면이 표시됩니다.
포스터가 있는 동영상은 훨씬 더 눈길을 끕니다.
페이지에 검은색 상자 대신 사진을 추가하면 웹사이트의 참여도와 상호작용이 높아집니다. 그러나 poster 속성을 사용하면 동영상 다운로드가 시작되기 전에 이미지 다운로드가 추가됩니다. 따라서 자동재생되는 동영상에는 포스터 추가를 피하는 것이 좋습니다(추가 다운로드로 인해 동영상 다운로드가 지연되기 때문).
재생 컨트롤
controls 속성을 추가하면 재생 컨트롤이 추가됩니다. 이 두 가지가 없으면 고객이 동영상을 시작하거나 중지할 수 없습니다. 사용자가 동영상을 중지 및 일시중지하고 볼륨을 변경할 수 있도록 동영상에 이를 추가해야 합니다. 백그라운드 또는 연속 재생 동영상의 경우 이 속성을 생략할 수 있습니다.
음소거
muted 속성으로 인해 재생이 음소거 상태에서 시작됩니다. 컨트롤이 제공되지 않으면 재생 전체에 걸쳐 음소거된 상태로 유지됩니다. 이러한 경우에는 동영상에서 오디오 트랙을 삭제하는 것이 좋습니다. 이렇게 하면 고객에게 전송되는 동영상 파일의 크기가 더욱 줄어듭니다.
컨테이너 및 코덱과 마찬가지로 역다중화라고도 하는 오디오 파일 삭제도 이 문서에서 다루지 않습니다. 미디어 조작 요약 시트에서 안내를 확인하세요.
루프
콘텐츠를 반복하는 동영상 (예: 애니메이션 GIF)을 제공하려면 loop 속성을 추가합니다. 동영상 파일은 일반적으로 애니메이션 GIF보다 훨씬 작으므로 이 메커니즘을 사용하면 GIF를 동영상 파일로 대체할 수 있습니다.
동영상 자동재생
동영상이 즉시 재생되도록 하려면(예: 배경 동영상 또는 애니메이션 GIF처럼 반복 재생되는 동영상) autoplay 속성을 추가하면 됩니다.
<video src="myVideo.mp4" playsinline autoplay>
하지만 동영상이 모바일 브라우저에서 자동재생되려면 muted 속성도 추가해야 합니다.
<video src="myVideo.mp4" playsinline autoplay muted>
결론
웹사이트에 동영상을 추가하기만 하면 고객의 참여를 유도할 수 있지만, 동영상 재생이 원활하고 중단되지 않도록 콘텐츠를 제대로 전송하는 것이 중요합니다. <video> 태그의 기본 속성을 사용하면 웹사이트를 방문하는 모든 사용자에게 끊김 없는 동영상을 제공하는 데 큰 도움이 됩니다.