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