HTML5 <video> 플레이어의 10가지 고급 기능

우리는 요소를 사용하여 웹 페이지에 비디오를 추가하는 기본 사항을 다루었으며 요소의 고급 기능을

<video>

간략하게 나열했습니다 .

<video>

이 블로그 게시물에서는 이러한 고급 기능 중 10가지를 자세히 살펴보고 HTML 비디오 플레이어를 통해 웹사이트에서 해당 기능을 사용할 수 있는 방법을 코드 예제와 함께 설명하겠습니다.우리가 다룰 내용은 다음과 같습니다:

비디오에 대한 여러 소스 지정
비디오 플레이어 컨트롤 표시 또는 숨기기
특정 지점이나 타임스탬프에서 비디오를 시작하거나 중지합니다.
비디오가 시작되기 전에 비디오 포스터 또는 썸네일 표시
재생하기 전에 비디오 미리 로드
iOS의 Safari에서 인라인으로 비디오 재생
자동재생, 반복 및 음소거
재생 중 캡션 또는 자막 표시
JavaScript를 통해 더 많은 기능에 액세스
객체 맞춤 CSS 속성을 사용하여 가로 플레이어에 세로 동영상 맞추기

비디오에 대한 여러 소스 지정

모든 브라우저가 모든 비디오 컨테이너와 코덱을 지원하는 것은 아닙니다. 모든 브라우저에 적합하도록 하나의 비디오 플레이어에 대한 소스로 여러 비디오 파일을 제공할 수 있습니다.요소를 사용하여 여러 소스를 지정할 수 있습니다

<source>

. 또한 option 속성을 사용하여 MIME 유형을 지정하는 것이 좋습니다

type

.예는 다음과 같습니다.

<video controls>
    <source src="vid1.webm" type='video/webm;codecs="vp8, opus"'/>
    <source src="vid2.mp4" type='video/mp4;codecs="avc1.4D401E, mp4a.40.2"'/>
</video>

소스 목록은 위에서 아래로 시도됩니다.하나의 비디오 형식만 사용할 수 있는 경우 다음 속성을 사용하여 직접 지정할 수 있습니다

src

<video src="vid1.mp4"></video>

비디오 플레이어 컨트롤 표시 또는 숨기기

재생/일시 중지, 볼륨, 전체 화면 전환 및 탐색 슬라이더와 같은 컨트롤은 다음

controls

속성을 사용하여 쉽게 전환할 수 있습니다.

<video controls="controls" preload="none" src="/static/short.mp4" width="600" height="360"></video>

속성을 지정하지 않으면 컨트롤이 표시되지 않습니다.일부 특정 컨트롤은 속성을 사용하여 별도로 숨길 수 있습니다

controlsList

(Chrome 58+만 해당). 예:

<video controls="controls" preload="none" controlsList="nofullscreen nodownload" src="/static/short.mp4" width="600" height="360"></video>

위의 예에서 전체 화면 및 다운로드 버튼은 꺼지거나 숨겨지지만 사용자가 Chrome을 사용하는 경우에만 가능합니다.

여기에서

기본 Chrome 비디오 플레이어 UI를 제어하는 방법에 대한 더 많은 예를 찾을 수 있습니다 .

특정 지점이나 타임스탬프에서 비디오를 시작하거나 중지합니다.

미디어 조각

(

#t=

의 앵커 )을 사용하면

src

비디오가 재생을 시작하고 재생을 종료해야 하는 시간을 지정할 수 있습니다. 이 예에서는 비디오 재생이 15초에 시작되어 20초에 종료됩니다.

<video controls="controls" preload="metadata" src="/static/short.mp4#t=15,20" width="600" height="360"></video>

더 많은 예:

#t=10,20

=> 시간 간격의 결과

[10,20)
#t=,20

=> 시간 간격의 결과

[0,20)
#t=10

=> 시간 간격의 결과

[10,end)

비디오가 시작되기 전에 비디오 포스터 또는 썸네일 표시

동영상이 자동으로 재생되지 않는 경우 동영상 미리보기 이미지를 표시하여 시청자에게 콘텐츠를 미리 보여주는 것이 좋습니다.비디오에 포스터가 포함되도록 하려면

poster

포스터 이미지에 속성과 URL을 추가하기만 하면 됩니다.

<video controls="controls" poster="/static/poster.png" preload="none" src="/static/short.mp4" width="600" height="360"> </video>

재생하기 전에 비디오 미리 로드

속성 을 추가하면 다양한 방법으로 비디오를 미리 로드할 수 있습니다

preload

.다음과 같은 옵션이 있습니다.

없음 – 사전 로드가 수행되지 않습니다.
메타데이터 – 크기, 첫 번째 프레임, 트랙 목록, 지속 시간 등 메타데이터만 미리 로드됩니다.
auto – 페이지가 로드되자마자 오디오/비디오 로드가 시작되어야 합니다.

위의 대부분의 플레이어에서는

preload="none"

사용자가 비디오를 재생하지 않더라도 상당한 데이터를 사용할 수 있기 때문에 비디오가 웹 페이지와 함께 로드되는 것을 방지하는 데 사용되었습니다. 따라서 이 블로그 게시물이 많은 조회수를 얻으면 호스팅 제공업체로부터 높은 데이터 전송 요금을 청구받을 수 있습니다.브라우저가 비디오 메타데이터만 미리 로드하고 첫 번째 프레임을 포스터로 표시하도록 허용하는 방법은 다음과 같습니다.

<video controls="controls" preload="metadata" src="/static/short.mp4" width="600" height="360"></video>

iOS의 Safari에서 인라인으로 비디오 재생

iOS 10+의 Safari는 비디오의 인라인 재생을 지원합니다. iOS9까지 웹 비디오를 재생하면 장치에 전체 화면이 표시되었습니다. 인라인 재생을 활성화하려면 다음 속성을 사용해야 합니다

playsinline

<video playsinline src="/static/short.mp4"> </video>

자동재생, 반복 및 음소거

자동 재생

다음 속성 을 추가하면 비디오가 준비되는 즉시 자동 재생될 수 있습니다

autoplay

<video autoplay controls src="/static/short.mp4"> </video>

음소거된 자동 재생은 iOS10 이상(저전력 모드가 아닌 경우)의 Safari와 Android의 Chrome 53 이상에서 작동합니다. 자세한 내용은

iOS용 새 <video> 정책

및

모바일에서 자동 재생 음소거를

확인하세요 . 모바일 장치에서 Google과 Apple은 이전에 비디오 자동 재생을 차단했습니다.

고리

비디오를 반복해서 재생하려면 다음

loop

속성을 사용할 수 있습니다.

<video loop controls src="/static/short.mp4"></video>

소리를 음소거

때로는 비디오의 오디오가 필요하지 않은 경우도 있습니다. 비디오의 오디오를 끄려면 코드

muted

에 속성을 추가하기만 하면 됩니다

<video>

<video muted controls src="/static/short.mp4"> </video>

여기에 동일한 비디오가 포함되어 있지만 이번에는 음소거 속성이 추가되었습니다.

재생 중 캡션 또는 자막 표시

요소 를 사용하면

<track>

자막, 스크린 리더 설명, 캡션을 비디오에 추가할 수 있습니다.요소 는 요소 내의 요소와

<track>

정확히 동일하게 작동합니다 . WebVTT 형식 의 파일을 가리키는 속성이 있습니다 . 를 사용하면 UI에서 사용자에게 표시될 이름을 지정할 수 있습니다. 를 사용하면 캡션의 언어를 지정할 수 있습니다. 이 속성은 자막(기본값), 캡션, 설명, 챕터 및 메타데이터 옵션과 함께 트랙을 사용하는 방법을 설정합니다.

<source>

<video>

src

label

srclang

kind

출처 간 캡션을 로드할 때 속성 crossorigin="anonymous"을

지정해야 할 수도 있습니다 .

Content-Type:text/vtt.vtt 파일을 제공하는 웹 서버는 .vtt 파일에 대한 헤더를

제공해야 할 수도 있습니다 .

<video controls="" preload="metadata" width="422" height="253">
    <source src="/static/the-web-is-always-changing.webm" type="video/webm">
    <track label="English subtitles" kind="subtitles" srclang="en" src="/static/the-web-is-always-changing.vtt" default="">
</video>