jplayer 관련 문의 드립니다.(컨트롤 재생메뉴 고정 관련이요) 채택완료
hwiqt
4년 전
조회 3,438
두리삼촌 님 플레이어 이용하려고 하는데요
https://sir.kr/g5_skin/38811?sfl=wr_subject%7C%7Cwr_content&stx=%EC%9C%A0%ED%8A%9C%EB%B8%8C&page=2
플레이어에서 재생 메뉴가 사라지는걸 고정하고 싶은데 소스 어디서 수정할 수 있을지 모르겠습니다.ㅠㅠ받은 파일에서 플레이어 코드 부분 들여다 보는데 왕초보인지라 도움 요청 드립니다.
여기서 할 수 있는 건지도 모르겠네요..^^;;;
꼭 이용하고 싶은데 부탁드릴께요..
</p>
<p><!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></p>
<p><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></p>
<p><!-- a태그 밑줄삭제 css -->
<style type="text/css">
a { text-decoration:none }
</style>
<!-- a태그 밑줄삭제 css 끝 --></p>
<p><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;</p>
<p> </p>
<p> if(evt.target) evt.target.blur();
else if(evt.srcElement) evt.srcElement.blur();
}
</script></p>
<p></head></p>
<p><body OnLoad="allblur();"></p>
<p><!-- 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:<a href="https://get.adobe.com/flashplayer/"" target="_blank" rel="noopener noreferrer">https://get.adobe.com/flashplayer/"</a> target="_blank">Flash plugin</a>.
</div>
</div>
</div>
<!-- END JPLAYER VIDEO HTML WRAPPER --></p>
<p><script >
$(function () {
/* Load jPlayer */
new jPlayerPlaylist({
jPlayer: "#jp_video",
cssSelectorAncestor: "#jp_video_container" },
[
{
type: "youtube", /* <- Remember to add this */
title: "판듀. 경호사모 엘레인. 비정",//제목
m4v: "<a href="https://www.youtube.com/watch?v=l9rCND89LOc" " target="_blank" rel="noopener noreferrer">https://www.youtube.com/watch?v=l9rCND89LOc" </a>
}, //유튜브URL
{
type: "youtube", /* <- Remember to add this */
title: "판듀 E29. 나를 슬프게 하는 사람들",//제목
m4v: "<a href="https://www.youtube.com/watch?v=UYim8qTNFQk" " target="_blank" rel="noopener noreferrer">https://www.youtube.com/watch?v=UYim8qTNFQk" </a>
},//유튜브URL
{
type: "youtube", /* <- Remember to add this */
title: "판듀 E30. 경호사모 엘레인. 금지된 사랑",//제목
m4v: "<a href="https://www.youtube.com/watch?v=Mc2XnrvB9DE" " target="_blank" rel="noopener noreferrer">https://www.youtube.com/watch?v=Mc2XnrvB9DE" </a>
},//유튜브URL
{
type: "youtube", /* <- Remember to add this */
title: "판듀 E28. 전인권 정현구. 사랑한 후에",//제목
m4v: "<a href="https://www.youtube.com/watch?v=QoOhCNPJZVA" " target="_blank" rel="noopener noreferrer">https://www.youtube.com/watch?v=QoOhCNPJZVA" </a>
},//유튜브URL
{
type: "youtube", /* <- Remember to add this */
title: "보보. 이별에게",//제목
m4v: "<a href="https://www.youtube.com/watch?v=F2aZ40t9wW8" " target="_blank" rel="noopener noreferrer">https://www.youtube.com/watch?v=F2aZ40t9wW8" </a>
},//유튜브URL
{
type: "youtube", /* <- Remember to add this */
title: "보보. 이별과의 이별",//제목
m4v: "<a href="https://www.youtube.com/watch?v=ifd2JNL_HQE" " target="_blank" rel="noopener noreferrer">https://www.youtube.com/watch?v=ifd2JNL_HQE" </a>
},//유튜브URL
{
type: "youtube", /* <- Remember to add this */
title: "보보. 늦은후회",//제목
m4v: "<a href="https://www.youtube.com/watch?v=EqxFBfMykok" " target="_blank" rel="noopener noreferrer">https://www.youtube.com/watch?v=EqxFBfMykok" </a>
},//유튜브URL
{
type: "youtube", /* <- Remember to add this */
title: "터보. 어느 째즈바 2015",//제목
m4v: "<a href="https://www.youtube.com/watch?v=TCU5Qv9nOCs" " target="_blank" rel="noopener noreferrer">https://www.youtube.com/watch?v=TCU5Qv9nOCs" </a>
},//유튜브URL
{
type: "youtube", /* <- Remember to add this */
title: "여자친구. 너 그리고 나",//제목
m4v: "<a href="https://www.youtube.com/watch?v=Kt_jnVNN-sg" " target="_blank" rel="noopener noreferrer">https://www.youtube.com/watch?v=Kt_jnVNN-sg" </a>
},//유튜브URL
{
type: "youtube", /* <- Remember to add this */
title: "여자친구. 오늘부터 우리는",//제목
m4v: "<a href="https://www.youtube.com/watch?v=31VhlXnWYts" " target="_blank" rel="noopener noreferrer">https://www.youtube.com/watch?v=31VhlXnWYts" </a>
},//유튜브URL
{
type: "youtube", /* <- Remember to add this */
title: "라붐. 상상더하기",//제목
m4v: "<a href="https://www.youtube.com/watch?v=SXTcZJM_qbo" " target="_blank" rel="noopener noreferrer">https://www.youtube.com/watch?v=SXTcZJM_qbo" </a>
},//유튜브URL
{
type: "youtube", /* <- Remember to add this */
title: "라붐. 아로아로",//제목
m4v: "<a href="https://www.youtube.com/watch?v=TirMMXst8-M" " target="_blank" rel="noopener noreferrer">https://www.youtube.com/watch?v=TirMMXst8-M" </a>
},//유튜브URL
{
type: "youtube", /* <- Remember to add this */
title: "버블디아. 하늘 끝에서 흘린 눈물",//제목
m4v: "<a href="https://www.youtube.com/watch?v=Eko3xn9k4vU" " target="_blank" rel="noopener noreferrer">https://www.youtube.com/watch?v=Eko3xn9k4vU" </a>
},//유튜브URL
{
type: "youtube", /* <- Remember to add this */
title: "버블디아. 진혼",//제목
m4v: "<a href="https://www.youtube.com/watch?v=NU4kZgIkhGU" " target="_blank" rel="noopener noreferrer">https://www.youtube.com/watch?v=NU4kZgIkhGU" </a>
},//유튜브URL
{
type: "youtube", /* <- Remember to add this */
title: "SG워너비 옥주현. 한 여름날의 꿈",//제목
m4v: "<a href="https://www.youtube.com/watch?v=R_zQpsEB8EM" " target="_blank" rel="noopener noreferrer">https://www.youtube.com/watch?v=R_zQpsEB8EM" </a>
},//유튜브URL
{
type: "youtube", /* <- Remember to add this */
title: "영턱스클럽. 정 위험한 이별",//제목
m4v: "<a href="https://www.youtube.com/watch?v=2BgqorB8L20" " target="_blank" rel="noopener noreferrer">https://www.youtube.com/watch?v=2BgqorB8L20" </a>
},//유튜브URL
{
type: "youtube", /* <- Remember to add this */
title: "로코베리. Always",//제목
m4v: "<a href="https://www.youtube.com/watch?v=l21rBE6YRks" " target="_blank" rel="noopener noreferrer">https://www.youtube.com/watch?v=l21rBE6YRks" </a>
},//유튜브URL
{
type: "youtube", /* <- Remember to add this */
title: "로코베리. 수면제",//제목
m4v: "<a href="https://www.youtube.com/watch?v=ulDipSZf4i0" " target="_blank" rel="noopener noreferrer">https://www.youtube.com/watch?v=ulDipSZf4i0" </a>
},//유튜브URL
{
type: "youtube", /* <- Remember to add this */
title: "이선희. 인연",//제목
m4v: "<a href="https://www.youtube.com/watch?v=Jy24xiG56YI"" target="_blank" rel="noopener noreferrer">https://www.youtube.com/watch?v=Jy24xiG56YI"</a>
},
{
type: "youtube", /* <- Remember to add this */
title: "JS. 종로에서",//제목
m4v: "<a href="https://www.youtube.com/watch?v=uLVH67cQuu0" " target="_blank" rel="noopener noreferrer">https://www.youtube.com/watch?v=uLVH67cQuu0" </a>
} //유튜브URL
],</p>
<p> {
playlistOptions: {
autoPlay: true },
supplied: "webmv, ogv, m4v, oga, mp3",
size: {
width: "100%",
height: "210px",
cssClass: "jp-video-360p"
},
smoothPlayBar: true,
keyEnabled: false });
</p>
<p> /* Youtube Integration Setup */
var setupYoutube = function (whereDivTo, width, height) {
$("<div>").attr("id", "ytplayer").appendTo(whereDivTo);</p>
<p> 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" },</p>
<p> events: {
"onReady": function () {
$(document).trigger("ready.Youtube");
},
"onStateChange": "youtubeStateChange" } });</p>
<p>
};</p>
<p> $.getScript("<a href="https://www.youtube.com/player_api");" target="_blank" rel="noopener noreferrer">https://www.youtube.com/player_api");</a>
},
loadYoutubeListeners = function (player, jplayer, id) {
var container = $(player.options.cssSelector.gui, player.options.cssSelectorAncestor);</p>
<p> 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;</p>
<p> case YT.PlayerState.ENDED:
$(jplayer).trigger($.jPlayer.event.ended);
break;</p>
<p> 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");}</p>
<p>
};</p>
<p> youtubeApi.loadVideoById(id);
};</p>
<p> $(document).on($.jPlayer.event.setmedia, function (jpEvent) {
var player = jpEvent.jPlayer,
url = player.status.src;</p>
<p> 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();</p>
<p> return;
}</p>
<p> var youtubeId = url.match(/(?:https?:\/{2})?(?:w{3}\.)?youtu(?:be)?\.(?:com|be)(?:\/watch\?v=|\/)([^\s&]+)/)[1];</p>
<p> if (window['youtubeApi'])
loadYoutubeListeners(player, jpEvent.target, youtubeId);else
{
setupYoutube(jpEvent.target, player.status.width, player.status.height);</p>
<p> $(document).on("ready.Youtube", function () {
loadYoutubeListeners(player, jpEvent.target, youtubeId);
});
}
});
});
//# sourceURL=pen.js
</script></p>
<p></body>
</html></p>
<p> </p>
<p>
댓글을 작성하려면 로그인이 필요합니다.
답변 2개
채택된 답변
+20 포인트
4년 전
<div class="jp-interface"> 부분을 컨트롤 하는 곳이 아래일 것 같습니다. 안보이게 하는 곳이 slidedown
</p>
<pre>
<code> 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");}</code></pre>
<p>
로그인 후 평가할 수 있습니다
답변에 대한 댓글 1개
h
hwiqt
4년 전
댓글 감사합니다..ㅠㅠ
댓글을 작성하려면 로그인이 필요합니다.
답변을 작성하려면 로그인이 필요합니다.
로그인