jplayer 관련 문의 드립니다.(컨트롤 재생메뉴 고정 관련이요)
본문
두리삼촌 님 플레이어 이용하려고 하는데요
https://sir.kr/g5_skin/38811?sfl=wr_subject%7C%7Cwr_content&stx=%EC%9C%A0%ED%8A%9C%EB%B8%8C&page=2
플레이어에서 재생 메뉴가 사라지는걸 고정하고 싶은데 소스 어디서 수정할 수 있을지 모르겠습니다.ㅠㅠ받은 파일에서 플레이어 코드 부분 들여다 보는데 왕초보인지라 도움 요청 드립니다.
여기서 할 수 있는 건지도 모르겠네요..^^;;;
꼭 이용하고 싶은데 부탁드릴께요..
<!DOCTYPE html>
<head>
<title>:+: Youtube Player :+:</title>
<style class="cp-pen-styles"></style>
<meta http-equiv="content-type" content="text/html; charset=euc-kr">
<link href="../../dist/skin/pink.flag/css/jplayer.pink.flag.css" rel="stylesheet" type="text/css" />
<script type="text/javascript" src="../../lib/jquery.min.js"></script>
<script type="text/javascript" src="../../dist/jplayer/jquery.jplayer.min.js"></script>
<script type="text/javascript" src="../../dist/add-on/jplayer.playlist.min.js"></script>
</head>
<style type="TEXT/CSS">
BODY
{scrollbar-face-color: #ffffff;
scrollbar-shadow-color: #ffffff;
scrollbar-highlight-color: #ffffff;
scrollbar-3dlight-color: #ffffff;
scrollbar-darkshadow-color:#ffffff;
scrollbar-track-color: #ffffff;
scrollbar-arrow-color: #000000;
}
</style>
<!-- a태그 밑줄삭제 css -->
<style type="text/css">
a { text-decoration:none }
</style>
<!-- a태그 밑줄삭제 css 끝 -->
<script>
function allblur() {
for (i = 0; i < document.links.length; i++) {
var obj = document.links[i];
if(obj.addEventListener) obj.addEventListener("focus", oneblur, false);
else if(obj.attachEvent) obj.attachEvent("onfocus", oneblur);
}
}
function oneblur(e) {
var evt = e ? e : window.event;
if(evt.target) evt.target.blur();
else if(evt.srcElement) evt.srcElement.blur();
}
</script>
</head>
<body OnLoad="allblur();">
<!-- DEFAULT JPLAYER VIDEO HTML WRAPPER -->
<div id="jp_video_container" class="jp-video jp-video-270p" role="application" aria-label="media player">
<div class="jp-type-playlist">
<div id="jp_video" class="jp-jplayer"></div>
<div class="jp-gui">
<div class="jp-video-play">
<button class="jp-video-play-icon" role="button" tabindex="0">play</button>
</div>
<div class="jp-interface">
<div class="jp-progress">
<div class="jp-seek-bar">
<div class="jp-play-bar"></div>
</div>
</div>
<div class="jp-current-time" role="timer" aria-label="time"> </div>
<div class="jp-duration" role="timer" aria-label="duration"> </div>
<div class="jp-controls-holder">
<div class="jp-controls">
<button class="jp-previous" role="button" tabindex="0">previous</button>
<button class="jp-play" role="button" tabindex="0">play</button>
<button class="jp-next" role="button" tabindex="0">next</button>
<button class="jp-stop" role="button" tabindex="0">stop</button>
</div>
<div class="jp-volume-controls">
<button class="jp-mute" role="button" tabindex="0">mute</button>
<button class="jp-volume-max" role="button" tabindex="0">max volume</button>
<div class="jp-volume-bar">
<div class="jp-volume-bar-value"></div>
</div>
</div>
<div class="jp-toggles">
<button class="jp-repeat" role="button" tabindex="0">repeat</button>
<button class="jp-shuffle" role="button" tabindex="0">shuffle</button>
<button class="jp-full-screen" role="button" tabindex="0">full screen</button>
</div>
</div>
<div class="jp-details">
<div class="jp-title" aria-label="title"> </div>
</div>
</div>
</div>
<div class="jp-playlist">
<ul>
<!-- The method Playlist.displayPlaylist() uses this unordered list -->
<li> </li>
</ul>
</div>
<div class="jp-no-solution">
<span>Update Required</span>
To play the media you will need to either update your browser to a recent version or update your <a href="https:https://get.adobe.com/flashplayer/" target="_blank">Flash plugin</a>.
</div>
</div>
</div>
<!-- END JPLAYER VIDEO HTML WRAPPER -->
<script >
$(function () {
/* Load jPlayer */
new jPlayerPlaylist({
jPlayer: "#jp_video",
cssSelectorAncestor: "#jp_video_container" },
[
{
type: "youtube", /* <- Remember to add this */
title: "판듀. 경호사모 엘레인. 비정",//제목
m4v: "https://www.youtube.com/watch?v=l9rCND89LOc"
}, //유튜브URL
{
type: "youtube", /* <- Remember to add this */
title: "판듀 E29. 나를 슬프게 하는 사람들",//제목
m4v: "https://www.youtube.com/watch?v=UYim8qTNFQk"
},//유튜브URL
{
type: "youtube", /* <- Remember to add this */
title: "판듀 E30. 경호사모 엘레인. 금지된 사랑",//제목
m4v: "https://www.youtube.com/watch?v=Mc2XnrvB9DE"
},//유튜브URL
{
type: "youtube", /* <- Remember to add this */
title: "판듀 E28. 전인권 정현구. 사랑한 후에",//제목
m4v: "https://www.youtube.com/watch?v=QoOhCNPJZVA"
},//유튜브URL
{
type: "youtube", /* <- Remember to add this */
title: "보보. 이별에게",//제목
m4v: "https://www.youtube.com/watch?v=F2aZ40t9wW8"
},//유튜브URL
{
type: "youtube", /* <- Remember to add this */
title: "보보. 이별과의 이별",//제목
m4v: "https://www.youtube.com/watch?v=ifd2JNL_HQE"
},//유튜브URL
{
type: "youtube", /* <- Remember to add this */
title: "보보. 늦은후회",//제목
m4v: "https://www.youtube.com/watch?v=EqxFBfMykok"
},//유튜브URL
{
type: "youtube", /* <- Remember to add this */
title: "터보. 어느 째즈바 2015",//제목
m4v: "https://www.youtube.com/watch?v=TCU5Qv9nOCs"
},//유튜브URL
{
type: "youtube", /* <- Remember to add this */
title: "여자친구. 너 그리고 나",//제목
m4v: "https://www.youtube.com/watch?v=Kt_jnVNN-sg"
},//유튜브URL
{
type: "youtube", /* <- Remember to add this */
title: "여자친구. 오늘부터 우리는",//제목
m4v: "https://www.youtube.com/watch?v=31VhlXnWYts"
},//유튜브URL
{
type: "youtube", /* <- Remember to add this */
title: "라붐. 상상더하기",//제목
m4v: "https://www.youtube.com/watch?v=SXTcZJM_qbo"
},//유튜브URL
{
type: "youtube", /* <- Remember to add this */
title: "라붐. 아로아로",//제목
m4v: "https://www.youtube.com/watch?v=TirMMXst8-M"
},//유튜브URL
{
type: "youtube", /* <- Remember to add this */
title: "버블디아. 하늘 끝에서 흘린 눈물",//제목
m4v: "https://www.youtube.com/watch?v=Eko3xn9k4vU"
},//유튜브URL
{
type: "youtube", /* <- Remember to add this */
title: "버블디아. 진혼",//제목
m4v: "https://www.youtube.com/watch?v=NU4kZgIkhGU"
},//유튜브URL
{
type: "youtube", /* <- Remember to add this */
title: "SG워너비 옥주현. 한 여름날의 꿈",//제목
m4v: "https://www.youtube.com/watch?v=R_zQpsEB8EM"
},//유튜브URL
{
type: "youtube", /* <- Remember to add this */
title: "영턱스클럽. 정 위험한 이별",//제목
m4v: "https://www.youtube.com/watch?v=2BgqorB8L20"
},//유튜브URL
{
type: "youtube", /* <- Remember to add this */
title: "로코베리. Always",//제목
m4v: "https://www.youtube.com/watch?v=l21rBE6YRks"
},//유튜브URL
{
type: "youtube", /* <- Remember to add this */
title: "로코베리. 수면제",//제목
m4v: "https://www.youtube.com/watch?v=ulDipSZf4i0"
},//유튜브URL
{
type: "youtube", /* <- Remember to add this */
title: "이선희. 인연",//제목
m4v: "https://www.youtube.com/watch?v=Jy24xiG56YI"
},
{
type: "youtube", /* <- Remember to add this */
title: "JS. 종로에서",//제목
m4v: "https://www.youtube.com/watch?v=uLVH67cQuu0"
} //유튜브URL
],
{
playlistOptions: {
autoPlay: true },
supplied: "webmv, ogv, m4v, oga, mp3",
size: {
width: "100%",
height: "210px",
cssClass: "jp-video-360p"
},
smoothPlayBar: true,
keyEnabled: false });
/* Youtube Integration Setup */
var setupYoutube = function (whereDivTo, width, height) {
$("<div>").attr("id", "ytplayer").appendTo(whereDivTo);
onYouTubeIframeAPIReady = function () {
youtubeApi = new YT.Player("ytplayer", {
width: width,
height: height,
videoId: "l9rCND89LOc",
playerVars: {
"autoplay": 1,
"color": "white",
"modestbranding": 1,
"rel": 0,
"showinfo": 0,
"theme": "light" },
events: {
"onReady": function () {
$(document).trigger("ready.Youtube");
},
"onStateChange": "youtubeStateChange" } });
};
$.getScript("https://www.youtube.com/player_api");
},
loadYoutubeListeners = function (player, jplayer, id) {
var container = $(player.options.cssSelector.gui, player.options.cssSelectorAncestor);
youtubeStateChange = function (ytEvent) {
switch (ytEvent.data) {
case -1:
$(ytEvent.target.getIframe()).show();
$(jplayer).find('video').hide();
container.css({ 'opacity': 0, 'z-index': -1, 'position': 'relative' });
container.find('.jp-interface').slideUp("slow");
break;
case YT.PlayerState.ENDED:
$(jplayer).trigger($.jPlayer.event.ended);
break;
case YT.PlayerState.CUED:
$(jplayer).find('video').show();
$(ytEvent.target.getIframe()).hide();
container.css({ 'opacity': 1, 'z-index': 0 });
container.find('.jp-interface').slideDown("slow");}
};
youtubeApi.loadVideoById(id);
};
$(document).on($.jPlayer.event.setmedia, function (jpEvent) {
var player = jpEvent.jPlayer,
url = player.status.src;
if (!player.html.video.available) return;
if (typeof player.status.media.type === "undefined" || player.status.media.type != 'youtube') {
if (window['youtubeApi'])
if (youtubeApi.getPlayerState() != YT.PlayerState.CUED && youtubeApi.getPlayerState() != YT.PlayerState.ENDED)
return youtubeApi.stopVideo();
return;
}
var youtubeId = url.match(/(?:https?:\/{2})?(?:w{3}\.)?youtu(?:be)?\.(?:com|be)(?:\/watch\?v=|\/)([^\s&]+)/)[1];
if (window['youtubeApi'])
loadYoutubeListeners(player, jpEvent.target, youtubeId);else
{
setupYoutube(jpEvent.target, player.status.width, player.status.height);
$(document).on("ready.Youtube", function () {
loadYoutubeListeners(player, jpEvent.target, youtubeId);
});
}
});
});
//# sourceURL=pen.js
</script>
</body>
</html>
답변 2
<div class="jp-interface"> 부분을 컨트롤 하는 곳이 아래일 것 같습니다. 안보이게 하는 곳이 slidedown
switch (ytEvent.data) {
case -1:
$(ytEvent.target.getIframe()).show();
$(jplayer).find('video').hide();
container.css({ 'opacity': 0, 'z-index': -1, 'position': 'relative' });
container.find('.jp-interface').slideUp("slow");
break;
case YT.PlayerState.ENDED:
$(jplayer).trigger($.jPlayer.event.ended);
break;
case YT.PlayerState.CUED:
$(jplayer).find('video').show();
$(ytEvent.target.getIframe()).hide();
container.css({ 'opacity': 1, 'z-index': 0 });
container.find('.jp-interface').slideDown("slow");}
댓글 감사합니다..ㅠㅠ
몇년지나서 이제야 봤네요
한글깨짐현상은 저징하실때 인코딩을 utf-8 선택후 저장하시면 해결되실겁니다
유용하게 쓰세요 저도 제가만든건 아니고 제이플레이어의 기능을
사용하기 편리하게 아주살짝 고친것 뿐이에요
답변을 작성하시기 전에 로그인 해주세요.