[삽입] > [HTML] > [Flash 비디오]를 선택합니다.
마지막 업데이트 날짜
2023년 9월 25일
Dreamweaver에서 웹 페이지에 비디오를 임베드하고 FLV 파일을 삽입하는 방법에 대해 학습합니다.
웹 페이지(HTML5)에 비디오 임베드
HTML5는 비디오 및 오디오 태그를 지원하므로 외부 플러그인 또는 플레이어 없이도 비디오 및 오디오 파일을 브라우저에서 재생할 수 있습니다. Dreamweaver는 비디오 및 오디오 태그용 코드 힌트를 지원합니다.
비디오를 렌더링해 주는 라이브 뷰를 활용하면 웹 페이지에 임베드하려는 비디오를 미리 볼 수 있습니다.
메모
웹 페이지에 모든 유형의 비디오를 임베드할 수 있지만 라이브 뷰가 모든 비디오의 렌더링을 지원하지는 않습니다. Dreamweaver는 Apple QuickTime 플러그인을 통해 오디오 및 비디오 태그를 지원합니다. Windows에 Apple QuickTime 플러그인이 설치되어 있지 않으면 웹 페이지에서 미디어 콘텐츠가 렌더링되지 않습니다.
HTML5 비디오를 삽입하는 방법은 Dreamweaver에서 HTML5 비디오 삽입을 참조하십시오.
FLV 파일 삽입
FLV 파일 삽입
Flash 저작 도구를 사용하지 않고도 웹 페이지에 FLV 비디오를 쉽게 추가할 수 있습니다. 인코딩된 FLV 파일이 있어야 작업을 시작할 수 있습니다.
Dreamweaver는 FLV 파일을 표시하는 SWF 구성 요소를 삽입합니다. 브라우저에서 볼 때 이 구성 요소는 선택한 FLV 파일과 재생 컨트롤 세트를 표시합니다.
Dreamweaver는 사이트 방문자에게 FLV 비디오를 게재할 수 있는 다음 옵션을 제공합니다:
점진적 다운로드 비디오
FLV 파일을 사이트 방문자의 하드 디스크에 다운로드한 다음 재생합니다. 하지만 기존의 "다운로드 후 재생" 방식의 비디오 게재와 달리, 점진적 다운로드는 다운로드가 완료되기 전에 비디오 파일 재생을 시작할 수 있습니다.
스트리밍 비디오
비디오 내용을 스트리밍하여 자연스러운 재생을 위해 잠깐의 버퍼링 후 웹 페이지에서 즉시 재생할 수 있습니다. 웹 페이지에서 스트리밍 비디오를 활성화하려면 Adobe® Flash® Media Server에 액세스할 수 있어야 합니다.
인코딩된 FLV 파일이 있어야 Dreamweaver에서 사용할 수 있습니다. Sorenson Squeeze 및 On2의 두 종류 코덱(압축/압축 해제 기술)으로 만든 비디오 파일을 삽입할 수 있습니다.
FLV 파일을 삽입하면 일반적인 SWF 파일과 마찬가지로 사용자가 비디오를 볼 올바른 Flash Player 버전을 사용하고 있는지 여부를 감지하는 코드가 삽입됩니다. 사용자가 올바르지 않은 버전을 사용하고 있을 경우 사용자에게 Flash Player의 최신 버전을 다운로드해야 함을 알리는 대체 내용이 페이지에 표시됩니다.
메모
FLV 파일을 보려면 컴퓨터에 Flash Player 8 이상이 설치되어 있어야 합니다. 사용자에게 필요한 Flash Player 버전은 없지만 Flash Player 6.0 r65 이상이 설치되어 있는 경우 브라우저에 대체 내용이 아닌 Flash Player 빠른 설치 관리자가 표시됩니다. 사용자가 빠른 설치를 거부할 경우 페이지에 대체 내용이 표시됩니다.
비디오 작업에 대한 자세한 내용은 비디오 기술 센터(www.adobe.com/go/flv_devcenter_kr)를 참조하십시오.
FLV 파일 삽입
[FLV 삽입] 대화 상자의 [비디오 유형] 팝업 메뉴에서 [점진적 다운로드] 또는 [스트리밍 비디오]를 선택합니다.
나머지 대화 상자 옵션을 완료하고 [확인]을 클릭합니다.
메모
Microsoft Internet Information Server(IIS)는 중첩된 객체 태그를 처리하지 않습니다. ASP 페이지의 경우, Dreamweaver는 SWF 또는 FLV 파일을 삽입할 때 중첩된 객체 코드 대신 중첩된 객체/임베드 코드를 사용합니다.
점진적 다운로드 비디오 옵션 설정
FLV 삽입 대화 상자에서는 웹 페이지에 삽입된 FLV 파일의 점진적 다운로드 게재 옵션을 설정할 수 있습니다.
[삽입] > [Flash 비디오] (또는 삽입 패널의 HTML 범주에서 [Flash 비디오] 아이콘을 클릭합니다)를 선택합니다.
FLV 삽입 대화 상자에서 비디오 유형 메뉴에서 점진적 다운로드 비디오를 선택합니다.
다음 옵션을 지정합니다.
URL
FLV 파일의 상대 경로나 절대 경로를 지정합니다. 상대 경로를 지정하려면(예: mypath/myvideo.flv) [찾아보기] 버튼을 클릭하고 FLV 파일로 이동한 후 선택합니다. 절대 경로를 지정하려면 FLV 파일의 URL(예: http://www.example.com/myvideo.flv))을 입력합니다.
스킨
비디오 구성 요소의 모양을 지정합니다. 선택한 스킨의 미리보기가 스킨 팝업 메뉴 아래에 나타납니다.
폭
픽셀 단위의 FLV 파일 폭입니다. Dreamweaver가 FLV 파일의 폭을 결정하며 이 필드에 해당 폭이 자동으로 표시됩니다.
높이
픽셀 단위의 FLV 파일 높이입니다. Dreamweaver가 자동으로 FLV 파일의 높이를 최적화하며 이 필드에 해당 높이가 자동으로 표시됩니다.
메모
[스킨 포함 전체 크기]는 FLV 파일의 폭과 높이에 선택된 스킨의 폭과 높이를 각각 더한 것입니다.
제한
비디오 구성 요소의 폭과 높이 간에 동일한 종횡비를 유지합니다. 이 옵션은 기본적으로 선택되어 있습니다.
자동 재생
웹 페이지를 열 때 비디오를 재생할지 여부를 지정합니다.
자동 되감기
비디오 재생이 완료된 후 재생 컨트롤이 시작 위치로 돌아갈지 여부를 지정합니다.
[확인]을 클릭하여 대화 상자를 닫고 웹 페이지에 FLV 파일을 추가합니다.
FLV 삽입 명령은 웹 페이지에서 비디오 콘텐츠를 표시하는 데 사용되는 비디오 플레이어 SWF 파일과 스킨 SWF 파일을 생성합니다. (새 파일을 보려면 파일 패널에서 [새로 고침] 버튼을 클릭해야 할 수 있습니다.) 이러한 파일은 비디오 콘텐츠를 추가하는 HTML 파일과 동일한 디렉터리에 저장됩니다. FLV 파일이 포함된 HTML 페이지를 업로드하면, Dreamweaver는 이러한 파일을 종속 파일로 업로드합니다(종속 파일 업로드 대화 상자에서 [예]를 클릭한 경우).
스트리밍 비디오 옵션 설정하기
FLV 삽입 대화 상자에서는 웹 페이지에 삽입된 FLV 파일의 스트리밍 비디오 다운로드 옵션을 설정할 수 있습니다.
[삽입] > [Flash 비디오] (또는 삽입 패널의 HTML 범주에서 [Flash 비디오] 아이콘을 클릭합니다)를 선택합니다.
[비디오 유형] 팝업 메뉴에서 [스트리밍 비디오]를 선택합니다.
서버 URI
rtmp://www.example.com/app_name/instance_name 형식으로 서버 이름, 애플리케이션 이름 및 인스턴스 이름을 지정합니다.
스트리밍 이름
재생하려는 FLV 파일의 이름을 지정합니다 (예: myvideo.flv)..flv 확장명은 선택 사항입니다.
스킨
비디오 구성 요소의 모양을 지정합니다. 선택한 스킨의 미리보기가 스킨 팝업 메뉴 아래에 나타납니다.
폭
픽셀 단위의 FLV 파일 폭입니다. Dreamweaver가 FLV 파일의 폭을 결정하며 이 필드에 자동으로 생성된 폭이 표시됩니다.
높이
픽셀 단위의 FLV 파일 높이입니다. Dreamweaver가 FLV 파일의 높이를 결정하며 이 필드에 자동으로 생성된 픽셀 단위의 높이가 표시됩니다.
메모
[스킨 포함 전체 크기]는 FLV 파일의 폭과 높이에 선택된 스킨의 폭과 높이를 각각 더한 것입니다.
제한
비디오 구성 요소의 폭과 높이 간의 비율을 동일하게 유지합니다. 이 옵션은 기본적으로 선택되어 있습니다.
라이브 비디오 피드
비디오 내용이 라이브인지 여부를 지정합니다. [라이브 비디오 피드]가 선택되면 Flash Player는 Flash® Media Server에서 스트리밍되는 라이브 비디오 피드를 재생합니다. 라이브 비디오 피드의 이름은 [스트림 이름] 텍스트 상자에 지정된 이름입니다.
메모
비디오 피드를 활성화하려면 스킨 필드에서 후광 스킨 옵션 중 하나를 선택해야 합니다. [라이브 비디오 피드]를 선택하면 라이브 비디오를 조작할 수 없으므로 구성 요소의 스킨에 볼륨 컨트롤만 나타납니다. 또한 [자동 재생] 및 [자동 되감기] 옵션은 작동하지 않습니다.
자동 재생
웹 페이지가 열릴 때 비디오를 재생할지 여부를 지정합니다.
자동 되감기
비디오 재생이 완료된 후 재생 컨트롤이 시작 위치로 돌아갈지 여부를 지정합니다.
버퍼링 시간
비디오 재생이 시작되기 전에 버퍼링에 필요한 시간을 초 단위로 지정합니다.기본 버퍼 시간은 0으로 설정되어 재생 버튼을 클릭한 후 즉시 비디오가 재생됩니다.(자동 재생이 선택되면 서버와 연결되는 즉시 비디오가 재생됩니다.)사이트 방문자의 연결 속도보다 높은 비트 레이트의 비디오를 전송하거나 인터넷 트래픽으로 인해 대역폭이나 연결 문제가 발생할 수 있는 경우 버퍼 시간을 설정하는 것이 좋습니다.예를 들어, 웹 페이지에서 비디오 플레이를 시작하기 전에 15초의 비디오를 웹 페이지로 전송하려면 버퍼 시간을 15초로 설정합니다.
[확인]을 클릭하여 대화 상자를 닫고 FLV 파일을
웹 페이지에 추가합니다.
FLV 삽입 명령은 웹 페이지에서 비디오를 표시하는 데 사용되는 비디오 플레이어 SWF 파일과 스킨 SWF 파일을 생성합니다.이 명령은 Flash Media Server에 업로드해야 하는 main.asc 파일도 생성합니다.(새 파일을 보려면 [파일] 패널에서 [새로 고침] 버튼을 클릭해야 할 수 있습니다.) 이 파일들은 비디오 콘텐츠를 추가하는 HTML 파일과 동일한 디렉터리에 저장됩니다. FLV 파일이 포함된 HTML 페이지를 업로드할 때, SWF 파일을 웹 서버에, main.asc 파일을 Flash Media Server에 업로드하는 것을 잊지 마십시오.
메모
서버에 이미 main.asc 파일이 있는 경우, FLV 삽입 명령으로 생성된 main.asc 파일을 업로드하기 전에 서버 관리자에게 문의하십시오.
Dreamweaver 문서 창에서 비디오 구성 요소 플레이스홀더를 선택하고 속성 관리자([창] > [속성])에서 [미디어 업로드] 버튼을 클릭하여 필요한 모든 미디어 파일을 쉽게 업로드할 수 있습니다. 필요한 파일 목록을 보려면 [필요한 파일 표시]를 클릭하십시오.
메모
[미디어 업로드] 버튼은 비디오 콘텐츠가 포함된 HTML 파일은 업로드하지 않습니다.
Flash Player 다운로드 정보 편집
페이지에서 FLV 파일을 삽입하면 사용자가 올바른 Flash Player 버전을 사용하고 있는지 여부를 감지하는 코드가 삽입됩니다. 올바르지 않은 버전을 사용하고 있을 경우 사용자에게 최신 버전을 다운로드해야 함을 알리는 기본 대체 내용이 페이지에 표시됩니다. 언제든지 이 대체 내용을 변경할 수 있습니다.
이 절차는 SWF 파일에도 적용됩니다.
메모
사용자에게 필요한 버전은 없지만 Flash Player 6.0 r65 이상이 설치되어 있는 경우 브라우저에 Flash Player 빠른 설치 관리자가 표시됩니다. 사용자가 빠른 설치를 거부할 경우 페이지에 대체 내용이 표시됩니다.
문서 창의 디자인 보기에서 SWF 파일 또는 FLV
파일을 선택하십시오.
SWF 파일 또는 FLV 파일에서 눈 모양 아이콘을 클릭합니다.
메모
Ctrl + ]를 눌러서 대체 콘텐츠 보기로 전환할 수도 있습니다. SWF/FLV 보기로 돌아가려면 모든 대체 콘텐츠가 선택될 때까지 Ctrl + [를 누르십시오. 그 다음 Ctrl + [를 다시 누르십시오.
Dreamweaver의 다른 콘텐츠를 편집하는 것과 같은 방식으로
콘텐츠를 편집하십시오.
메모
SWF 파일이나 FLV 파일을 대체 콘텐츠로 추가할 수 없습니다.
눈 모양 아이콘을 다시 클릭하여 SWF 또는 FLV
파일 보기로 돌아갑니다.
FLV 파일 문제 해결
이 섹션에서는 FLV 파일 문제의 가장 일반적인 원인 중 일부를 자세히 설명합니다.
관련 파일 부재로 인한 보기 문제
Dreamweaver CS4 이상에서 생성된 코드는 FLV 파일 자체와는 다른 4개의 종속 파일에 의존합니다:
swfobject_modified.js
expressInstall.swf
FLVPlayer_Progressive.swf
스킨 파일(예: Clear_Skin_1.swf)
Dreamweaver CS3와 비교했을 때 Dreamweaver CS4 이상에서는 2개의 종속 파일이 더 있다는 점에 주의하십시오.
이 파일 중 처음 두 개(swfobject_modified.js 및 expressInstall.swf)는 Scripts라는 폴더에 설치되며, 이 폴더가 이미 존재하지 않으면 Dreamweaver가 사이트 루트에 생성합니다.
나머지 두 파일(FLVPlayer_Progressive.swf 및 스킨 파일)은 FLV가 임베드된 페이지와 같은 폴더에 설치됩니다.스킨 파일에는 FLV용 컨트롤이 포함되어 있으며, 파일 이름은 Dreamweaver 도움말에서 설명하는 옵션에서 선택한 스킨에 따라 달라집니다.예를 들어, Clear Skin을 선택하면 파일 이름은 Clear_Skin_1.swf가 됩니다.
FLV가 올바르게 표시되려면 4개의 종속 파일을 모두 원격 서버에 업로드해야 합니다.
이러한 파일 업로드를 잊는 것이 FLV 파일이 웹 페이지에서 올바르게 실행되지 않는 가장 일반적인 원인입니다.파일 중 하나가 누락되면 페이지에 "흰색 상자"가 나타날 수 있습니다.
종속 파일을 모두 업로드했는지 확인하려면 Dreamweaver 파일 패널을 사용하여 FLV가 나타나는 페이지를 업로드하십시오.페이지를 업로드하면 Dreamweaver에서 종속 파일도 업로드할지 묻습니다(이 옵션을 끄지 않은 경우).[예]를 클릭하여 종속 파일을 업로드하십시오.
로컬 페이지 미리보기 문제
Dreamweaver CS4의 보안 업데이트로 인해 Dreamweaver 사이트 정의에서 로컬 테스트 서버를 정의하고 테스트 서버를 사용하여 페이지를 미리 보지 않는 한, 임베드된 FLV가 있는 페이지를 테스트하기 위해 [브라우저에서 미리 보기] 명령을 사용할 수 없습니다.
일반적으로 테스트 서버는 ASP, ColdFusion 또는 PHP로 페이지를 개발하는 경우에만 필요합니다(애플리케이션 개발을 위한 컴퓨터 설정 참조).HTML만 사용하는 웹 사이트를 작성하고 있고 테스트 서버를 정의하지 않은 경우 F12 키(Windows) 또는 Opt+F12 키(Macintosh)를 누르면 화면에 스킨 컨트롤이 뒤섞여 나타납니다.해결 방법은 테스트 서버를 정의하여 테스트 서버를 사용해 페이지를 미리보기하거나, 파일을 원격 서버에 업로드하여 그곳에서 보는 것입니다.
메모
보안 설정으로 인해 로컬 FLV 콘텐츠를 미리 볼 수 없을 가능성도 있지만, Adobe에서는 이를 확인하지 못했습니다.보안 설정을 변경하여 문제가 해결되는지 확인해 보시기 바랍니다. 보안 설정을 변경하는 방법에 대한 자세한 내용은 기술 문서 117502를 참조하십시오.
FLV 파일 문제의 다른 가능한 원인
로컬에서 미리보기에 문제가 생겼을 경우 [편집] > [환경 설정] > [실시간 미리보기] 아래에서 [임시 파일을 사용한 미리보기] 옵션이 선택 해제되어 있는지 확인합니다.
최신 FlashPlayer 플러그인이 설치되어 있는지 확인합니다.
Dreamweaver 외부로 파일 및 폴더를 이동했는지 확인합니다. Dreamweaver 외부로 파일 및 폴더를 이동하면 Dreamweaver에서는 FLV 관련 파일의 올바른 경로를 보장할 수 없습니다.
문제를 발생시키는 FLV 파일을 임시로 알려진 정상 작업 FLV 파일로 바꿀 수 있습니다. 대체 FLV 파일이 작동한다면 브라우저나 컴퓨터가 아닌 기존 FLV 파일 문제입니다.
FLV 구성 요소 편집 또는 삭제
Dreamweaver 문서 창의 비디오 구성 요소 자리 표시자를 선택하고 속성 관리자를 사용하여 웹 페이지에서 비디오의 설정을 변경합니다. 다른 방법으로는 비디오 구성 요소를 삭제하고 [삽입] > [HTML] > [Flash 비디오] 메뉴를 이용하여 다시 삽입합니다.
FLV 구성 요소 편집
Dreamweaver 문서 창에서 플레이스홀더 중앙의 FLV 아이콘을 클릭하여
비디오 구성 요소 플레이스홀더를 선택합니다.
속성 관리자를 열고([창] > [속성]) 변경하십시오.
메모
속성 관리자를 사용하여 비디오 유형(예: 점진적 다운로드에서 스트리밍으로)을 변경할 수는 없습니다.비디오 유형을 변경하려면 FLV 구성 요소를 삭제하고 [삽입] > [미디어] > [FLV]를 선택하여 다시 삽입하십시오.
FLV 구성 요소 삭제
Dreamweaver 문서 창에서 FLV 구성 요소 자리 표시자를
선택한 후 Delete 키를 누릅니다.
비디오 추가 (기타 포맷)
.flv 파일 이외의 비디오를 추가하는 방법은 비디오 추가 (비-FLV)를 참조하십시오.
Dreamweaver 사이트에서 .mp3 파일이나 QuickTime 비디오를 재생하려면 Dreamweaver에서 플러그인 콘텐츠 삽입 방법을 참조하십시오.
