HTML 멀티미디어 비디오

    2018-02-14 03:38:44 작성

    <video>

    <video> 요소는 웹페이지에 비디오를 삽입하는 표준방법을 제시합니다.
    src 속성에 비디오 파일을 지정하거나 <source> 태그를 이용하여 여러 미디어 리소스를 지정할 수 있습니다.


    <video> 태그의 속성
    속성 설명
    autoplay 웹문서 로딩시 비디오 자동재생
    controls 비디오 제어기 표시 여부
    loop 반복 재생 여부 지정
    muted 음소거 여부 지정
    preload 웹 문서가 로딩될 때 비디오의 로딩상태를 지정
    • auto : 기본값, 비디오 파일을 자동으로 로드함
    • metadata : 비디오의 메타정보(크기, 첫 프레임 등)만 로드함
    • none : 사용자가 재생하기 전에 미리 로드하지 않음
    autoplay 속성이 있는경우 무시 됨
    src 재생할 비디오의 경로 지정
    width,height 너비와 높이를 각각 지정합니다.
    poster 비디오 데이터가 설정되지 않거나, 로딩되는 동안에 보여줄 이미지


    HTML 비디오 지원
    브라우저 mp4 webm ogg
    엣지 YES NO NO
    크롬 YES YES YES
    파이어폭스 YES YES YES
    사파리 YES NO NO
    오페라 YES YES YES

    비디오 MIME-type
    형식 MIME-type
    mp4 video/mp4
    webm video/webm
    ogg video/ogg

    재생구간 지정

    src 속성 지정시 #t=[시작시간][,종료시간]을 지정하면 재생구간을 지정할 수 있습니다.

    <video> 재생 구간 지정(크롬)
    #t=[시작시간][,종료시간]
    #t=[H:M:S][,H:M:S]    		 설명
    src="파일명#t=1:10:30,1:40:50" 1시 10분 30초 ~ 1시 40분 50초 까지 재생
    src="파일명#t=10,20" 10초 ~ 20초 까지 재생
    src="파일명#t=,30" 처음 ~ 30초 까지 재생
    src="파일명#t=30" 30초 부터 재생 시작

    자막

    <track> 태그를 이용하여 자막을 지정할 수 있습니다.
    srclang 속성을 이용하여 자막 언어를 지원할 수 있습니다.

    <track> 태그의 속성
    속성 설명
    default 사용자가 별도의 트랙을 지정하지 않는 경우 기본 트랙으로 활성화 되어야 함
    kind 텍스트 트랙의 종류를 지정(생략가능)
    subtitles 비디오의 자막을 정의(소리는 들리지만 언어를 이해할 수 없는 경우에 적합)
    captions 대화나 사운드 효과를 글로 옮기거나 번역한 것, 소리를 또렷하게 알아들을수 없는 청각이 약한 사람들에게 적합
    descriptions 비디오의 내용에 대한 텍스트 형식의 설명을 정의(장애인에게 적합)
    chapters 창의 제목을 정의한 것으로 미디어 자원을 탐색하기 위한것
    metadata 스크립트에서 사용하기 위한 내용을 정의(브라우저에는 표시되지 않음)
    label 사용자가 읽을 수 있는 트랙의 제목을 지정
    src 사용자가 읽을 수 있는 트랙의 제목을 지정
    srclang 텍스트 트랙 데이터의 언어를 지정
    (kind="subtitles" 인경우 반드시 지정)
    WebVTT 자막 형식

    다음의 형식으로 자막파일을 생성하여 vtt 파일을 저장합니다.

    WEBVTT

HH:MM:SS.sss --> HH:MM:SS.sss
해당시간에 표시될 자막 내용

HH:MM:SS.sss --> HH:MM:SS.sss
해당시간에 표시될 자막 내용

...