웹 페이지에 HTML5 비디오를 삽입하는 방법 및 브라우저에서 비디오를 미리 보는 방법을 살펴봅니다.

Dreamweaver로 HTML5 비디오를 웹 페이지에 삽입할 수 있습니다.

HTML5 비디오 요소는 영화나 비디오를 웹 페이지에 포함시키는 표준 방법을 제공합니다.

HTML 비디오 요소에 대한 자세한 내용은 W3schools.comHTML5 비디오에서 확인 가능한 문서를 참조하십시오.

HTML5 비디오 삽입

  1. 비디오를 삽입하려는 위치에 커서를 둡니다.

  2. 삽입 > HTML > HTML5 비디오를 선택합니다. HTML5 비디오 요소는 지정된 위치에 삽입됩니다.

  3. 속성 패널에서 다양한 옵션에 대한 값을 지정합니다.

    소스 / 대체 소스 1 / 대체 소스 2: 소스에 비디오 파일 위치를 입력합니다. 또는 폴더 아이콘을 클릭하여 로컬 파일 시스템에서 비디오 파일을 선택합니다. 비디오 포맷 지원은 브라우저마다 다릅니다. 소스의 비디오 포맷을 브라우저에서 지원하지 않을 경우, 대체 소스 1 또는 대체 소스 2에 지정된 비디오 포맷이 사용됩니다. 브라우저는 처음 인식된 포맷을 선택하여 비디오를 표시합니다.

    HTML5 비디오에 대한 속성 지정
    HTML5 비디오에 대한 속성 지정

    참고:

    비디오를 3개 필드에 신속하게 추가하려면 다중 선택을 사용하십시오. 한 폴더에 있는 동일한 비디오에 대해 3개의 비디오 형식을 선택할 때 목록의 첫 번째 형식을 소스에 대해 사용합니다. 목록의 다음 형식은 대체 소스 1대체 소스 2를 자동 채우기할 때 사용합니다.

    브라우저와 지원되는 비디오 형식에 대한 자세한 정보는 아래 표를 참조하십시오. 최신 정보는 HTML5 - 브라우저 지원을 참조하십시오.

    브라우저 MP4 WebM Ogg
    Internet Explorer 9 아니요 아니요
    Firefox 4.0 아니요
    Google Chrome 6
    Apple Safari 5 아니요 아니요
    Opera 10.6 아니요
    • 제목: 비디오 제목을 지정합니다.
    • 폭(W): 비디오의 폭을 픽셀 단위로 입력합니다.
    • 높이(H): 비디오의 높이를 픽셀 단위로 입력합니다.
    • 컨트롤: HTML 페이지의 재생, 일시 정지, 음소거와 같은 비디오 컨트롤을 표시하려는 경우 선택합니다.
    • 자동 재생: 웹 페이지에 로드된 직후 비디오 재생을 시작하려면 선택합니다.
    • 포스터: 비디오가 다운로드를 완료하거나 사용자가 [재생]을 클릭할 때까지 표시하려는 이미지의 위치를 입력합니다. 폭과 높이 값은 이미지를 삽입할 때 자동으로 채워집니다.
    • 반복: 사용자가 영화 재생을 정지할 때까지 비디오를 지속적으로 재생하려는 경우 이 옵션을 선택합니다.
    • 음소거: 비디오의 오디오를 음소거하려는 경우 이 옵션을 선택합니다.
    • 플래시 비디오: HTML5 비디오를 지원하지 않는 브라우저를 위한 SWF 파일을 선택합니다.
    • 대체 텍스트: 브라우저가 HTML5를 지원하지 않을 경우 표시할 텍스트를 제공합니다.
    • 미리 로드: 페이지를 로드할 때 비디오를 로드하는 방법에 대해 작성자 환경 설정을 지정합니다. 자동 로드를 선택하면 전체 비디오가 페이지 다운로드에 로드됩니다. 메타데이터를 선택하면 페이지 다운로드를 완료한 후 메타데이터만 다운로드합니다.

브라우저에서 비디오 미리보기

  1. 웹 페이지를 저장합니다.

  2. 파일 > 실시간 미리보기를 선택합니다. 비디오를 미리보기하려는 브라우저를 선택합니다.

이 작업에는 Creative Commons Attribution-Noncommercial-Share Alike 3.0 Unported License의 라이센스가 부여되었습니다.  Twitter™ 및 Facebook 게시물은 Creative Commons 약관을 적용받지 않습니다.

법적 고지 사항   |   온라인 개인 정보 보호 정책