본문 바로가기

알짜배기/연재

티스토리 동영상(JWplayer) 플레이어 연동법 (17.09.02) 1#

웹사이트를 운영하시는분들이라면, 해당 JWplayer가 

얼마나 편하고 좋은지 아실거라 생각됩니다.

물론 성능은 그닥이라지만, 

그래도 사이트에 적용하기엔 정말 간편합니다. 

오늘은 티스토리에 jwplayer에 

적용법에 대해서 설명토록 하겠습니다.


STEP 1. 티스토리 관리자 모드

HTML/CSS 편집

파일업로드


먼저 하단에 파일을 다운받아 

압축을 푼후 파일을 자신에 티스토리에 업로드 해주세요.

jwplayer.zip




STEP 2. 티스토리 관리자 모드

HTML/CSS 편집

HTML


그다음에 HTML 코드로 넘어가

<head>

</head>

사이에 해당 코드를 입력해주세요.


<!-- JW플레이어 -->

<script src="./images/jwplayer.js"></script> 

<script type="text/javascript" src="./images/jwplayer.flash.swf"></script> 

<script type="text/javascript">jwplayer.key="Jv9lLpZSrCF9D8lp6lY29FO/r1+6mvqLHkqVnA==";</script>

<!-- JW플레이어 끝-->


jw플레이어의 모든 셋팅이 끝났습니다.


STEP 3. 티스토리 글 작성하기


이제 티스토리 글을 작성토록 하겠습니다.

글작성시 HTML코드 변환 작성토록 하겠습니다.


아래 코드를 입력해 줍니다.


<div id="id">로딩중..</div> 

<script type="text/javascript"> jwplayer("id").setup({ file: "동영상 주소", width: "100%", aspectratio: "16:9" }); </script>


참 쉽쥬 ~!?



하단에 테스트 완료 영상 감상하겠습니다.



Loading the player...


위 영상은 '은혼'애니메이션 1화를 설명드린 코드에 맞게 적용한 사례 입니다.

궁금하신 사항 있으시면 주저 없이 댓글 달아주세요. 감사합니다.