왕초보를 위한 플짤만들기 2편 ( jwplayer 목록형 플레이어 만들기)

Posted by 또돌이 플짤관련 : 2014. 7. 21. 12:39



카라 도쿄돔 솔로무대로 만들어 본 플레이어입니다
위 영상의 태그는 아래와 같습니다
 
<embed src="http://cfs.tistory.com/custom/blog/104/1044374/skin/images/player5.7.swf?"
allowfullscreen="true" type="application/x-shockwave-flash" width="960" height="865"
flashvars="playlistfile=http://cfs.tistory.com/custom/blog/104/1044374/skin/images/kata%20tokyo%20dome%20solo.xml?
&amp;playlistsize=300&amp;playlist=bottom
&amp;menu=false&amp;repeat=list&amp;icons=false&amp;type=video
&amp;backcolor=000000&amp;frontcolor=#FBBEA1&amp;lightcolor= #ADDFFF
&logo.file=http://i.imgur.com/D9Ev7HD.png
&logo.position=upper-right&logo.hide=false">

 태그에 대한 설명을 하자면, 1편 플짤 만들기에서 했던 것처럼
<embed src="플레이어주소"  width="가로크기" height="세로크기 "  flashvars="명령어&명령어" > 형태인데..

다운받은 player.swf.jpg  요파일을 .jpg 지우고 티스토리나 드랍박스에 올려 주소를 땁니다

1편에서 구글드라이브에 올려 주소를 땃는데 다시 티스토리에 올리는 이유는 크로스도메인? 정책때문입니다
자세히는 저두 잘 모르므로 설명은 패스...^^:: 
 결론적으로 플레이어와 xml 파일은 같은 도메인에 올려야 재생이 된다는 야그입니다
그런데 얼마 전에 구글에서 xml파일을 막아버렸습니다..이외 config 파일이나 자막링크 파일까지 막아버렸습니다
영상을 드라이브에 올려 주소를따서  링크시키는 것 빼고는 다 막아버렸다고 보시면 됩니다

티스토리 계정 없으신 분은 제게 쪽지로 메일주소 주시면 초대장 보내드립니다
10장 정도 보유하고 있으니 선착순으로?? 보내드립니다 (10명 이상 올리가 없겠지만~~흐)
드랍박스 사용자는 거기에 올려도 됩니다


아래 그림에서 처럼 티스토리관리에 들어가 파일업로드에서 추가누르고 플레이어를 업로드하고 
업로드된 파일을 우클릭 링크주소복사 해서 태그에 붙여넣으면 됨..
 
 



flashvars속성을 보면 목록형플레이어에서는 file 대신에 playlistfile을 씁니다 
playlistsize는 하나의 크기가 60 픽셀입니다..위영상에서는 리스트가 5개이므로 300
playlist 는, 가로영상은 밑에 (bottom),세로영상은 우측에 (right) 해주는게 보통입니다
그래서 세로크기는 영상화면이 540 + 리스트 300 + 재생바 25 해서  865 가 되고
리스트를 우측에 붙이면 가로영상에 리스트크기를 더해주면 됩니당~
repeat =list는 첫번째 영상부터 마지막 영상까지 재생한후 멈추는 명령어입니다
나머지는 1편에서 설명한 그대로이니 생략..^^;;

그럼 이제 플레이리스트파일(xml)을 만드는 방법입니다


<playlist xmlns="http://xspf.org/ns/0/" version="1">

<tracklist>
<track>
<title>승연 Strong Enough</title>
<annotation>카라 도쿄돔 솔로무대 모음</annotation>
<location>
http://www.googledrive.com/host/0B2VC_0WKFbt0UmhENDJNWGJBSVE
</location>
<image>
http://i.imgur.com/D68ziAu.jpg
</image>
<meta rel="type">video</meta>
</track>
<track>
<title>하라 I Love Rock'n Roll</title>
<annotation>카라 도쿄돔 솔로무대 모음</annotation>
<location>
http://www.googledrive.com/host/0B2VC_0WKFbt0SnBBNWU1QmV1XzQ
</location>
<image>
http://i.imgur.com/6X4FMb2.jpg
</image>
<meta rel="type">video</meta>
</track>
<track>
<title>니콜 Humpin' Around</title>
<annotation>카라 도쿄돔 솔로무대 모음</annotation>
<location>
http://www.googledrive.com/host/0B2VC_0WKFbt0NE13Zk9zMXNyV2M
</location>
<image>
http://i.imgur.com/NmCVdVo.jpg
</image>
<meta rel="type">video</meta>
</track>
<track>
<title>규리 Daydream</title>
<annotation>카라 도쿄돔 솔로무대 모음</annotation>
<location>
http://www.googledrive.com/host/0B2VC_0WKFbt0cG1JOEI0UzItQjQ
</location>
<image>
http://i.imgur.com/dv2zQLZ.jpg
</image>
<meta rel="type">video</meta>
</track>
<track>
<title>지영 학원천국</title>
<annotation>카라 도쿄돔 솔로무대 모음</annotation>
<location>
http://www.googledrive.com/host/0B2VC_0WKFbt0ZEsyZGk0c194bU0
</location>
<image>
http://i.imgur.com/gh2xHph.jpg
</image>
<meta rel="type">video</meta>
</track>
</tracklist>
</playlist>

위 내용을 복사해 메모장에 붙여놓고  내용 수정하면 됨
영상하고 파일하고 비교해보면 감이오죠??!!

리스트 갯수가 모자란다면 <track> ~~</track>까지를 복사해 원하는 만큼 추가하면 됨..
수정이 끝나면 메모장의 파일-다른이름으로 저장
파일명은 가급적 영어나 숫자로 짧게,확장자는 반드시.xml 으로  인코딩은 UTF-8 로 해서
위와 같이 티스토리 스킨에 업로드해서 링크주소  따서 playlistfile=여기에 붙여넣으면 됩니다

1편과 마찬가지로 완성된 태그를 복사해 게시판 글쓰기 플래시 아이콘 눌러 창에 붙여넣기 하면 끝!!!

요기 까지가 목록형플레이어 만드는 방법이었습니다..넘 쉽죠~~ㅎ

시간되는대로 3편에서는 목록형 플레이어 플러긴 과 jwplayer 스킨소개및 적용방법
목록형 오디오 플레이어 만들기등을 쓸 예정입니다..기대하셔여~~ㅎ
대충 요렇게...^^



 



저작자표시 비영리 변경금지

'플짤관련' 카테고리의 다른 글

왕초보를 위한 플짤만들기 1편 ( jwplayer + 구글드라이브 )  (3) 2014.07.12
JW PLAYER를 이용하여 유튜브영상 HD로 퍼오기 3편 (목록형 플레이어 몇가지 플러긴 )  (0) 2014.06.08
JW PLAYER를 이용하여 유튜브영상 HD로 퍼오기 2편 (목록형 플레이어 )  (3) 2014.06.07
JW PLAYER를 이용하여 유튜브영상 HD로 퍼오기 1편  (0) 2014.06.06
Jwplayer 목록형 플레이어 몇가지 플러그인  (2) 2014.03.22
  

왕초보를 위한 플짤만들기 1편 ( jwplayer + 구글드라이브 )

Posted by 또돌이 플짤관련 : 2014. 7. 12. 13:46
PART 1  인코딩하기
 
먼저 꽤 괜찮은 인코더를 소개합니다
http://www.shana.pe.kr/shanaencoder_download 

옆 프로그램에서  shana mp4box 요것도 다운 받으세요..

전신이 키라라인코더인 샤나인코더를  설치하고 실행시키면..



위그림의 인코딩설정 밑에있는 세부설정을 누르고 그림과 같이 맞춰주세용~
파일형식은 mp4
비디오코덱은 libx264
오디오코덱은 libaac   반드시 요 형태로 맞춰줘야합니다

웹상에서 재생되는 영상의 속성은   영상은 H264, 오디오는 AAC 
요런 속성을 가진 영상만이 재생됩니다  요 속성을 가진 확장자는 flv 하고 mp4 가 있습니다
flv 보다는 mp4 가 좀더 나은 화질을 보여준다네요..
원본파일의 용량을 줄이기위해서도 있지만 웹에 재생가능한 형태로 바꾸기위해 인코딩을 하는것 입니다
나머지는 일단은 그림그대로 하시고 영상/자막에 들어가서 디인터레이스에 체크해주세요
sd 영상은  가로 640 세로 480   잘라내기 4:3 으로 맞추면 됨..


파일추가에서 불러오거나 드래그앤드롭으로 인코딩할 파일을 불러오고 마우스 우클릭하면 나타나는 창에서
미리보기나 구간설정/잘라내기 도 유용한 기능이니 나중에 잘 챙겨보시길~~

파일추가, 저장폴더선택하고 인코딩시작누르면 끝!!!
사용법이라고할 것도 없이 간단하지만 요놈의 성능은 만만치가 않습니다..^^

이제 생성된 mp4파일을 mux 해줘야합니다
먹싱를해주지 않으면 재생기가 파일 전체를 다 읽은 후에야 재생을 시작하기 때문에 로딩시간이 엄청 걸리게 됩니다
위에서 다운받은 shana mp4 box가  먹싱프로그램입니다
기존 yamb1.6 을 쓰시는 분은 그냥 그걸 써도 됩니다
암튼 먹싱은 필수!!


PART 2  구글드라이브에 파일 올리고 주소따기

일단 구글에가입하면 내드라이브에 15GB 용량이 주어집니다
이 한도 내에서 마음껏 파일을 올릴 수 있습니다
업로드 속도가 좀 느리긴 하지만 티스토리처럼 10메가 단위로 파일을 쪼개지 않아도 되니 편리합니다

위에서 먹싱한 파일을 올리기 전에 할일이 하나 있습니다
파일의 확장자를 jpg로 바꿔줘야 합니다.. 그냥 이름바꾸기에서 .jpg만 추가하면 됩니다
파일의 스트리밍을 제한하기 때문에 mp4파일 그대로를 올리면 처음에는 재생되다가 좀후에 차단됩니다
그래서 편법으로 jpg로 바꿔주는 겁니다

파일에 확장자가 안보이는 분들은

제어판 -모양및개인설정-폴더옵션-보기-고급설정-알려진형식 파일 확장명 숨기기-체크해제-적용 ..




업로드 아이콘을 누르고 파일을 업로드하면



공유를 클릭해서 웹에 공개에 체크






키보드의 Ctrl을 누른채로 게시글을 클릭하면 새탭이 뜨는데
 


위 주소창에서 / d/ ~~/edit 사이에 있는 문자열을 복사해
 
https://www.googledrive.com/host/요기에 붙여넣으면  파일의 주소가 됩니다
 

https://www.googledrive.com/host/0B2VC_0WKFbt0YktaOXZwNThfd1E

요기까지가 주소따는 방법이었습니다


PART 3  jwplayer 를 이용해 게시판에 플짤올리기

https://docs.google.com/uc?authuser=0&id=0B2VC_0WKFbt0TmhodEx2bW43VWs&export=download

위 링크에서 player.swf.jpg 파일을 다운받아
자신의 드라이브에 올려 주소를 따주시고..

위파일은 jwplayer5.7 라이센스 버젼입니다
라이센스가 아니면 재생시 jwplayer 로고가 보입니다
현재 6버젼이 나왔지만 6버젼은 기반이 달라 게시판에서 사용이 안되니
5.7 버젼이 유튜브영상 링크등 쓸모가 많습니다



 jwplayer의 기본 태그 형식은
 

<embed src="플레이어주소" width=가로크기 height=세로크기 flashvars="file=파일주소&명령어&명령어">


완성된 태그의 예
 <embed src="https://www.googledrive.com/host/0B2VC_0WKFbt0TmhodEx2bW43VWs"

 type="application/x-shockwave-flash" width="960" height="565" allowfullscreen="true" 

flashvars="file=https://www.googledrive.com/host/0B2VC_0WKFbt0YktaOXZwNThfd1E

&type=video&autostart=false">


위태그에 대한 간략한 설명을 하자면 
영상타입은 플래시이고 풀스크린 가능,영상의 가로크기는 960 픽셀, 세로크기는 565 픽셀..
웹상에서 가장 보기좋은 크기는 960 *540 (16:9 hd ) 인데 재생바의 높이 25 픽셀을 세로크기에 더해줘야 함
플래시바 속성에서 type=video는 반드시 넣어줘야함.. 파일의 확장자를 jpg로 올렸기때문에..

위태그를 복사해 게시판의 글쓰기에 들어가

 

FL 아이콘 눌러 나오는 플래시임베디드코드에 붙여넣기 하고 확인을 누르면 됩니다



영상이 이상없이 재생되면 성공입니다~~~^^ ㅎㅎ


<보충 심화?학습>

영상에 대기화면이 없어 쫌 썰렁하다 싶으면 사진을 드라이브나 imgur에 올려 아래와 같이 이미지를 추가하면 됩니다

<embed src="https://www.googledrive.com/host/0B2VC_0WKFbt0TmhodEx2bW43VWs"
 type="application/x-shockwave-flash" width="960" height="565" allowfullscreen="true" 
flashvars="file=https://www.googledrive.com/host/0B2VC_0WKFbt0YktaOXZwNThfd1E
&type=video&autostart=false&image=http://i.imgur.com/wCSg91s.jpg">

구글드라이브에 올려도되지만
 imgur.com 에 올려 링크주소 따는걸 추천


하는김에  재생바 색상변경 /  자신만의 로고 넣기

<embed src="https://www.googledrive.com/host/0B2VC_0WKFbt0TmhodEx2bW43VWs"
 type="application/x-shockwave-flash" width="960" height="565" allowfullscreen="true" 
flashvars="file=https://www.googledrive.com/host/0B2VC_0WKFbt0YktaOXZwNThfd1E
&type=video&autostart=false&image=http://i.imgur.com/wCSg91s.jpg
&lightcolor= #E77471&backcolor=000000 &frontcolor=#FBBEA1
&logo.file=http://i.imgur.com/D9Ev7HD.png&logo.position=upper-right&logo.hide=false">

밑의 부록 참조하셔서 컬러색상코드표에서 자신이 좋아하는 색상코드를 써주면 되고
색상코드표는 아래 링크에서..
http://song9512.tistory.com/entry/HTML-%EC%B9%BC%EB%9D%BC-%EC%BD%94%EB%93%9C-%EC%B0%A8%ED%8A%B8-%EC%83%89%EC%83%81%EC%BD%94%EB%93%9C%ED%91%9C

로고파일도 태그 보고 맞춰 넣어주면 됨..






요기까지 해서 플짤 만들기 1편은 끝 

이글 반응봐서 2편에서는 목록형플레이어 만들기 연재 예정임..^^:::





[부록] jw player 기본 태그 설명

<embed src="플레이어url" width=가로크기 height=세로크기 flashvars="file=파일url&명령어&명령어">



controlbar=bottom(default) - 하단(기본값)
controlbar=top - 영상 상단
controlbar=over - 영상에 마우스가 오버되었을시 컨트롤바 나타남. 일정시간후 사라짐.
controlbar=none - 컨트롤바 없음.

frontcolor=컨트롤러 버튼 색상(RGB색상표사용)
lightcolor=버튼 오버 색상(RGB색상표사용)
backcolor=컨트롤러 전체 색상(RGB색상표사용)
screencolor=화면 기본 색상(RGB색상표사용)

skin=skin파일url - JWPlayer스킨.
스킨명령어가 없으면 기본스킨으로 적용.

autostart=false(Default) - 자동재생이 안됨
autostart=true - 자동으로 재생

repeat=false(Default) - 한번 재생하고 멈춤
repeat=list - 재생목록을 전체 한바퀴 돌고 멈춤
repeat=always - 무한자동반복

mute=false(Default) - 음소거 없음
mute=true - 음소거

icon=true(Default) - 아이콘 생김(플레이어사용시 가운데 플레이와 로딩아이콘)
icon=false - 아이콘 없음

menu=true(Default) - 플레이어 우클릭하면 메뉴가 나타남
menu=false - 메뉴 나타나지 않음
 
stretching=uniform(Default) - 영상 비율 변하지않음
stretching=fill - 가로크기에 맞춰 영상을 꽉채움.
stretching=exactfit - 영상의 화면비율 무시하고  플레이어 화면 크기에 영상을 맞춤.
stretching=none - 플레이어 크기와 상관없이 원본영상크기대로 나옴.

volume=기본볼륨(0~100)

captions=srt 자막링크


image=이미지url - 자동재생이 아닌경우 썸네일표시

logo=로고url - 오른쪽 상단 로고 (이미지파일, swf파일가능 JWPlayer4.x버전에서 사용가능)

5.x이상사용시 라이센스버전이 아닌경우 명령어가 안먹힐 수도있음
logo.file=로고url - 로고이미지
logo.hide=true - 재생시로고가사라짐
logo.hide=false - 사라지지않음
logo.position=bottom-left(Default) - 왼쪽아래
logo.position=top-left - 왼쪽위
logo.position=top-right - 오른쪽 위
logo.position=bottom-right - 오른쪽아래
logo.link=링크 - 로고를 클릭하면 이동되는 사이트

플레이 리스트 사용시 명령어
playlist=none(Default) - 플레이 리스트 안보임
playlist=top - 영상상단
playlist=bottom - 영상하단
playlist=right - 영상 오른쪽
playlist=left - 영상 왼쪽
playlist=over - 화면 재생전에 목록이 나옴

title=영상제목 - 재생목록을 사용할 경우 표시(xml재생목록사용시 사용하지않음).
description=영상설명 - 재생 목록 타이틀 아래에 나타남(xml재생목록사용시 사용하지않음, 스킨에따라 표시되지않을 수 있음).

playlistsize=숫자 - 사이즈만큼 영상의 전체사이즈도 늘려줘야함.

shuffle=false(Default) - 무작위 재생 없음
shuffle=true - 무작위 재생
저작자표시 비영리 변경금지

'플짤관련' 카테고리의 다른 글

왕초보를 위한 플짤만들기 2편 ( jwplayer 목록형 플레이어 만들기)  (0) 2014.07.21
JW PLAYER를 이용하여 유튜브영상 HD로 퍼오기 3편 (목록형 플레이어 몇가지 플러긴 )  (0) 2014.06.08
JW PLAYER를 이용하여 유튜브영상 HD로 퍼오기 2편 (목록형 플레이어 )  (3) 2014.06.07
JW PLAYER를 이용하여 유튜브영상 HD로 퍼오기 1편  (0) 2014.06.06
Jwplayer 목록형 플레이어 몇가지 플러그인  (2) 2014.03.22
  

JW PLAYER를 이용하여 유튜브영상 HD로 퍼오기 3편 (목록형 플레이어 몇가지 플러긴 )

Posted by 또돌이 플짤관련 : 2014. 6. 8. 02:10
오늘은 3편으로  목록형 플레이어의 플러긴에 대해 설명함

2편에서 설명한것처럼 아래 태그가 목록형플레이어의 기본형태임

<embed src="http://cfs.tistory.com/custom/blog/104/1044374/skin/images/player5.7.swf?"
 allowfullscreen="true" type="application/x-shockwave-flash" width="800" height="564" 
flashvars="playlistfile=http://gdata.youtube.com/feeds/api/playlists/PLqm_TDfIl-qR0VDPKfy86TgrpGGSW0jBz?max-results=50
&playlist=right&playlistsize=350
&amp;repeat=list&amp;volume=100&amp;lightcolor= #ADDFFF&amp;backcolor=000000&amp;frontcolor=#FBBEA1">

 

The Ventures 연주모음


 그런데 형태가 너무 틀에박혀 좀 지루하다하는분들을 위해 몇가지 형태 플러긴을 소개함
플러긴을 사용한다고 설치하거나 그런게 아니고 그냥 태그에 아래 태그처럼 플러긴을 태그에 써주기만 하면 됨..

<embed src="http://cfs.tistory.com/custom/blog/104/1044374/skin/images/player5.7.swf?"
 allowfullscreen="true" type="application/x-shockwave-flash" width="700" height="450"
 flashvars="playlistfile=http://gdata.youtube.com/feeds/api/playlists/PL-fnkX2SRl4OglVxS9aNb1VwGO-rOjKdD?max-results=50
&plugins=basic-1
&amp;repeat=list&amp;lightcolor= #ADDFFF&amp;backcolor=000000&amp;frontcolor=#FBBEA1">



plugins=basic-1

 
C.C.R 노래모음


plugins=grid-2


 Sylvie Vartans 노래모음


plugins=dna-1


 배철수 노래모음


이외

depth-1  
flow-1 
carousel-1

등이 있으니 입맛에 맞게 쓰면 될듯~~!!

<embed src="http://cfs.tistory.com/custom/blog/104/1044374/skin/images/player5.7.swf?"
 allowfullscreen="true" type="application/x-shockwave-flash" width="450" height="824" 
flashvars="playlistfile=http://gdata.youtube.com/feeds/api/playlists/PLqm_TDfIl-qQa87ueg4RNMRxoS8it-K-f?max-results=50
&amp;hd=1&amp;plugins=hd-2 ,depth-1
&amp;repeat=list
&amp;lightcolor= #ADDFFF&amp;backcolor=000000&amp;frontcolor=#FBBEA1">

위태그에서 처럼 기존에 다른 플러긴(hd-2)을 쓰고 있는 경우에는
위 태그처럼 컴머와 플러긴을 추가해주면 됨


 

 어떤가요?? 깔끔해 보이나요??  




요기까지 해서 유튜브영상 퍼오기 편은 쫑~~!!  ㅎㅎ

  
저작자표시 비영리 변경금지

'플짤관련' 카테고리의 다른 글

왕초보를 위한 플짤만들기 2편 ( jwplayer 목록형 플레이어 만들기)  (0) 2014.07.21
왕초보를 위한 플짤만들기 1편 ( jwplayer + 구글드라이브 )  (3) 2014.07.12
JW PLAYER를 이용하여 유튜브영상 HD로 퍼오기 2편 (목록형 플레이어 )  (3) 2014.06.07
JW PLAYER를 이용하여 유튜브영상 HD로 퍼오기 1편  (0) 2014.06.06
Jwplayer 목록형 플레이어 몇가지 플러그인  (2) 2014.03.22
  

JW PLAYER를 이용하여 유튜브영상 HD로 퍼오기 2편 (목록형 플레이어 )

Posted by 또돌이 플짤관련 : 2014. 6. 7. 20:51
먼저 울 아긔들 직캠영상을 감상하시져~~ㅎ






 어제의 1편에 이어 오늘은 위와같이 유튭영상을 목록형플레이어 형태로 퍼오는 방법입니다...


<embed src="http://cfs.tistory.com/custom/blog/104/1044374/skin/images/player5.7.swf?"
 allowfullscreen="true" type="application/x-shockwave-flash" width="800" height="824" 
flashvars="playlistfile=http://gdata.youtube.com/feeds/api/playlists/PLqm_TDfIl-qQa87ueg4RNMRxoS8it-K-f?max-results=50
&amp;hd=1&amp;plugins=hd-2
&playlist=right&playlistsize=350&amp;repeat=list
&amp;lightcolor= #ADDFFF&amp;backcolor=000000&amp;frontcolor=#FBBEA1">



위 태그에 노란부분처럼 유튭 리스트 주소 부분만 복사해서 붙여 넣으면  - 끝 -!!!
http://www.youtube.com/watch?v=_zQBrkXPBN8&list=PLw5Zqn2M_TNXTevqgRemqAhwogXeui4oh&feature=mh_lolz
위와같은 유튭 주소창에서 노란부분만 카피해서 붙여넣으셈..

태그에 대한 설명을 간략히 하자면 
우선 세로 HD 영상이니까 대략 450 *800 으로하고 여기에 플레이리스트는 영상 우측에 붙이고
리스트 크기는 450 ..그래서 가로 크기는 800 픽셀, 세로크기는 재생바 크기 24픽셀 합쳐서 824 픽셀로 함
가로영상일 경우에는 플레이리스트는 밑으로.. 태그에 &playlist=bottom 요렇게 바꿔주면 됨..
태그 맨밑줄은 플레이어의 색상을 결정해주는 태그니까 칼라코드표에서 맘에드는 색상으로 바꾸면 됨 

칼라코드표는 여기에서




그런데 남이 올린 영상을 그대로 퍼오는 것보다 나만의 플레이리스트를 가지고싶다 하시는 분들은
자신의 유튭계정에서


추가를 눌러 재생목록만들기 란에 제목 적어주고 재생목록만들기를 클릭하면 리스트가 만들어집니다
이런 방법으로 원하는 영상을 다 추가한후에






화면 우측상단의 사람모양 아이콘을 클릭하면 내채널이 뜹니다




내채널에 들어가서 모든재생목록보기 를 클릭해 순서라든지 몇가지를 정리하고  모두재생을 클릭하면


위와같이 주소창이 뜨고 빨간 사각형 주소부분을 복사해 저~~어 위 태그에 붙여넣으면 됩니다

이런방법으로 플레이리스트를 만들면 됩니다~~



이것저것 딴짓하면서 글을썼더니  두시간이 훌쩍 넘었네요~~
뭐 크게 유용한 팁은 아니더라도 관심있으신 분들께 조그만 도움이 되었기를~~~^^**


저작자표시 비영리 변경금지

'플짤관련' 카테고리의 다른 글

왕초보를 위한 플짤만들기 1편 ( jwplayer + 구글드라이브 )  (3) 2014.07.12
JW PLAYER를 이용하여 유튜브영상 HD로 퍼오기 3편 (목록형 플레이어 몇가지 플러긴 )  (0) 2014.06.08
JW PLAYER를 이용하여 유튜브영상 HD로 퍼오기 1편  (0) 2014.06.06
Jwplayer 목록형 플레이어 몇가지 플러그인  (2) 2014.03.22
JwPlayer로 자막 링크 시키기  (3) 2014.01.16
  

JW PLAYER를 이용하여 유튜브영상 HD로 퍼오기 1편

Posted by 또돌이 플짤관련 : 2014. 6. 6. 04:38
유튭 영상을 게시판으로 퍼오는 방법은 몇가지가 있지만 
여기서는 jwplayer 를 이용해 퍼오는 방법으로 설명할거임

첫째로 필요한 준비물은 jw player 5.7 버전이 필요함

요기서 다운 받은후 확장자 .jpg 삭제
player 5.7. swf  파일을 티스토리나 구글드라이브 자신의 계정에 올려 주소따기

흠~근데 이런거 귀찮아하는 논네들은 걍 밑에있는 내가 따논 주소 쓰셈~~ㅎㅎ


각설하고 jw player 를 이용해 유툽영상을 불러오는 태그의 기본형은

<embed src="player 주소"
 width="영상의 가로크기" height="영상의 세로크기"  type="application/x-shockwave-flash"  allowfullscreen="true"
 flashvars="file=불러올 유툽영상의 주소
&amp;hd=1&amp;plugins=hd-2
&amp;icon=false">

이런 정도인데 HD로 불러올거니깐 영상의 크기는 가로 960픽셀  세로 540 픽셀이면 적당하고
플레이어에서 확대하면 1280 *720으로 재생됨

완성된 태그의 예

<embed src="http://cfs.tistory.com/custom/blog/104/1044374/skin/images/player5.7.swf?"
 width="960" height="564" type="application/x-shockwave-flash"  allowfullscreen="true"
 flashvars="file=http://www.youtube.com/watch?v=kLgsMGmV_NY
&amp;hd=1&amp;plugins=hd-2
&amp;icon=false">

위 태그를 복사해 메모장에 붙여놓고 노란색 부분 유툽영상 주소만 바꿔주면 됨..

아 ~근데 위에선 세로크기 540 이라 해놓고 태그엔 564로 적었네 하시는 분은 눈썰미 대단...ㅎㅎ
밑의 영상 하단부에 검색바 (재생바) 보이시져..
검색바의 높이가 24 픽셀임..그래서 영상과 검색바를 더한 높이가 564 임
검색바를 영상 안에 넣고싶다 하면 태그에 &amp;controlbar=over  를 넣어주면 됨
그럴려면 세로높이는 540으로 바꿔주고..직접함 해보셈


 

 요렇게 뜸~~ㅎㅎ
당연히 원본 영상이 HD (720p) 을 지원하지 않으면 안됨
재생이 안되는건 아니고 일반화질로 재생됨..넘 당연한 야근가??


영상을보니 앞에 옆집처자들이 엠씨를 보구있네...  카라외는 보구싶지않아!!  하신다면 필요한 부분만 보면되지~~
전에 올린 영상이 블럭이돼 다른 영상으로 교체합니다
태그에 시작 시간과 영상 재생 시간을 적어주면 됩니다


<embed src="http://cfs.tistory.com/custom/blog/104/1044374/skin/images/player5.7.swf?"
 width="960" height="564" type="application/x-shockwave-flash"  allowfullscreen="true"
 flashvars="file=http://www.youtube.com/watch?v=kLgsMGmV_NY
&amp;hd=1&amp;plugins=hd-2&amp;start=34&amp;duration=20
&amp;icon=false&amp;menu=true" >

시간은 초단위로 표기합니다
34초부터 재생시작 20초간 재생됩니다
 




 아~ 그리구 퍼온 영상을 걍 오디오만 듣고싶다 하면  그냥 편법으로
태그에서 영상의 세로크기를 24로 해주면됨
당연히 영상은 안보이고 재생바만 보임







써놓고 보니 거창한거 같은데 별거없음..
그냥 태그에 유툽영상 주소창에 뜬 주소만 가져다 붙이면 그게다임~~ㅎㅎ



 


저작자표시 비영리 변경금지

'플짤관련' 카테고리의 다른 글

JW PLAYER를 이용하여 유튜브영상 HD로 퍼오기 3편 (목록형 플레이어 몇가지 플러긴 )  (0) 2014.06.08
JW PLAYER를 이용하여 유튜브영상 HD로 퍼오기 2편 (목록형 플레이어 )  (3) 2014.06.07
Jwplayer 목록형 플레이어 몇가지 플러그인  (2) 2014.03.22
JwPlayer로 자막 링크 시키기  (3) 2014.01.16
Jwplayer Image Rotator로 포토갤러리 만들기  (0) 2014.01.11
  

Jwplayer 목록형 플레이어 몇가지 플러그인

Posted by 또돌이 플짤관련 : 2014. 3. 22. 00:23
1.목록형 플레이어의  기본형태
<embed src="http://cfs.tistory.com/custom/blog/104/1044374/skin/images/player5.7.swf?"
 allowfullscreen="true" type="application/x-shockwave-flash" width="960" height="805" 
flashvars="playlistfile=http://cfs.tistory.com/custom/blog/104/1044374/skin/images/kara%20mv%20jp%20player.xml?
&amp;type=video&amp;playlistsize=240&amp;playlist=bottom&amp;backcolor=000000&amp;frontcolor=#FBBEA1
&amp;lightcolor= #ADDFFF&amp;menu=false&amp;repeat=list&amp;icons=false&volume=400" >
소리가 작게 인코딩돼서 볼륨을 많이 높혔음..^^;; 

다른 플러긴을 써줄 필요없이 playlistsize와 플레이리스트 위치만 지정해주면 됨..여기선 bottom으로 지정





 


2.dna-1
<embed src="http://cfs.tistory.com/custom/blog/104/1044374/skin/images/player5.7.swf?"
 allowfullscreen="true" type="application/x-shockwave-flash" 
flashvars="playlistfile=http://cfs.tistory.com/custom/blog/104/1044374/skin/images/kara%20mv%20jp%20player.xml?=836752583
&amp;type=video&amp;plugins=dna-1&amp;backcolor=000000&amp;frontcolor=#FBBEA1&amp;lightcolor= #ADDFFF
&amp;menu=false&amp;repeat=list&amp;icons=false&volume=400" width="960" height="565" >

따로 플러긴을 설치하거나 할 필요없이 flashvars 속성에 플러긴을 써넣어주기만 하면 됨

 
 

3.basic-1
 <embed src="http://cfs.tistory.com/custom/blog/104/1044374/skin/images/player5.7.swf?"
 allowfullscreen="true" type="application/x-shockwave-flash" 
flashvars="playlistfile=http://cfs.tistory.com/custom/blog/104/1044374/skin/images/kara%20mv%20jp%20player.xml?=836752583
&amp;type=video&amp;plugins=basic-1&amp;backcolor=000000&amp;frontcolor=#FBBEA1&amp;lightcolor= #ADDFFF
&amp;menu=false&amp;repeat=list&amp;icons=false&volume=400" width="960" height="565" >




4.flow-1
 <embed src="http://cfs.tistory.com/custom/blog/104/1044374/skin/images/player5.7.swf?"
 allowfullscreen="true" type="application/x-shockwave-flash" 
flashvars="playlistfile=http://cfs.tistory.com/custom/blog/104/1044374/skin/images/kara%20mv%20jp%20player.xml?=836752583
&amp;type=video&amp;plugins=flow-1&amp;flow.size=250&amp;flow.position=bottom  &amp;backcolor=000000&amp;frontcolor=#FBBEA1&amp;lightcolor= #ADDFFF
&amp;menu=false&amp;repeat=list&amp;icons=false&volume=400" width="960" height="815" >

요건 size와 position을 같이 써줘야 하는데 밑의 영상보면 이해되실 듯..위치가 바텀이고 크기가 250 이니 원래 영상크기 세로 540 에
250을 더하고 재생바 높이 25를 더해서 하이트가 815임...
재생바를 영상안에 넣고 싶으면 flashvars 속성에 controlbar=over 를 넣어주면 됨




5.grid-2
 <embed src="http://cfs.tistory.com/custom/blog/104/1044374/skin/images/player5.7.swf?"
 allowfullscreen="true" type="application/x-shockwave-flash" 
flashvars="playlistfile=http://cfs.tistory.com/custom/blog/104/1044374/skin/images/kara%20mv%20jp%20player.xml?=836752583
&amp;type=video&amp;plugins=grid-2&amp;backcolor=000000&amp;frontcolor=#FBBEA1&amp;lightcolor= #ADDFFF
&amp;menu=false&amp;repeat=list&amp;icons=false&volume=400" width="960" height="565" >


 


6.depth-1
 <embed src="http://cfs.tistory.com/custom/blog/104/1044374/skin/images/player5.7.swf?"
 allowfullscreen="true" type="application/x-shockwave-flash" 
flashvars="playlistfile=http://cfs.tistory.com/custom/blog/104/1044374/skin/images/kara%20mv%20jp%20player.xml?=836752583
&amp;type=video&amp;plugins=depth-1&amp;backcolor=000000&amp;frontcolor=#FBBEA1&amp;lightcolor= #ADDFFF
&amp;menu=false&amp;repeat=list&amp;icons=false&volume=400" width="960" height="565" >





7.carousel-1
 <embed src="http://cfs.tistory.com/custom/blog/104/1044374/skin/images/player5.7.swf?"
 allowfullscreen="true" type="application/x-shockwave-flash" 
flashvars="playlistfile=http://cfs.tistory.com/custom/blog/104/1044374/skin/images/kara%20mv%20jp%20player.xml?=836752583
&amp;type=video&amp;plugins=carousel-1&amp;backcolor=000000&amp;frontcolor=#FBBEA1&amp;lightcolor= #ADDFFF
&amp;menu=false&amp;repeat=list&amp;icons=false&volume=400" width="960" height="565" >





위와 같이 다양한 효과를 줄 수 있는 플러긴들이 있으니 입맛따라 선택 가능~~~ㅎㅎ
저작자표시 비영리 변경금지

'플짤관련' 카테고리의 다른 글

JW PLAYER를 이용하여 유튜브영상 HD로 퍼오기 2편 (목록형 플레이어 )  (3) 2014.06.07
JW PLAYER를 이용하여 유튜브영상 HD로 퍼오기 1편  (0) 2014.06.06
JwPlayer로 자막 링크 시키기  (3) 2014.01.16
Jwplayer Image Rotator로 포토갤러리 만들기  (0) 2014.01.11
JW PLAYER 목록형 플레이어 만들기  (14) 2013.09.18
  

JwPlayer로 자막 링크 시키기

Posted by 또돌이 플짤관련 : 2014. 1. 16. 20:38
jwplayer는 TimedText 와 SRT 자막만을 지원합니다
TimedText는 좀 생소하고, SRT 자막 링크거는 것으로 설명합니다
보통은 SMI 자막을 많이 쓰기 때문에 Jwplayer로 링크하려면 SMI 자막을 SRT자막으로 변환해 주어야 합니다

아래 링크에서 변환 프로그램을 다운 받으세요
https://docs.google.com/uc?authuser=0&id=0By7lGrMEmOEaTEJHVGNCNFhPQTg&export=download

다운 받은 후 확장자 .jpg를 삭제하고 압축을 풀면 sub.exe와 vobsub.dll 파일이 생성됩니다
사용법은 간단합니다  프로그램 실행하고 smi 파일을 불러와서  Save As....누른 후


파일형식은  srt로 ,그리고 Unicode output에 체크해주면 됩니다

이렇게 변환한 srt 자막을 구글드라이브에 올려서 주소를 따서 아래 태그에 붙여넣으면 됩니다
구글드라이브가 영상을 링크시키는거외는 다 막아버렸습니다
그래서 srt 자막을 티스토리에 올려 주소땄습니다

플레이어와 자막파일은 반드시 같은 계정에 올려야 합니다
여기서는 티스토리에...

<embed src="jwplayer 주소"
type="application/x-shockwave-flash" width="영상 가로크기" height="영상의 세로크기" allowfullscreen="true"

 flashvars="file=https://www.googledrive.com/host/0B3l-5BlYUc0lMEp3TEl2aVdLV1E
&amp;repeat=list&amp;image=

&amp;plugins=captions-2&amp;captions.file=자막파일 주소

&amp;captions.state=true&amp;captions.color=글자 색상
&amp;type=video&amp;autostart=true&icons=false">


자막을 재생시키기 위한 기본적인 flashvars 설정은
plugins=captions-2          자막 플러그인을 사용한다는 의미
captions.file=                 자막파일 주소
captions.state=              자막의 초기상태  on / off   기본값 true
captions.color=              폰트색상   기본값 #FFFFFF 흰색
                                색상을 변경하려면 색상코드표에서 맘에드는 색상을 선택하면 됩니다  ex) #FF0000  빨강 

이외
captions.fontweight=       폰트를 굵게할때  기본값 normal 
captions.fontstyle=          폰트 스타일 변경  기본값 normal  


완성된 태그 예
 

<embed src="http://cfs.tistory.com/custom/blog/104/1044374/skin/images/player5.7.swf?" 

type="application/x-shockwave-flash" width="960" height="565" allowfullscreen="true" 

flashvars="file=https://www.googledrive.com/host/0By7lGrMEmOEaaWZMQ3ZsVnNSS28

&amp;repeat=list&amp;image=http://i.imgur.com/zwKvZr1.jpg

&amp;plugins=captions-2&amp;captions.file=http://cfs.tistory.com/custom/blog/104/1044374/skin/images/(15)%20Girl's%20Power%EF%BC%8FM-ON%20ver%2002.srt?=341484158

&amp;captions.state=true&amp;captions.color=#ADDFFF
&amp;icons=false&amp;type=video&amp;autostart=false">

 

영상 예제 


 


 자막 on / off 를 선택할 수 있습니다

 



저작자표시 비영리 변경금지

'플짤관련' 카테고리의 다른 글

JW PLAYER를 이용하여 유튜브영상 HD로 퍼오기 1편  (0) 2014.06.06
Jwplayer 목록형 플레이어 몇가지 플러그인  (2) 2014.03.22
Jwplayer Image Rotator로 포토갤러리 만들기  (0) 2014.01.11
JW PLAYER 목록형 플레이어 만들기  (14) 2013.09.18
Jwplayer로 mp3 플레이어 만들기  (0) 2013.06.23
  

Jwplayer Image Rotator로 포토갤러리 만들기

Posted by 또돌이 플짤관련 : 2014. 1. 11. 09:05




포토갤러리라기 보다 그냥 사진 슬라이드 라고 하는게 ...

일단 jwplayer image rotator 3.17 요게 필요합니다
3.18 버젼도 있지만 3.18은 jwplayer 로고가 뜹니다

https://docs.google.com/file/d/0B3l-5BlYUc0lUHNldTlJMFU0NEk/edit

요걸 다운받아  .jpg 를 삭제
자기 티스토리 스킨에 업하고 주소따면 되고
구글계정있는분은 구글에 올리면 됩니다 



다음은 xml 파일 만들기.

<playlist version="1" xmlns="http://xspf.org/ns/0/">
<trackList> 
<track>
<title>seungyeon photo</title>
<location>http://i.imgur.com/eYjQgVJ.jpg</location>
</track>
<track>
<title>seungyeon photo</title>
<location>http://i.imgur.com/j3ZcE0J.jpg</location> 
</track>
<track>
<title>seungyeon photo</title>
<location>http://i.imgur.com/eqBatNi.jpg</location> 
</track>
</trackList>
</playlist>


위 내용을 복사해 메모장에 붙여놓고
타이틀에 적당한 이름 붙여주고
로케이션에 사진 주소 넣어주면 됨.
여기서는 imgur에 사진올려 주소 땀.
목록 숫자 모자라면 <track> 부터 </track> 까지 복사해 붙여넣어주면 됩니다

메모장 에서 파일 누르고 "다른이름으로 저장" 선택
파일이름을 영문과 숫자로 적고 확장자는 반드시 .xml 로 하여야 함
인코당은 UTF-8 선택 

요 xml 파일을 마찬가지로 티스토리 스킨에 업로드 해서 주소 땀 


<embed src="image rotator 317 주소"
 type="application/x-shockwave-flash"  width="영상의 가로 크기" height="영상의 세로 크기"
allowscriptaccess="always" allowfullscreen="true"  allownetworking="internal"
flashvars="file=xml 파일 주소
&rotatetime=4&transition=random&shuffle=false  &audio=오디오 파일 주소&volume=" >

사진을 순서대로 재생시키려면 shuffle=false를 무작위 재생을 원하면 shuffle=true로 표기하거나 셔플 자체를 안써주면 됨
(shuffle=true가 defalt값임)

위 태그에 위에서 딴 주소들을 적어 넣어주면 됩니다
참고로 오디오 파일은 mp3 파일로 구글에 올린걸 썼습니다
(티스토리는 mp3를 올릴 수가 없어서...또르르 ㅜ.ㅜ)


 완성된 태그 예

<embed src="http://cfs.tistory.com/custom/blog/104/1044374/skin/images/imagerotator317.swf"
 type="application/x-shockwave-flash"  width="800" height="600"
allowscriptaccess="always" allowfullscreen="true"  allownetworking="internal"
flashvars="file=http://cfs.tistory.com/custom/blog/104/1044374/skin/images/im%20test%206666.xml
&rotatetime=4&transition=random&shuffle=false
&audio=https://www.googledrive.com/host/0B3l-5BlYUc0lQmR1SkRXaWNhR28&volume=" >

참고로 플레이어와 xml 파일은 반드시 같은 곳에 올려야 합니다
여기서는 티스토리에 올림


 


저작자표시 비영리 변경금지

'플짤관련' 카테고리의 다른 글

Jwplayer 목록형 플레이어 몇가지 플러그인  (2) 2014.03.22
JwPlayer로 자막 링크 시키기  (3) 2014.01.16
JW PLAYER 목록형 플레이어 만들기  (14) 2013.09.18
Jwplayer로 mp3 플레이어 만들기  (0) 2013.06.23
HTML 칼라 코드 차트 ( 색상코드표 )  (0) 2013.05.15
  

JW PLAYER 목록형 플레이어 만들기

Posted by 또돌이 플짤관련 : 2013. 9. 18. 21:33
jwplayer 목록형 플레이어 만드는 방법입니다
jw player와 구글드라이브에 대해 어느정도 아신다는 가정하에 이글을 작성합니다
구글드라이브에 파일 올려 주소따는 방식으로 진행합니다 
 
구글드라이브에 파일 올리기
아래 아키버드님의 블로그 보시고 따라하시면 됩니다

여기서는 jw player와 xml파일은 티스토리에 올린걸 썼습니다
주의하실점은  플레이어와 xml파일은 반드시 같은곳에 올려야 합니다.

<embed src="http://cfs.tistory.com/custom/blog/104/1044374/skin/images/player5.7.swf?"
 allowfullscreen="true" type="application/x-shockwave-flash" 
flashvars="playlistfile=http://cfs.tistory.com/custom/blog/104/1044374/skin/images/kara%20mv%20jp%20player.xml?=836752583
&amp;type=video&amp;playlistsize=240&amp;playlist=bottom&amp;backcolor=000000&amp;frontcolor=#FBBEA1
&amp;lightcolor= #ADDFFF&amp;menu=false&amp;repeat=list&amp;icons=false" width="960" height="805" >

플레이리스트 위치나 크기는 적당히 조절하면 됩니다
플레이 리스트를 우측에 붙일때는 playlist=bottom에서 bottom을 right로 바꿔넣으면 됩니다 
색상은 색상코드표를 보고 맘에 드는걸로 써주시면 됩니다. (색상코드표는 밑의 게시물에 있습니다)

위태그에 xml파일 링크만 따서 붙여 넣으시면 됩니다~

xml 작성 예

<playlist xmlns="http://xspf.org/ns/0/" version="1">
<title>KARA Music Video Player</title>
<tracklist>
<track>
<title>Mr.</title>
<annotation>KARA Music Video JP Ver. Player</annotation>
<location>
http://www.googledrive.com/host/0B84bK_ixBZXjQVNmNVlISlJsV3M
</location>
<image>
http://i.imgur.com/39Zi0Md.jpg
</image>
<meta rel="type">video</meta>
</track>
<track>
<title>Electric Boy</title>
<annotation>KARA Music Video JP Ver. Player</annotation>
<location>
http://www.googledrive.com/host/0B84bK_ixBZXjT2h5ZjZCSE9oQTQ
</location>
<image>
http://i.imgur.com/LWygIrU.jpg
</image>
<meta rel="type">video</meta>
</track>
<track>
<title>Speed Up</title>
<annotation>KARA Music Video JP Ver. Player</annotation>
<location>
http://www.googledrive.com/host/0B84bK_ixBZXjM0FocUJ4SldBb2c
</location>
<image>
http://i.imgur.com/yi9yVqL.jpg
</image>
<meta rel="type">video</meta>
</track>
</tracklist>
</playlist>

 
위 예문을  메모장에 복사해 붙여놓고
타이틀에 제목적고,로케이션에 기존 구글에올린 파일 주소 넣으시면 됩니다.애노테이션에 설명 적으면 되고,이미지는
Imgur에 사진올려 링크주소 따서 넣었습니다
내용을 다 작성하신후 메모장 파일에서 다른이름으로 저장 선택,제목적고 확장자는 반드시 xml로,인코딩은 UTF-8로 지정한후
티스토리 스킨에 올리고 링크주소따서 위 태그 playlistfile=여기에 붙여 넣으시면 됩니다~~


아래는 위 결과물입니다~







 

저작자표시 비영리 변경금지

'플짤관련' 카테고리의 다른 글

JwPlayer로 자막 링크 시키기  (3) 2014.01.16
Jwplayer Image Rotator로 포토갤러리 만들기  (0) 2014.01.11
Jwplayer로 mp3 플레이어 만들기  (0) 2013.06.23
HTML 칼라 코드 차트 ( 색상코드표 )  (0) 2013.05.15
플짤만들기 강좌  (10) 2013.03.10
  

Jwplayer로 mp3 플레이어 만들기

Posted by 또돌이 플짤관련 : 2013. 6. 23. 21:21
어제 카라1집mp3 플레이어를 올렸는데 만드는법을 문의하신 분이 계셔서 아예 강좌로 만들었습니다~~ㅎㅎ
 mp3 Player 만들기의 순서는

첫째:mp3파일을 구글드라이브에 올려 주소따기
둘째:xml과 config 짜기
세째:jw2.3플레이어를 드라이브에 올려 주소따기
네째:jw플레이어를 이용해 게시판에 올리기  순으로 진행합니다~

먼저 아래파일들을 다운 받으세요
jw2.3 player

config xml짜기

xml짜기

구글드라이브에 파일 올리기
아래 아키버드님의 블로그 보시고 따라하시면 됩니다

티스토리는 mp3파일을 올릴수 없어 구글드라이브를 이용합니다

올리고자 하는 mp3 파일을 확장자를 jpg로 바꿔 올립니다
ex) kara rock u.mp3  ->kara rock u.mp3.jpg  그냥 요렇게 .jpg만 붙여서 변경하면 됩니다
파일을 올리고 공유설정을 "웹에 공개"로 바꿔주시고 
키보드의 ctrl을 누른 상태에서 게시글을 클릭하면 새탭이 뜹니다
새탭의 주소창을 보면 아래와 같이 뜨는데
https://docs.google.com/file/d/0B-ktbWchFrY0WUhLMFdNbzd3RFk/edit

요주소에서 d/ 와 /edit 사이의  0B-ktbWchFrY0WUhLMFdNbzd3RFk 
를 https://www.googledrive.com/host/ 에 붙여 넣으면 주소가 됩니다

완성된 주소예
https://www.googledrive.com/host/0B-ktbWchFrY0WUhLMFdNbzd3RFk

이런식으로 올린 mp3파일의 주소를 다 따신후에
맨처음 다운받은 xml짜기 파일을 보면

<?xml version="1.0" encoding="UTF-8" ?>
<playlist version="1" xmlns="http://xspf.org/ns/0/">
 
<trackList>
<track>
<annotation>01.Rock U</annotation>
<location>https://www.googledrive.com/host/0B-ktbWchFrY0WUhLMFdNbzd3RFk</location>
</track>
<track>
<annotation>02.Baby Boy</annotation>
<location>https://www.googledrive.com/host/0B-ktbWchFrY0dTFXTzdTUDBncTQ</location>
</track>
<track>
<annotation>03.이게뭐야</annotation>
<location>https://www.googledrive.com/host/0B-ktbWchFrY0Z0JDaGdxNkZxWEE</location>
</track>
<track>
<annotation>04.Good Day</annotation>
<location>https://www.googledrive.com/host/0B-ktbWchFrY0dHRqWFY0SHhSOUU</location>
</track>
<track>
<annotation>05.Wait</annotation>
<location>https://www.googledrive.com/host/0B-ktbWchFrY0eFVrN1V6am8zSjQ</location>
</track>
</playlist>


<annotation>  </annotation> 사이에 곡명을 적어주고
<location> </location> 사이에 위에서 딴 mp3 파일의 주소를 적어주시면 됩니다

메모장의 파일에서 다른이름으로저장 클릭
파일이름 적당히 영어와 숫자로 적어주고 반드시 확장자는 .xml로 저장합니다
파일형식은 모든파일로,인코딩은 UTF-8로 지정합니다

이렇게 만든 xml 파일을 확장자를 jpg로 바꿔 구글 드라이브에 올리고 주소를 따둡니다

구글드라이브가 xml 이나 config등을 더이상 지원하지 않습니다
그래서 티스토리 스킨에 올려 주소를 따둡니다

다음은 배경화면으로 쓸 사진파일을 올리고 주소를 땁니다

그리고 처음에 다운받은 config xml파일을 열여보면


<mp3config>    
    <autostart>false</autostart>
    <shuffle>false</shuffle>    
    <repeat>all</repeat>  
    <volume>100</volume>  
    <showdisplay>true</showdisplay>
    <showplaylist>true</showplaylist>  
    <backcolor>0xffffff</backcolor>
    <frontcolor>0xffffff</frontcolor>
    <lightcolor>0xffffff</lightcolor> 
    <jpgfile>https://www.googledrive.com/host/0B-ktbWchFrY0X1QxdjFGZFFjOWM</jpgfile>      
</mp3config>

 요렇게 되어 있는데
<jpgfile> </jpgfile>사이에 배경사진 주소를 넣고 
xml짜기 파일의 경우처럼 저장하고 구글드라이브에 올려 주소를 땁니다. 
이것도 티스토리에 올립니다

마찬가지로 첨에 다운받은 jw2.3.swf파일을 jpg로 바꿔 드라이브에 올린후 주소를 땁니다

플레이어도 티스토리에 올립니다
플레이어와 xml파일 config파일은 반드시 같은 계정에 올려야합니다


이제 준비가 다 끝났습니다
아래 태그에 각각의 주소들을 넣고

<Embed src="jw2.3 플레이어 주소 넣는 곳"
autostart="false" invokeURLs="false" EnableContextMenu="false" allowscriptAccess="never" 
allowNetworking="internal" enableHtmlAccess="false" AllowHtmlPopupwindow="false"  
width="플레이어 가로 크기" height="플레이어 세로크기" 
type="application/x-shockwave-flash" 
flashvars="config=컨피그 파일 주소 넣는 곳
&file=xml 파일 주소 넣는 곳" 
wmode="transparent" />


완성된 태그 예

<Embed src="http://cfs.tistory.com/custom/blog/104/1044374/skin/images/23.swf?"
autostart="false" invokeURLs="false" EnableContextMenu="false" allowscriptAccess="never" 
allowNetworking="internal" enableHtmlAccess="false" AllowHtmlPopupwindow="false"  
width="480" height="480" 
type="application/x-shockwave-flash" 
flashvars="config=http://cfs.tistory.com/custom/blog/104/1044374/skin/images/1st%20mini%20config.xml?=1980644029
&file=http://cfs.tistory.com/custom/blog/104/1044374/skin/images/1st%20mini.xml?=556051572" 
wmode="transparent" />


완성된 태그를 복사해 카게 글쓰기에서 플래시동영상 아이콘을 클릭해서
붙여넣기 하시면 요렇게 결과물이 나옵니당~




 


저작자표시 비영리 변경금지

'플짤관련' 카테고리의 다른 글

JwPlayer로 자막 링크 시키기  (3) 2014.01.16
Jwplayer Image Rotator로 포토갤러리 만들기  (0) 2014.01.11
JW PLAYER 목록형 플레이어 만들기  (14) 2013.09.18
HTML 칼라 코드 차트 ( 색상코드표 )  (0) 2013.05.15
플짤만들기 강좌  (10) 2013.03.10
  

HTML 칼라 코드 차트 ( 색상코드표 )

Posted by 또돌이 플짤관련 : 2013. 5. 15. 00:19

 

HTML 칼라 코드 차트 ( 색상코드표 )

MAJOR HEXADECIMAL COLOR CODES

 COLOR CODE CHART

COLOR NAME CODE COLOR
Black #000000 Black
Gray0 #150517 Gray0
Gray18 #250517 Gray18
Gray21 #2B1B17 Gray21
Gray23 #302217 Gray23
Gray24 #302226 Gray24
Gray25 #342826 Gray25
Gray26 #34282C Gray26
Gray27 #382D2C Gray27
Gray28 #3b3131 Gray28
Gray29 #3E3535 Gray29
Gray30 #413839 Gray30
Gray31 #41383C Gray31
Gray32 #463E3F Gray32
Gray34 #4A4344 Gray34
Gray35 #4C4646 Gray35
Gray36 #4E4848 Gray36
Gray37 #504A4B Gray37
Gray38 #544E4F Gray38
Gray39 #565051 Gray39
Gray40 #595454 Gray40
Gray41 #5C5858 Gray41
Gray42 #5F5A59 Gray42
Gray43 #625D5D Gray43
Gray44 #646060 Gray44
Gray45 #666362 Gray45
Gray46 #696565 Gray46
Gray47 #6D6968 Gray47
Gray48 #6E6A6B Gray48
Gray49 #726E6D Gray49
Gray50 #747170 Gray50
Gray #736F6E Gray
Slate Gray4 #616D7E Slate Gray4
Slate Gray #657383 Slate Gray
Light Steel Blue4 #646D7E Light Steel Blue4
Light Slate Gray #6D7B8D Light Slate Gray
Cadet Blue4 #4C787E Cadet Blue4
Dark Slate Gray4 #4C7D7E Dark Slate Gray4
Thistle4 #806D7E Thistle4
Medium Slate Blue #5E5A80 Medium Slate Blue
Medium Purple4 #4E387E Medium Purple4
Midnight Blue #151B54 Midnight Blue
Dark Slate Blue #2B3856 Dark Slate Blue
Dark Slate Gray #25383C Dark Slate Gray
Dim Gray #463E41 Dim Gray
Cornflower Blue #151B8D Cornflower Blue
Royal Blue4 #15317E Royal Blue4
Slate Blue4 #342D7E Slate Blue4
Royal Blue #2B60DE Royal Blue
Royal Blue1 #306EFF Royal Blue1
Royal Blue2 #2B65EC Royal Blue2
Royal Blue3 #2554C7 Royal Blue3
Deep Sky Blue #3BB9FF Deep Sky Blue
Deep Sky Blue2 #38ACEC Deep Sky Blue2
Slate Blue #3574EC7 Slate Blue
Deep Sky Blue3 #3090C7 Deep Sky Blue3
Deep Sky Blue4 #25587E Deep Sky Blue4
Dodger Blue #1589FF Dodger Blue
Dodger Blue2 #157DEC Dodger Blue2
Dodger Blue3 #1569C7 Dodger Blue3
Dodger Blue4 #153E7E Dodger Blue4
Steel Blue4 #2B547E Steel Blue4
Steel Blue #4863A0 Steel Blue
Slate Blue2 #6960EC Slate Blue2
Violet #8D38C9 Violet
Medium Purple3 #7A5DC7 Medium Purple3
Medium Purple #8467D7 Medium Purple
Medium Purple2 #9172EC Medium Purple2
Medium Purple1 #9E7BFF Medium Purple1
Light Steel Blue #728FCE Light Steel Blue
Steel Blue3 #488AC7 Steel Blue3
Steel Blue2 #56A5EC Steel Blue2
Steel Blue1 #5CB3FF Steel Blue1
Sky Blue3 #659EC7 Sky Blue3
Sky Blue4 #41627E Sky Blue4
Slate Blue #737CA1 Slate Blue
Slate Blue #737CA1 Slate Blue
Slate Gray3 #98AFC7 Slate Gray3
Violet Red #F6358A Violet Red
Violet Red1 #F6358A Violet Red1
Violet Red2 #E4317F Violet Red2
Deep Pink #F52887 Deep Pink
Deep Pink2 #E4287C Deep Pink2
Deep Pink3 #C12267 Deep Pink3
Deep Pink4 #7D053F Deep Pink4
Medium Violet Red #CA226B Medium Violet Red
Violet Red3 #C12869 Violet Red3
Firebrick #800517 Firebrick
Violet Red4 #7D0541 Violet Red4
Maroon4 #7D0552 Maroon4
Maroon #810541 Maroon
Maroon3 #C12283 Maroon3
Maroon2 #E3319D Maroon2
Maroon1 #F535AA Maroon1
Magenta #FF00FF Magenta
Magenta1 #F433FF Magenta1
Magenta2 #E238EC Magenta2
Magenta3 #C031C7 Magenta3
Medium Orchid #B048B5 Medium Orchid
Medium Orchid1 #D462FF Medium Orchid1
Medium Orchid2 #C45AEC Medium Orchid2
Medium Orchid3 #A74AC7 Medium Orchid3
Medium Orchid4 #6A287E Medium Orchid4
Purple #8E35EF Purple
Purple1 #893BFF Purple1
Purple2 #7F38EC Purple2
Purple3 #6C2DC7 Purple3
Purple4 #461B7E Purple4
Dark Orchid4 #571B7e Dark Orchid4
Dark Orchid #7D1B7E Dark Orchid
Dark Violet #842DCE Dark Violet
Dark Orchid3 #8B31C7 Dark Orchid3
Dark Orchid2 #A23BEC Dark Orchid2
Dark Orchid1 #B041FF Dark Orchid1
Plum4 #7E587E Plum4
Pale Violet Red #D16587 Pale Violet Red
Pale Violet Red1 #F778A1 Pale Violet Red1
Pale Violet Red2 #E56E94 Pale Violet Red2
Pale Violet Red3 #C25A7C Pale Violet Red3
Pale Violet Red4 #7E354D Pale Violet Red4
Plum #B93B8F Plum
Plum1 #F9B7FF Plum1
Plum2 #E6A9EC Plum2
Plum3 #C38EC7 Plum3
Thistle #D2B9D3 Thistle
Thistle3 #C6AEC7 Thistle3
Lavendar Blush2 #EBDDE2 Lavendar Blush2
Lavendar Blush3 #C8BBBE Lavendar Blush3
Thistle2 #E9CFEC Thistle2
Thistle1 #FCDFFF Thistle1
Lavendar #E3E4FA Lavendar
Lavendar Blush #FDEEF4 Lavendar Blush
Light Steel Blue1 #C6DEFF Light Steel Blue1
Light Blue #ADDFFF Light Blue
Light Blue1 #BDEDFF Light Blue1
Light Cyan #E0FFFF Light Cyan
Slate Gray1 #C2DFFF Slate Gray1
Slate Gray2 #B4CFEC Slate Gray2
Light Steel Blue2 #B7CEEC Light Steel Blue2
Turquoise1 #52F3FF Turquoise1
Cyan #00FFFF Cyan
Cyan1 #57FEFF Cyan1
Cyan2 #50EBEC Cyan2
Turquoise2 #4EE2EC Turquoise2
Medium Turquoise #48CCCD Medium Turquoise
Turquoise #43C6DB Turquoise
Dark Slate Gray1 #9AFEFF Dark Slate Gray1
Dark Slate Gray2 #8EEBEC Dark slate Gray2
Dark Slate Gray3 #78c7c7 Dark Slate Gray3
Cyan3 #46C7C7 Cyan3
Turquoise3 #43BFC7 Turquoise3
Cadet Blue3 #77BFC7 Cadet Blue3
Pale Turquoise3 #92C7C7 Pale Turquoise3
Light Blue2 #AFDCEC Light Blue2
Dark Turquoise #3B9C9C Dark Turquoise
Cyan4 #307D7E Cyan4
Light Sea Green #3EA99F Light Sea Green
Light Sky Blue #82CAFA Light Sky Blue
Light Sky Blue2 #A0CFEC Light Sky Blue2
Light Sky Blue3 #87AFC7 Light Sky Blue3
Sky Blue #82CAFF Sky Blue
Sky Blue2 #79BAEC Sky Blue2
Light Sky Blue4 #566D7E Light Sky Blue4
Sky Blue #6698FF Sky Blue
Light Slate Blue #736AFF Light Slate Blue
Light Cyan2 #CFECEC Light Cyan2
Light Cyan3 #AFC7C7 Light Cyan3
Light Cyan4 #717D7D Light Cyan4
Light Blue3 #95B9C7 Light Blue3
Light Blue4 #5E767E Light Blue4
Pale Turquoise4 #5E7D7E Pale Turquoise4
Dark Sea Green4 #617C58 Dark Sea Green4
Medium Aquamarine #348781 Medium Aquamarine
Medium Sea Green #306754 Medium Sea Green
Sea Green #4E8975 Sea Green
Dark Green #254117 Dark Green
Sea Green4 #387C44 Sea Green4
Forest Green #4E9258 Forest Green
Medium Forest Green #347235 Medium Forest Green
Spring Green4 #347C2C Spring Green4
Dark Olive Green4 #667C26 Dark Olive Green4
Chartreuse4 #437C17 Chartreuse4
Green4 #347C17 Green4
Medium Spring Green #348017 Medium Spring Green
Spring Green #4AA02C Spring Green
Lime Green #41A317 Lime Green
Spring Green #4AA02C Spring Green
Dark Sea Green #8BB381 Dark Sea Green
Dark Sea Green3 #99C68E Dark Sea Green3
Green3 #4CC417 Green3
Chartreuse3 #6CC417 Chartreuse3
Yellow Green #52D017 Yellow Green
Spring Green3 #4CC552 Spring Green3
Sea Green3 #54C571 Sea Green3
Spring Green2 #57E964 Spring Green2
Spring Green1 #5EFB6E Spring Green1
Sea Green2 #64E986 Sea Green2
Sea Green1 #6AFB92 Sea Green1
Dark Sea Green2 #B5EAAA Dark Sea Green2
Dark Sea Green1 #C3FDB8 Dark Sea Green1
Green #00FF00 Green
Lawn Green #87F717 Lawn Green
Green1 #5FFB17 Green1
Green2 #59E817 Green2
Chartreuse2 #7FE817 Chartreuse2
Chartreuse #8AFB17 Chartreuse
Green Yellow #B1FB17 Green Yellow
Dark Olive Green1 #CCFB5D Dark Olive Green1
Dark Olive Green2 #BCE954 Dark Olive Green2
Dark Olive Green3 #A0C544 Dark Olive Green3
Yellow #FFFF00 Yellow
Yellow1 #FFFC17 Yellow1
Khaki1 #FFF380 Khaki1
Khaki2 #EDE275 Khaki2
Goldenrod #EDDA74 Goldenrod
Gold2 #EAC117 Gold2
Gold1 #FDD017 Gold1
Goldenrod1 #FBB917 Goldenrod1
Goldenrod2 #E9AB17 Goldenrod2
Gold #D4A017 Gold
Gold3 #C7A317 Gold3
Goldenrod3 #C68E17 Goldenrod3
Dark Goldenrod #AF7817 Dark Goldenrod
Khaki #ADA96E Khaki
Khaki3 #C9BE62 Khaki3
Khaki4 #827839 Khaki4
Dark Goldenrod1 #FBB117 Dark Goldenrod1
Dark Goldenrod2 #E8A317 Dark Goldenrod2
Dark Goldenrod3 #C58917 Dark Goldenrod3
Sienna1 #F87431 Sienna1
Sienna2 #E66C2C Sienna2
Dark Orange #F88017 Dark Orange
Dark Orange1 #F87217 Dark Orange1
Dark Orange2 #E56717 Dark Orange2
Dark Orange3 #C35617 Dark Orange3
Sienna3 #C35817 Sienna3
Sienna #8A4117 Sienna
Sienna4 #7E3517 Sienna4
Indian Red4 #7E2217 Indian Red4
Dark Orange3 #7E3117 Dark Orange3
Salmon4 #7E3817 Salmon4
Dark Goldenrod4 #7F5217 Dark Goldenrod4
Gold4 #806517 Gold4
Goldenrod4 #805817 Goldenrod4
Light Salmon4 #7F462C Light Salmon4
Chocolate #C85A17 Chocolate
Coral3 #C34A2C Coral3
Coral2 #E55B3C Coral2
Coral #F76541 Coral
Dark Salmon #E18B6B Dark Salmon
Salmon1 #F88158 Pale Turquoise4
Salmon2 #E67451 Salmon2
Salmon3 #C36241 Salmon3
Light Salmon3 #C47451 Light Salmon3
Light Salmon2 #E78A61 Light Salmon2
Light Salmon #F9966B Light Salmon
Sandy Brown #EE9A4D Sandy Brown
Hot Pink #F660AB Hot Pink
Hot Pink1 #F665AB Hot Pink1
Hot Pink2 #E45E9D Hot Pink2
Hot Pink3 #C25283 Hot Pink3
Hot Pink4 #7D2252 Hot Pink4
Light Coral #E77471 Light Coral
Indian Red1 #F75D59 Indian Red1
Indian Red2 #E55451 Indian Red2
Indian Red3 #C24641 Indian Red3
Red #FF0000 Red
Red1 #F62217 Red1
Red2 #E41B17 Red2
Firebrick1 #F62817 Firebrick1
Firebrick2 #E42217 Firebrick2
Firebrick3 #C11B17 Firebrick3
Pink #FAAFBE Pink
Rosy Brown1 #FBBBB9 Rosy Brown1
Rosy Brown2 #E8ADAA Rosy Brown2
Pink2 #E7A1B0 Pink2
Light Pink #FAAFBA Light Pink
Light Pink1 #F9A7B0 Light Pink1
Light Pink2 #E799A3 Light Pink2
Pink3 #C48793 Pink3
Rosy Brown3 #C5908E Rosy Brown3
Rosy Brown #B38481 Rosy Brown
Light Pink3 #C48189 Light Pink3
Rosy Brown4 #7F5A58 Rosy Brown4
Light Pink4 #7F4E52 Light Pink4
Pink4 #7F525D Pink4
Lavendar Blush4 #817679 Lavendar Blush4
Light Goldenrod4 #817339 Light Goldenrod4
Lemon Chiffon4 #827B60 Lemon Chiffon4
Lemon Chiffon3 #C9C299 Lemon Chiffon3
Light Goldenrod3 #C8B560 Light Goldenrod3
Light Golden2 #ECD672 Light Golden2
Light Goldenrod #ECD872 Light Goldenrod
Light Goldenrod1 #FFE87C Light Goldenrod1
Lemon Chiffon2 #ECE5B6 Lemon Chiffon2
Lemon Chiffon #FFF8C6 Lemon Chiffon
Light Goldenrod Yellow #FAF8CC Light Goldenrod Yellow

저작자표시 비영리 변경금지

'플짤관련' 카테고리의 다른 글

JwPlayer로 자막 링크 시키기  (3) 2014.01.16
Jwplayer Image Rotator로 포토갤러리 만들기  (0) 2014.01.11
JW PLAYER 목록형 플레이어 만들기  (14) 2013.09.18
Jwplayer로 mp3 플레이어 만들기  (0) 2013.06.23
플짤만들기 강좌  (10) 2013.03.10
  

플짤만들기 강좌

Posted by 또돌이 플짤관련 : 2013. 3. 10. 00:40
이 강좌는 제목에 적은바와 같이 인코딩이나 플짤을 모르는 초보자를 대상으로 만들었습니다..
인코딩이나 파일분할,파일재생등은 여러 방법이 있으나 가장 간편하다고 제가 생각하는 방법을 적었습니다


카게에 플짤 올리기의 순서는

1.영상 인코딩하기(키라라 인코더 사용)
2.인코딩한 영상을 flv로 변환후 분할( to flv와 hjsplit 사용)
3 티스토리에 올리고 주소따기(xmldoumi 사용)
4.쓰르래미 플레이어를 이용해 카게에 플짤 올리기

이순으로 진행 됩니다

*필요 준비물

1.키라라인코더
미리내님이 작성하신 키라라 인코더 사용법 강좌
요기서 인코더 다운 받으시고 나중에 천천히 정독하셔서 사용법 익히세요  ^^*

2.쓰플 2.3
디시 플갤 쓰르래미님이 만드신 ss2.3 버젼을 다운 받습니다

3.xmldoumi
요기서 xmldoumi.rar 파일을 다운 받으세요

4.티스토리 계정
티스토리는 초대장이 있어야 가입이 가능하니 카게에 초대장 가지고 계신 분들께 요청하거나
티스토리에 가셔서 초대장 발급받기를 확인해 보세요. (참고로 저는 초대장 없습니다..불량 유저라서..ㅠ.ㅠ)

Chapter 1 인코딩

다음팟이나 메구이등 여러 인코더가 있으나 여기서는 키라라인코더를 사용합니다 
자 그럼 본격적으로 시작합니다
다운 받은 키라라인코더를 설치하면 이런 모습이 나옵니다

환경설정(P)을 클릭하시고 AviSynth(A)에 체크
다음은 우측 상단의 설정을 클릭하면 맨위에 나오는 인코딩설정을 클릭




빨간 사각형의 형태로 맞추시길..
출력형식하고 압축코덱은 반드시 저대로 하셔야 합니다 .
그리고 많이 사용하는 인코딩 방식은 CBR방식과 CRF방식이 있는데 여기서는 1-pass cbr 방식을 사용합니다. 자세한 내용은 미리내님 글 참고 하세요
너무 높은 비트레이트를 주면 웹상에서 버벅거리기 쉽고,특히 컴사양이 안좋은 경우 재생이 잘 안됩니다
그리고 트래픽부담이되기도 하고요..요부분은 디시 플래시갤러리에 들러서 참조하시고
비트레이트가 3000정도만 돼도 높은 수준입니다. 원본영상이 ts파일인 경우 대략 2000~3000정도 주시면 되고
crf 방식 인코딩의 경우에는 25~28정도면 적당합니다
물론 웹 게시용이 아닌 소장용의 경우에는 다르겠죠..

다음은 오디오 설정

압축코덱은 네로 AAC로 하시고
네로를 안까셨으면 FAAC로 하시면 됩니다

다음은 인코딩설정 밑에 있는 영상설정을 클릭


프레임 레이트는 30,또는 원본 프레임레이트에 체크하시고, 영상크기는 960*540선택, 요 크기가 웹에서 가장 보기 적당한 크기라고 주장함..ㅎㅎ
 화면비는 16:9 , 물론 원본 영상이 4:3 이면  4:3으로 바꿔줘야겠죠..
yadif의 디인터레이스에 체크, 나머지는 손대지 마시고 확인 누르고


폴더설정 눌러서 저장폴더 선택하고,추가 눌러 인코딩할 영상을 불러와서 내용 확인한후 인코딩시작 버튼을 누르면 됩니당...~~참쉽죠~잉~
원본이 456mb 인데 예상용량이 78mb 정도 나오네요..처음 인코딩하신다면 파일크기가 너무 큰파일은 피하시고 500mb이내 파일로 테스트 하세요..


Chaper 2  flv 변환및 파일 분할

다운 받은 fla2.3파일의 압축을 풀면 위와 같은 파일들이 뜨는데
위에서 인코딩한 mp4파일을 to flv폴더로 끌어 넣어줍니다.
그리고 to flv.bat를 더블클릭하면 아래와 같이 도스창이 뜨면서 인코딩 없이 flv로 변환 시켜 줍니다



자 flv파일이 새로 생겼죠..이제 mp4파일은 쓸일이 없으니 지워버리거나 다른 폴더로 이동시키시고..
그냥 나둬도 상관은 없지만 거슬리니..ㅎㅎ

변환한 flv 파일을  hjsplit 2.4.exe 프로그램으로 10mb 씩으로 분할합니다


프로그램을 실행시킨후 split를 클릭
input file눌러 위의 flv파일을 불러오고 split file size를 위 그림처럼 바꿔주고 start 클릭하면 아래와 같이 파일이 8개로 분할된것을 확인할 수 있습니다

이젠 분할된 001부터 008까지의 8개의 파일을 티스토리 내 계정에 올리고 주소를 따야 합니다

파일크기가 10mb 미만인 파일은 분할할 필요가 당연히 없겠지요..
flv로 변환한 후 바로 티스토리에 올리면 됩니다.. 이후는 분할파일과 동일한 방법으로 진행합니다


Chapter 3  티스토리에 파일 올리고 주소따기


티스토리관리에 들어가서 글설정 클릭..글쓰기 환경에서"이전 에디터"에 체크 필수..
좌측상단의 글쓰기 눌러 글쓰기 화면으로 이동


순서대로 제목쓰고 파일첨부 클릭하면 다움 에디터가 뜹니다.. 파일찿기를 눌러 8개의 파일을 불러오면 업로드가 됩니다
업로드가 완료되면 에디터 아래에 있는 등록을 클릭합니다





1번파일부터 8번파일까지 전체를 선택한후 위 빨간 동그라미 부분을 클릭하면 파일목록이 제목밑에 뜹니다
우측상단의 HTML사각형에 체크하면 아래와 같이 변합니다




위처럼 처음부터 <br>앞까지 드래그해 선택합니다




여기에서 xmldoumi를 실행시킵니다
처음에 xml파일 저장할곳을 지정해주시고
둘째로 위그림처럼 아이디 사각형에 자신의 티스토리 아이디를 적고 엔터
그다음  쓰플-xml+hjsplit 로 지정
html지정부분을 마우스로 드래그해 xml자동생성기 빨간 사각형 부분에 끌어다 놓고
추출/XML출력을 누릅니다
그리고 티스토리 화면에서 저장하기를 누릅니다



그러면 아래와 같이 메모장에 XML파일이 생성 됩니다





메모장에서 파일 누르고 다른이름으로 저장 선택 한후 적당히 파일명을 적어줍니다
파일명은 영어로 가급적 짧게 적습니다..한글이나 다른 언어가 들어가면 티스토리에서 인식을 못할 수도 있습니다




아래 그림처럼 파일 업로드에서 추가 눌러 위에서 저장한 XML파일을 업로드한 후
등록된 파일에서 마우스 우클릭 해서 링크주소 복사 클릭



위에서 복사한 링크 주소를 메모장 열어 붙여넣기



요기 까지가 티스토리에서 파일 주소 따는 방법 이었습니다


Chapter 4 쓰플을 이용해 카게에 플짤 올리기

원래는 다운받은 fla 2.3 파일안에 있는 append_xml.swf 파일을 다움 메일이나 캘린더에 올려 주소를 따서 사용했으나
근래 메일과 캘린더가 다 막혔습니다..그래서 다른 방법으로 주소를 따서 쓰고 있는데 이건 말씀 못 드립니다..^^;
저도 카게의 능력자분이 따주신 플레이어 주소를 사용하고 있습니다..
암튼 플레이어 주소를 딴후 아래와 같이 embed 태그를 작성합니다


<embed src="플레이어 주소 넣는 곳"
 width="960" height="540" type="application/x-shockwave-flash" allowfullscreen="true" wmode="opaque" 
flashvars="xml=티스토리에 올려 주소딴 xml파일 주소 넣는곳 (위 메모장에 붙여넣은 주소를 복사해 이곳에 붙여넣습니다)
&amp;autoplay=true&amp;number=false&amp;loop=false&amp;split=false">

기본 형태는 위와 같습니다..위 태그는 가장 간략한 형태입니다
자세한 부분은 차차 공부하시고..ㅎㅎ

그런데 플레이어 주소가 없으면 말짱 꽝이죠..ㅎㅎ

<embed src="http://tiny.cc/hifuqw"
 width="960" height="540" type="application/x-shockwave-flash" allowfullscreen="true" wmode="opaque" 
flashvars="xml=http://cfs.tistory.com/custom/blog/104/1044374/skin/images/130220%20sy%20pure%20love%20test.xml?=2146622417
&amp;autoplay=true&amp;number=false&amp;loop=false&amp;split=false">


http://tiny.cc/hifuqw 대신에  http://goo.gl/HEJkR 이걸 쓰세요  tiny 축약주소는 익스에서 재생이 안돼서, 구글 축약주소로 대체합니다
 
위 플레이어 주소가 제가 쓰는 주소입니다..그냥 이걸 사용하셔도 됩니다
쓰르래미님이 만드신 그대로이고 제가 변형시킨 부분은 없습니다
width는 재생 영상 가로 폭이고 height는 세로 폭 입니다. 원하시는 크기로 적어주시면 됩니다
단 영상의 화면비율에 맞춰주어야 합니다 16:9 인경우 960*540,850*480,700*400등등이 있습니다
외항의 곱과 내항의 곱은 같다...ㅎㅎ 산수
위태그는 자동재생 되도록 되어 있는데 수동재생을 원하시면 autoplay=true 요부분에서 true를 false로 바꿔 주시면 됩니다


그리고 플짤을 보다보면 대기화면도 있고 자신만의 로고도 있는 플짤도 있는데
플라스틱라디오 라는 분이 쓰르래미 플레이어를 커스텀해 대기화면과 로고도 넣을 수 있게 만들었습니다

<embed src="http://tiny.cc/ylfuqw"
 width="960" height="540" type="application/x-shockwave-flash" bgcolor="#ffffff" allowfullscreen="true" wmode="direct"
 flashvars="xml=xml파일주소 넣는곳
&amp;autoplay=false&amp;loop=false&amp;number=false&amp;split=false&amp;ratio=false&amp;bar=true
&amp;capture=false&amp;displayfullscreen=false
&amp;displayinfo=false&amp;background=true&amp;logolocation=1   (로고 로케이션의 위치는 1=좌측상단,2=우측상단,3=좌측하단,4=우측하단 )
&amp;logourl=로고파일 주소 넣는곳
&amp;bgurl=대기화면 주소 넣는 곳
&amp;bgoverurl=마우스를 올렸을때 나타나는 대기화면 주소 넣는 곳">

http://goo.gl/bGi64  요기도 마찬가지로 구글축약주소를 쓰세요..
요것도 그냥 제 주소를 쓰시면 됩니다

로고파일은 png파일을 스킨에 업로드한후 링크주소 복사해서 붙여 넣으면 되고
대기화면은 jpg파일을 마찬가지 방법으로 주소를 따면 됩니다
단 주의 하실 점은 대기화면 크기는 영상 크기와 동일하게 맞춰주시는게 좋습니다
영상이 960*540 이면 사진 크기도 960*540 요렇게요..


자 여기까지 해서 모든 준비는 끝났습니다
이제 카라게시판에 올리는 일만 남았죠..
일단 위 엠베드 태그를 < 부터  >까지 복사하시고
글쓰기를 클릭하시면





요렇게 하시면 영상이 짠하고 나타날 겁니다
영상이 제대로 재생되는지 확인하고 제목이나  다른내용을 적어 넣은 후 write 버튼을 누르면 됩니다..


여기까지 따라하시느라 수고 많으셨습니다..
처음엔 복잡한듯 싶지만 두어번만 해보면 금방 익숙해질 겁니다.
나름 신경을 써 이글을 썼지만 처음이라 좀 어설픕니다..감안하시고
혹 하시다가 잘 안되는 부분이 있으면 댓글이나 쪽지 주시면 제가 아는 한도내에서 답변을 드리겠습니다
긴글 읽어주셔서 감사합니다...^^**

사족: yamb으로 영상을 분할하는 경우에는 이강좌대로 되지 않습니다.
이번 강좌는 xml을 이용하는 방법으로 썼지만,xml 없이 올리는 방법등 몇가지는
시간이 되면 나중에 따로 글을 올릴께요..^^**



저작자표시 비영리 변경금지

'플짤관련' 카테고리의 다른 글

JwPlayer로 자막 링크 시키기  (3) 2014.01.16
Jwplayer Image Rotator로 포토갤러리 만들기  (0) 2014.01.11
JW PLAYER 목록형 플레이어 만들기  (14) 2013.09.18
Jwplayer로 mp3 플레이어 만들기  (0) 2013.06.23
HTML 칼라 코드 차트 ( 색상코드표 )  (0) 2013.05.15
  
 «이전 1  다음»

티스토리툴바