[이윰] SELF-HOSTED로 Jwplayer7.x 사용시 외부 링크(jwpcdn.com)에서 스킨 가져오는 문제
페이지 정보

짧은주소
-
https://yadolee.com/tip/399 주소복사
평점
본문
Jwplayer7.x 를 개인 서버 혹은 호스팅 서버 사용시 다운로드하여 이용할 수가 있는데 jwplayer.js 를 살펴보면 repo:"http://ssl.p.jwpcdn.com/player/v/" 가 정의되어있어 jwplayer 를 띄울 때마다 앞에 언급된 링크에서 스킨을 다운받게 된다.
결국 완벽한 "EMBEDDING SELF-HOSTED PLAYERS"가 아닌 셈이다.
구버전들과 달리 skin 까지 포함해서 SELF-HOSTED 할 수 있도록 허락하면서 왜 외부 링크에서 스킨을 다운받도록 했는지 못마땅하다.
스킨을 포함하지 않았다면 수긍이 갈텐데 말이다...
1. Jwplayer7.x 가 설치된 폴더 상위에 player 라는 폴더를 만들고 v 폴더를 만들고 Jwplayer 버전명(예를 들어 jwplayer7.3.4를 이용중이라면 7.3.4)으로 폴더를 만들고 그 안에 스킨들을 포함은 skins 폴더를 복사한다.
2. Jwplayer7.x가 설치된 폴더내 jwplayer.js 를 열어 repo:"http://ssl.p.jwpcdn.com/player/v/" 를 repo:"http://도메인/player/v/" 로 수정한다.
상기처럼 수정하게 되면 스킨 로딩 경로가 "http://도메인/player/v/버전/skins/스킨명"이 된다
반드시 http://도메인/player/v/버전/skins 폴더내에 스킨이 존재해야한다 그렇지 않으면 본문에 사용자 정의된 스킨이 적용되지 않는다
상기 방법으로 적용했을 때 IE11에서 JWplayer가 다음과 같은 오류를 보이며 로딩되지 않는다.
Jwplayer를 SELF-HOSTED 방식을 이용하기 위해 필요한 소스를 아래 소스를 참고해 적용하자.
상시 스크립트를 추가함으로 서버상의 jwplayer 스킨을 이용할 수 있게 된다
고로 Jwplayer 가 설치된 폴더/jwplayer.js의 repo:"http://ssl.p.jwpcdn.com/player/v/" 값을 repo:"../Jwplayer 가 설치된 폴더/" 으로 추가 수정하지 않아도 된다.
사실 이걸 알아본 이유는 이윰 테마 common.css 에 정의된 border-radius:0 !important; 이 값 때문에 jwplayer 스킨들에 모양이 제대로 반영되지 않기 때문이다.
결국 완벽한 "EMBEDDING SELF-HOSTED PLAYERS"가 아닌 셈이다.
구버전들과 달리 skin 까지 포함해서 SELF-HOSTED 할 수 있도록 허락하면서 왜 외부 링크에서 스킨을 다운받도록 했는지 못마땅하다.
스킨을 포함하지 않았다면 수긍이 갈텐데 말이다...
1. Jwplayer7.x 가 설치된 폴더 상위에 player 라는 폴더를 만들고 v 폴더를 만들고 Jwplayer 버전명(예를 들어 jwplayer7.3.4를 이용중이라면 7.3.4)으로 폴더를 만들고 그 안에 스킨들을 포함은 skins 폴더를 복사한다.
2. Jwplayer7.x가 설치된 폴더내 jwplayer.js 를 열어 repo:"http://ssl.p.jwpcdn.com/player/v/" 를 repo:"http://도메인/player/v/" 로 수정한다.
상기처럼 수정하게 되면 스킨 로딩 경로가 "http://도메인/player/v/버전/skins/스킨명"이 된다
반드시 http://도메인/player/v/버전/skins 폴더내에 스킨이 존재해야한다 그렇지 않으면 본문에 사용자 정의된 스킨이 적용되지 않는다
상기 방법으로 적용했을 때 IE11에서 JWplayer가 다음과 같은 오류를 보이며 로딩되지 않는다.
다음과 같이 적용해보자.Setup timeout error - setup took longer than 30 seconds to complete
Jwplayer를 SELF-HOSTED 방식을 이용하기 위해 필요한 소스를 아래 소스를 참고해 적용하자.
<script type="text/javascript" src="../Jwplayer 가 설치된 폴더/jwplayer.js"></script>
<script type="text/javascript">
// <![CDATA[
jwplayer.key = "Jwplay 라이센스 Key";
jwplayer.defaults = {"base": "../Jwplayer 가 설치된 폴더/"};
// ]]>
</script>
상기 스크립트 코드 중 중요한 것은 상기 예제에 Jwplayer가 설치된 경로가 상대경로든 절대경로든 상관없이 올바르게 입력되어야 한다. 올바르지 않다면 Jwplayer가 본문에서 로딩되지 않는 건 당연한 것이다.상시 스크립트를 추가함으로 서버상의 jwplayer 스킨을 이용할 수 있게 된다
고로 Jwplayer 가 설치된 폴더/jwplayer.js의 repo:"http://ssl.p.jwpcdn.com/player/v/" 값을 repo:"../Jwplayer 가 설치된 폴더/" 으로 추가 수정하지 않아도 된다.
사실 이걸 알아본 이유는 이윰 테마 common.css 에 정의된 border-radius:0 !important; 이 값 때문에 jwplayer 스킨들에 모양이 제대로 반영되지 않기 때문이다.
추천인

레벨 99
경험치 1,478,262
Progress Bar 77.32%
- 가입일 : 2015-03-04 03:24:54
- 서명 : KNOW YOUR LIMITS
BUT NEVER STOP TRYING TO EXCEED THEM !!
- 자기소개 : 루루의 자랑
루루아빠랍니다~~
-
[배경 화면] 프랑스의 에귀으 듀 샤흐도네(Aiguille du Chardonnet)산으로 스위스와 접경지에 위치해 있습니다. /*0) generatedType=2; if (generatedType==2) { dMap.style.cursor = "pointer"; dMap.onclick = function(e) {initGmapsLoader(e||event)}; var t = document.createTextNode("로딩하려면 클릭하세요"), d = document.createElement("div"); d.appendChild(t); d.style.cssText="background-color:#e5e5e5; filter:alpha(opacity=80); opacity:0.8; padding:1em; font-weight:bold; text-align:center; position:absolute; left:0; box-sizing:border-box; width:100%; max-width:500px; top:0"; dMap.appendChild(d); } function CreateGMapgmap202421141257() { var dMap = document.getElementById("gmap202421141257"); if (dMap) dMap = dMap.parentNode; else dMap = document.getElementById("wgmap202421141257"); if (!dMap) return; if (dMap.ckemap) { var map = dMap.ckemap.map, center = map.getCenter(); google.maps.event.trigger(map, "resize"); map.setCenter(center); return; } dMap.onclick = null; var mapOptions = { zoom: 11, center: [45.96864,7.00157], mapType: 0, zoomControl: "Default", mapsControl: "Default", heading: 0, tilt: 0, overviewMapControlOptions: {opened:true}, pathType: "Default", googleBar: false }; var myMap = new CKEMap(dMap, mapOptions); dMap.ckemap=myMap; } if (!window.gmapsLoaders) window.gmapsLoaders = []; window.gmapsLoaders.push(CreateGMapgmap202421141257); if (generatedType==3) window.gmapsAutoload=true; window.gmapsKey="AIzaSyApiu_e4Br_dRpB-RNC3XgioygMilKhadA"; /*]]>*/ /* CK googlemapsEnd v3.6 */2024-03-05
-
[공지사항] 특별한 버그가 발견되지 않으면 공개하도록 하겠습니다.2024-01-23
-
[공지사항] 한가지를 빼먹었습니다 사운드클라우드도 썸네일을 생성합니다 사운드클라우드는 meta tag > og:image > content의 url를 통해 이미지를 추출2023-05-05
-
[공지사항] 제법 추가해야 할 소스가 많습니다 또한 외부 프로그램(php exec 함수 이용)도 필요해요 ffmpeg, youtube-dl, twitter-media-downloader 간략하게 설명을 드려 볼게요 twitter-media-downloader은 트위터 트윗 이미지를 추출하는 용도 youtube-dl은 트위터 트윗 이미지 및 동영상 url, 페이스북 watch 동영상 url를 추출하는 용도 ffmpeg는 페이스북 watch의 동영상 url를 이용해 포스터 이미지를 추출하는 용도 인스타그램은 meta tag > og:image > content의 url를 통해 이미지를 추출 그 이미지를 게시판 설정 크기로 썸네일화하기2023-05-04
-
[공지사항] 네 맞습니다. Tagify 기능이 훌륭해 변경해 놓았습니다. 한번 적용해 보세요.2022-12-25
-
[영어 문법] 7년 전 게시되었을 때에는 재생에 문제가 없었던 것으로 기억하고 있었으나 현재에는 재생 목록 파라미터가 변경된 걸로 확인했습니다. 수정완료하였으며 3000점의 경험치를 제공해 드렸습니다. 오류 제보 감사드립니다.2022-12-04
-
[공지사항] 공지와 연관되지 않는 댓글은 자제 부탁드립니다.2022-12-03
-
[공지사항] SortableJS를 이용했습니다. https://inpa.tistory.com/entry/%EB%93%9C%EB%9E%98%EA%B7%B8-%EC%95%A4-%EB%93%9C%EB%A1%AD-Drag-Drop-%EA%B8%B0%EB%8A%A5 {코드} https://github.com/SortableJS/Sortable {코드}위 두 링크를 참조해 보세요.2022-11-27
댓글1
루루아빠님의 댓글
축하합니다. 지뢰폭탄 제거로 115경험치를 획득하였습니다.