프리타
티스토리 동영상(JWplayer) 플레이어 연동법 (17.09.02) 1#
카테고리 > 알짜배기/연재
|2017.09.02 13:34| 프리타 프리타 ( P R I T A A )

웹사이트를 운영하시는분들이라면, 해당 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화를 설명드린 코드에 맞게 적용한 사례 입니다.

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

"12개" 의 댓글이 달렸습니다.
  1. 2017.09.12 18:53 신고
    좋은 설명 감사합니다!!
    혹시 쓰르래미 플레이어라고 아시나요? 저는 하나의 긴 영상을 작게 나눠서 그 플레이어를 통해 짧은 영상을 연결 틈 없이
    봤는데요, 오랜만에 들어와보니 막힌 거 같아서요ㅜㅜ
    알려주신 jw플레이어로 넘어가보려고 하는데 그런 기능도 있나요?
  2. 2017.09.12 19:03 신고
    빠른 답변 감사합니다!!
    4개만 된다구요?? 이런.... 혹시 쓰플을 티톨에서 살릴 수는 없을까요??
    내일 글도 기다리겠습니다ㅎㅎ
  3. 2017.09.30 13:10 신고
    안녕하세요! 여쭤보고 싶은게 있어서 댓글 남깁니다^^! jwplayer 가입은 했는데 라이센스키 발급이 유료회원에 한정되게 바꼈나보더라구요ㅠㅠ 플레이어의 경우는 첨부파일로 올려주신 분들이 계셔서 다운을 받았는데, 라이센스키는 받지 못했습니다. 이 경우에도 jwplayer를 통해서 티스토리에 영상을 업로드할 수 있나요ㅠㅠ?
  4. 2017.10.25 03:02
    비밀댓글입니다
    • 2017.10.25 03:04
      비밀댓글입니다
    • 안녕하세요 관심가져주셔서 정말 감사합니다. ~ 폰트는
      네이버 바른 고딕체을 사용하고있고,
      플레이어가 없어진다는게 무슨뜻인지 이해를 못했어요 ㅠㅠ
    • 2017.10.27 04:27
      비밀댓글입니다
    • 흠... 이해했습니다 플레이 기능들이 안없어지는걸 말씀하시는데 ~~ 아마 힘들듯 보여요 jwplay 기능들 잠시 빌려오는 형태인데 jwplay 기능을 변형할수는 없기 때문이죠 ~~
    • 2017.10.27 16:08 신고
      그렇군요.. 알려주셔서 감사합니다 :)
  5. 2017.12.16 09:30 신고
    우선 감사드리구요 알려주신대로 해서 티스토리에서 영상이 구현됩니다
    자동플레이 옵션은 어찌 되는지요? 글구 티스토리뿐 아니구 다음카페같은곳에서 swf플레이어주소로 영상구현은 어찌 해야 하는지요 아래적시한 태그는 몇년전 jw하위버전에서 쓰던 태그인데요 이제 새로 7.6버전 업로드해서 얻은 주소만 바꿔 넣고 실행해보니 이제 안먹히는가봅니다
    <embed name="player1" id="player1" src="https://tistory3.daumcdn.net/tistory/458383/skin/images/jwplayer.flash.swf" type="application/x-shockwave-flash" style="width: 700px; height: 395px;" wmode="transparent" allownetworking="internal" allowscriptaccess="never" autostart="false" invokeurls="false" flashvars="file="동영상주소"&repeat=always&controlbar=over&autostart=true&lightcolor=ff0000&backcolor=0x000000&frontcolor=ffffff" allowfullscreen="true">