HTML5 Canvas 문서에서 작업하는 경우 이 플랫폼의 모든 구성 요소 세트를 사용할 수 있습니다.
이 작업은 구성 요소 패널에서 수행합니다.
구성 요소 패널을 사용하려면 윈도우 메뉴에서 구성 요소를 선택합니다.
구성 요소 패널을 살펴보면 유저 인터페이스, 비디오, jQuery UI가 있습니다.
비디오 구성 요소 세트를 확장하면 단일 구성 요소로 비디오가 있습니다.
이것을 사용하면 이 구성 요소의 인스턴스를 스테이지로 드래그하여 속성을 변경할 수 있습니다.
비디오 구성 요소 인스턴스가 선택된 상태에서 위치와 크기를 변경해보죠.
X 위치는 약 681로 설정하고 Y 위치를 50으로 설정합니다.
폭도 550으로 조정하고 높이는 약 309로 조정합니다.
여기를 보면 비디오 구성 요소 인스턴스는 배경의 광고판과 동일한 크기로 되어 있는데요.
이제 비디오 구성 요소 인스턴스에서 재생할 비디오 파일만 있으면 됩니다.
여기 있는 MP4 파일을 광고판에 사용할 비디오로 사용해보죠.
비디오 구성 요소 인스턴스에서 이 파일을 재생하려면 스테이지에서 이 구성 요소 인스턴스가 선택된 상태에서 속성 패널을 보면 매개 변수 표시 버튼이 있는데요.
이 버튼은 스테이지에 HTML5 Canvas 구성 요소가 있을 때 표시되고, 속성을 볼 수 있는 곳입니다.
이것을 클릭하면 구성 요소 매개 변수 패널이 표시되고, 이 패널에서 자동 재생, 컨트롤, 음소거 여부, 반복 여부를 정의합니다.
컨트롤을 끄고 자동 재생을 켜보겠습니다.
이 특정 파일의 경우 오디오는 없지만 음소거로 두고 반복으로 설정합니다.
물론 가장 중요한 매개 변수는 소스입니다.
MP4로 설정해야 합니다.
이 편집 아이콘을 클릭한 다음 소스를 찾습니다.
앞서 본 HippoVideo.mp4가 있는데요.
열기를 선택하면 비디오가 설정됩니다.
소스 크기 일치라고 된 상자를 선택 해제할 텐데 구성 요소를 선택된 크기로 유지해야 하기 때문이죠.
이제 확인을 누릅니다.
됐습니다.
테스트하기 위해 컨트롤 메뉴에서 테스트를 선택하면 렌더링된 애니메이션 비디오가 이 광고판에서 연속으로 재생됩니다.
