카테고리 없음

jwplayer와 구글 드라이브를 이용하여 플래시 플레이어 만들기 (3)

일단개그하다 2014. 7. 21. 21:07

첫번째와 두번째를 잘 따라하고

 

http://htmledit.squarefree.com/

 

위 링크를 클릭한다




이러한 창이 뜨는데

 

파란색 공간에 html을 쓰면 바로바로 흰색 공간에 결과물이 나온다

 

jw플래이어 html기본 틀은

 

<embed src="플레이어주소" width="704" height="396" flashvars="file=동영상주소&type=video">

 

위와 같다

 

플레이어 주소는 두번째 포스트에서 티스토리에 올렸던 파일의 주소이고

 

동영상 주소는 첫번째 포스트에서 구글 드라이브에 올렸던 파일의 주소를 넣으면 된다

 

두가지의 주소를 알아보기 위한 방법은 간단하다



두번째 포스트에서 두 파일을 올렸던 페이지에서 그 파일에 오른쪽 클릭을 하고 속성을 누른다



http부터 .swf까지 복사 해서 기본 틀의 플레이어 주소부분에 넣는다

 

그리고 구글 드라이브로 가서



jpg로 바꾼 동영상 파일을 Ctrl을 누른상태로 클릭한다



그러면 새로운 창이 하나 뜨는데 그 창의 주소를 보자

 

보면 /d/부터 /edit사이의 문자열이 있는데 이 문자열을

 

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

 

위 주소 /host/뒤에 붙여 넣는다

 

그러면

 

https://www.googledrive.com/host/0B4E어쩌구zg 라는 주소가 동영상의 주소가 된다

 

그러면 기본틀의 동영상 주소 부분에 위 주소를 넣어준다

 

<embed src="http://cfs.tistory.com/custom/blog/150/1501992/skin/images/player.swf" width="704" height="396" flashvars="file=https://www.googledrive.com/host/0B4E어쩌구zg&type=video">

 

이와 같은 형식의 태그가 완성 되고 이걸

 

처음에 새로 열었던 Real-time HTML Editer의 파란 부분에 넣으면



흰 영역에 플레이어가 나타난다

 

재생 버튼을 누르면

 

지으니가 춤을 춘다

 

다음에는 jw플레이어 스킨과 로고에 대해서 포스트 할련다

 

**********추가 사항**********

 

깜빡 잊고  썸네일을 안했는데

 

썸네일은 태그 주소에 뒷부분에 

 

<embed src="http://cfs.tistory.com/custom/blog/150/1501992/skin/images/player.swf" width="704" height="396" flashvars="file=https://www.googledrive.com/host/0B4E어쩌구zg&type=video&image=이미지주소">

 

굵은 글씨체부분을 추가해준다 이미지 주소도 동영상 주소와 마찬가지로 Ctrl+클릭 으로 새창을 열어 주소를 확인한뒤

 

[https://www.googledrive.com/host/구글드라이브주소]를 만들어서

 

이미지주소 부분에 추가 해주면 된다