Dreamweaver CC에서 HTML5 비디오를 사용하여 작업하는 것은 매우 간단합니다.
현재 index.html 문서를 사용하고 있는데 Exercise files 폴더에 있는 Chapter 8 폴더에 있습니다.
먼저 문서 가운데로 스크롤하여 블로그 포스트 아래로 이동한 후 커서를 놓겠습니다.
커서가 깜박이는 상태에서 HTML5 비디오를 삽입해보죠.
삽입을 위해 여러 옵션을 사용할 수 있는데요.
먼저 삽입 패널로 이동하면 미디어 범주 아래에 HTML5 Video 버튼이 있습니다.
또한 일반 섹션으로 이동해 보면 동일한 HTML5 Video 옵션이 있습니다.
마지막으로 삽입 메뉴로 이동하여 아래에서 HTML5 Video를 선택하거나 키보드 단축키를 사용하여 선택할 수 있습니다.
어느 방식으로든 해당 명령을 선택하면 비디오 자리 표시자가 문서에 배치됩니다.
분할 뷰를 살펴보면 비디오 요소만 추가되고 controls 속성이 자동으로 적용됩니다. controls 속성이 적용되어 있는데 이를 적용되지 않도록 하려면 속성 패널에서 이 옵션을 선택 해제합니다.
속성 패널에는 비디오에 대한 모든 옵션이 제공되므로 시각적으로 작업할 수 있습니다.
ID 또는 Class를 이 비디오 개체에 할당하려면 여기에서 할당하면 됩니다.
먼저 살펴볼 것은 가장 중요한 속성인 소스 속성입니다.
사용할 비디오 파일의 위치죠.
텍스트 필드의 오른쪽에 있는 폴더 아이콘을 클릭하여 비디오 선택 대화 상자를 엽니다.
디렉토리를 보면 html5-video 폴더가 있고 이 폴더에 세 가지 비디오 포맷이 있습니다.
이 세 가지 비디오 포맷은 모든 브라우저에 일관된 경험을 전달하는 데 유용합니다.
그러면 이제 bentley.mp4를 선택하는데 .ogv 파일과 .webm 파일 이름이 MPEG-4 파일과 동일하므로 헷갈리지 마십시오.
이 파일이 선택된 상태에서 열기를 클릭합니다.
열기를 클릭하면 소스 속성이 채워지고 대체 소스 1과 대체 소스 2 속성도 채워집니다.
다시 말하자면 포맷과 확장명이 각각 다르지만 파일 이름은 동일합니다.
코드도 이에 맞게 업데이트되었습니다.
현재 누락된 것이 있는데 폭과 높이입니다.
폭과 높이를 모르는 경우 이를 알아내야 하는데요.
포스터 프레임을 알면 됩니다.
포스터 프레임은 재생할 비디오를 나타내는 이미지입니다.
포스터 프레임 크기는 비디오와 동일합니다.
이미 포스터 프레임을 만들어 놓았는데요.
이 텍스트 필드의 오른쪽에 있는 폴더 아이콘을 클릭하고 동일한 디렉토리에서 poster.png 파일을 찾습니다.
이 파일을 선택해 보면 크기가 426 x 240입니다.
열기를 클릭하면 폭과 높이가 이와 같은 크기로 설정됩니다.
왼쪽 하단을 보면 다양한 옵션이 있는데요.
Controls는 앞서 살펴보았고 비디오를 반복할 수 있는데요.
비디오 재생이 완료되면 다시 재생됩니다.
처음으로 돌아가 다시 재생되죠.
비디오를 자동으로 재생할 수도 있는데 일반적으로 좋은 방법은 아닙니다.
대부분 비디오가 자동으로 재생되는 것을 선호하지 않기 때문입니다.
이 옵션을 선택하고 권장 사항인 Muted 옵션을 선택하면 오디오가 들리지 않게 됩니다.
방해가 되지 않도록 음소거 상태로 비디오가 재생되는 것이죠.
두 옵션을 모두 선택 해제한 다음 Preload 메뉴로 이동해 보면 기본적으로 none이 선택되어 있고 Preload 속성이 비디오 요소에 전혀 할당되지 않습니다.
Preload 속성이 none으로 할당되도록 하려면 이 메뉴에서 다른 옵션을 선택한 다음 다시 none을 선택하면 됩니다. none을 선택하면 미리 로드되지 않아 일반적으로 최적의 경험을 전달할 수 없게 됩니다. "metadata"를 선택하면 지속 시간과 크기가 미리 로드되며 최종 사용자가 해당 비디오에 대한 간략한 정보를 확인할 수 있게 됩니다.
또한 "auto"를 선택하면 브라우저가 콘텐츠를 미리 로드할지를 제어할 수 있습니다.
따라서 "metadata"를 선택하겠습니다.
지금까지 기본 속성을 살펴보았고 이제 Flash 대체 속성을 살펴볼 텐데요.
그 전에 먼저 디자인 뷰로 이동한 다음 라이브 뷰를 클릭하겠습니다.
라이브 뷰를 클릭하면 Dreamweaver CC에서 이 비디오 요소를 적절하게 렌더링하고 미리 볼 수 있게 됩니다.
재생 버튼을 클릭해 보죠.
비디오가 잘 재생되고 있네요.
이 페이지를 Firefox, Chrome, Internet Explorer에서 테스트하여 원하는 결과가 나타나는지 확인해 보시기 바랍니다.
이처럼 Dreamweaver CC의 새로운 기능을 사용하면 HTML5 비디오를 간단하게 삽입할 수 있습니다.
