게시물에 동영상 포함시키기 글쓰기 에디터 사용법

개인 동영상 파일을 업로드 시킨 후 공유할 수 있는 서비스로는 Youtube, Vimeo가 매우 잘 알려져있고 서비스도 안정적이며 무료로 사용할 수 있어 많은 사람들이 이미 엄청난 숫자의 다양한 동영상 및 음악파일 들을 업로드 한 후 공개하고 있습니다. 유튜브 검색을 통해 내게 관심 있는 동영상을 찾아내어 글에 포함시킨 후 관련 글을 작성하거나 또는 직접 촬영한 동영상을 유튜브에 올린 후 그 동영상을 작성 글 안에 포함시킬 수 있습니다. 단락에디터를 사용 중인 블로그 개설자분들은 다음의 링크를 참조하세요. 
Scott's Textyle ( http://www.haninsociety.com/scott/textyle/168330 )

동영상 포함시키기를 설명드리기 전에 처음 접하시는 분들의 이해를 돕기위한 몇가지를 먼저 설명드리겠습니다.


Embed 코드란?

동영상을 취급하고 전송하려면 매우 큰 규모의 서버와 스트리밍 전송방식의 서버 장비 및 인력을 갖추어야합니다. 그래서 동영상을 직접 취급하는 서비스를 하는 곳은 Youtube, Vimeo와 같은 몇몇 동영상 전문 서비스 업체들 뿐입니다. 동영상 전문 서비스들은 동영상을 많은 수의 사람들이 다른 사이트에서도 게시, 공유토록 하기위해 동영상이 위치한 서버 내 동영상주소를 사이트에서 이용 가능한 웹프로그래밍 코드로 공개하는데 이를 Embed 코드라고 합니다.

유튜브의 Embed 코드

가장 널리 알려진 유튜브를 예를 들어 설명드리겠습니다. 유튜브 사이트는 공유를 위한 몇 종류의 동영상 주소 또는 소스코드를 제공합니다.

단축된 링크형식 
http://youtu.be/ibIXzzd75sg
유튜브에서 제공하는 이 단축주소는 Embed용 동영상 주소가 아닙니다. 동영상이 있는 유튜브페이지의 주소일 뿐입니다. 이 주소만으로 동영상을 글에 포함시키려면 내부적으로 특별한 변환 프로그램이 필요합니다. 한인Society의 공용에디터인 Slim에디터에 설치되어있는 확장컴포넌트인 멀티미디어링크 플러그인이나 그룹페이지의 동영상모듈(MVOX)에서는 이 유튜브의 단축 링크(Share this Video)를 사용하면 시스템이 자동으로 Embed 코드로 변환해줍니다.

[UPDATE] 2015년 5월 현재 유튜브의 단축주소가 https로 시작하는 주소로 바뀌었습니다. 한인Society에서는 아직 https 주소를 지원하지 않으니 's'를 제외한 http만을 사용해주시기 바랍니다.


iframe 코드형식
<iframe width="560" height="315" src="http://www.youtube.com/embed/ibIXzzd75sg" frameborder="0" allowfullscreen></iframe>
게시 가능한 방식이지만 이 방식은 보안에 취약한 관계로 한인Society에서는 사용하지 않고 있습니다.

Embed 코드 형식
<object width="560" height="315"><param name="movie" value="http://www.youtube.com/v/ibIXzzd75sg?version=3&amp;hl=en_US"></param><param name="allowFullScreen" value="true"></param><param name="allowscriptaccess" value="always"></param><embed src="http://www.youtube.com/v/ibIXzzd75sg?version=3&amp;hl=en_US" type="application/x-shockwave-flash" width="560" height="315" allowscriptaccess="always" allowfullscreen="true"></embed></object>

유튜브에서는 동영상페이지의 Embed 옵션 중 Old Embed 코드를 선택하면 위와 같은 Embed 코드를 얻을 수 있습니다. 

이상의 세가지 형식의 코드 중 파랗게 표시된 부분들이 동영상의 주소입니다. 제공되는 세가지 형식의 주소가 마지막 부분의 동영상아이디만 같고 나머지는 다르다는 것을 알 수 있습니다. 


[UPDATE] 2015년 5월 현재 유튜브에서 더이상 Old Embed 코드를 제공하지 않습니다.
유튜브의 동영상이 Old Embed 코드 형식을 제공하지 않으므로 공유(SHARE)용으로 제공되는 iframe 코드를 가져와 다음과 같은 방법으로 변경하여 사용하시면 됩니다.


유튜브의 <iframe 코드를 <Embed 코드형식으로 바꾸기

1. Embed 코드에서 꼭 필요한 부분은 코드 선언부인 <embed ~></embed>와 동영상주소 부분입니다. 우선 가져온 <iframe 코드를 다음과 같이 변경 작성합니다.
<embed src="주소" width="560" height="315"></embed>
2. 주소 내용 안의 embed 글자부분 만을 v로 바꾸어줍니다.
예) 변경 전 <embed src="http://www.youtube.com/embed/ibIXzzd75sg" width="560" height="315"></embed>
    변경 후 <embed src="http://www.youtube.com/v/ibIXzzd75sg" width="560" height="315"></embed>


유튜브의 Embed 코드 가져오기

1. www.youtube.com에 접속하여 원하는 동영상을 찾습니다.
2. 동영상의 밑에 보여지는 SHARE(공유) 버튼을 클릭합니다. (유튜브 동영상 화면이 새롭게 바꼈네요. 아래 그림을 참조하세요. 그림의 번호 1번.)

yuotube.jpg

3. 버튼 아래로 나타난 링크주소 위 4개의 텍스트링크 중 EMBED 버튼을 클릭합니다. (그림의 번호 2번)
4. Embed 코드 아래의 선택 옵션 중 "Use old embed code" 항목이 있으면 선택합니다.(그림의 번호 3번) 선택옵션이 없으면 그냥 <iframe 으로 시작되는 코드를 가져와 변경 후사용합니다. 바로 위의 팁을 참조하세요.
5. 코드를 클릭하면 코드 전체가 선택되며 이제 키보드의 ctrl + c 를 클릭해 내 클립보드에 카피합니다.(그림의 번호 4번)


   Note) 다른 동영상 서비스들에서는 Embed 코드 형식을 지원하는 경우 <object 나 <embed 로 시작되는 코드를 찾으실 수 있을겁니다. 지원하는 코드를 카피해오면 됩니다.
   

한인Society에서 게시물에 동영상 포함시키는 법

일반에디터(Slim에디터)의 HTML모드에서 또는 블로그H 서비스의 블로그에서 사용하는 단락에디터의 동영상 툴에서는 Embed 코드 전체를 사용합니다. 일반에디터(Slim에디터)의 확장컴포넌트 중 하나인 '멀티미디어 링크'에서는 Embed 코드 중 주소만 카피해 사용합니다. 유튜브 영상의 경우는 단축주소를 사용할 수 있습니다.

Slim에디터의 HTML모드를 사용하여 동영상 포함시키기

1. 글쓰기 화면을 불러옵니다.
2. 에디터툴바 제일 우측의 HTML 버튼을 클릭하여 에디터를 HTML모드로 변환합니다. 
3. 글쓰기 상자 안을 클릭하여 커서가 깜빡이면 키보드의 ctrl + v 를 클릭해 클립보드에 카피해놓은 코드를 붙여넣기 합니다.
   Note) <iframe 코드를 가져온 경우에는 코드를 Embed 코드 형식으로 수정해야 사용할 수 있습니다. 이 문서 상단부의 설명부분을 보세요.
4. 다시 HTML 버튼을 클릭해 일반에디터 모드로 변경합니다.
5. 글쓰기 상자 안에 동영상이 나타나면 추가로 작성하고싶은 글을 마져 작성하고 저장합니다.

Slim에디터의 확장컴포넌트 '멀티미디어 링크'를 사용하기

Slim에디터 박스 상단 툴바 우측부분에 있는 +(확장컴포넌트)버튼을 클릭하여 나타나는 목록의 '멀티미디어 링크'는 외부 동영상 또는 외부 오디오 파일 등 멀티미디어를 내 작성글에 포함시킬 수 있는 장치입니다. Embed코드 전체를 사용하는 것이 아닌 동영상 주소만을 사용하여 동영상을 불러오는 방식으로 구현되어있습니다. 멀티미디어경로 항목에 위에서 설명한 주소를 입력하시면 됩니다. 유튜브 동영상의 경우는 단축주소를 사용할 수 있으며 단축주소를 사용하시는 경우에는 다음의 2~3번의 과정은 필요없습니다.

1. 글쓰기 화면을 불러옵니다.
2. 글쓰기 상자 안에 임시로, 카피해둔 코드를 ctrl+v로 붙여넣기 합니다.
   Note) <iframe 코드를 가져온 경우에는 코드를 Embed 코드 형식으로 수정해야 사용할 수 있습니다. 이 문서 상단부의 설명부분을 보세요.
3. 코드 내용 중 주소부분만 선택하여 ctrl+c로 카피하고 남은 코드는 지워버립니다.
4. 툴바 우측의 버튼을 클릭한 후 나타난 목록에서 멀티미디어 링크를 클릭합니다.

slimeditor7.jpg

5. 확장컴포넌트 목록에서 멀티미디어링크를 클릭하면 팝업창이 나타나고 (윗 그림 참조) 멀티미디어 경로(동영상 주소) 및 플레이어의 가로와 세로 크기 등을 입력할 수 있습니다.
6. 멀티미디어 경로에는 카피해두었던 동영상 주소를 ctrl+v로 붙여넣습니다. 유튜브의 경우는 단축주소를 입력하면 됩니다.
7. 기타 입력항목 들을 입력한 후 추가버튼을 클릭하면 동영상이 점선으로 된 사각형 형태로 에디터에 추가됩니다.
8. 작성하고 싶은 내용이 있다면 에디터 글쓰기 박스 안에 작성하고 기타 옵션 사항들을 지정한 후 글을 저장 또는 발행 합니다.

   Note) 확장컴포넌트의 입력사항을 변경하고 싶은 경우에는 수정.편집모드(Edit) 화면에서 점선 사각형 박스로 보여지고있는 동영상을 두번 클릭하세요. 확장컴포넌트 팝업창이 나타나면 기존 항목의 내용을 수정 후 다시 추가버튼을 클릭해주세요.


윗 Slim에디터와 확장기능인 확장컴포넌트는 한인Society의 대부분 서비스에 공통으로 사용되고 있습니다. 몇번 사용해보시면 곧 익숙해지실겁니다
단락에디터를 이용중인 블로그 개설자분들은 다음 링크의 설명문서를 참조하세요. 

Scott's Textyle ( http://www.haninsociety.com/scott/textyle/168330 )


Tag :

Leave Comments

로그인 한 회원 분께만 댓글 쓰기를 허용하고 있습니다. 로그인 해주세요.


I Am

profileHSTeam
한인Society의 Official 블로그입니다.

방문자통계

Unique Visitors
Today :
Yesterday : Total : 53104

Page Views
Today :
Yesterday : Total : 154202

BETA
HS Login