본문 바로가기

알짜배기/연재

티스토리 동영상(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화를 설명드린 코드에 맞게 적용한 사례 입니다.

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

  • 좋은 설명 감사합니다!!
    혹시 쓰르래미 플레이어라고 아시나요? 저는 하나의 긴 영상을 작게 나눠서 그 플레이어를 통해 짧은 영상을 연결 틈 없이
    봤는데요, 오랜만에 들어와보니 막힌 거 같아서요ㅜㅜ
    알려주신 jw플레이어로 넘어가보려고 하는데 그런 기능도 있나요?

  • 빠른 답변 감사합니다!!
    4개만 된다구요?? 이런.... 혹시 쓰플을 티톨에서 살릴 수는 없을까요??
    내일 글도 기다리겠습니다ㅎㅎ

  • 흑흑 2017.09.30 13:10 신고 댓글주소 수정/삭제 댓글쓰기

    안녕하세요! 여쭤보고 싶은게 있어서 댓글 남깁니다^^! jwplayer 가입은 했는데 라이센스키 발급이 유료회원에 한정되게 바꼈나보더라구요ㅠㅠ 플레이어의 경우는 첨부파일로 올려주신 분들이 계셔서 다운을 받았는데, 라이센스키는 받지 못했습니다. 이 경우에도 jwplayer를 통해서 티스토리에 영상을 업로드할 수 있나요ㅠㅠ?

  • 비밀댓글입니다

  • 우선 감사드리구요 알려주신대로 해서 티스토리에서 영상이 구현됩니다
    자동플레이 옵션은 어찌 되는지요? 글구 티스토리뿐 아니구 다음카페같은곳에서 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">

  • 감사합니다 스크랩해갈게요!!