https://agimusic.co.kr/board1
유투브 주소를 직접 입력한 코드 입니다 ----> 정상 작동 됩니다.
게시판 스킨 xedition 의 list.html 입니다
게시판에 생성한 확장변수 ID "url" 에 입력된 주소값을 불러 오고 싶은데 아무리 해도 저는 못하겠습니다
좀 도와 주세요
<!DOCTYPE html>
<html lang="ko">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta name="theme-color" content="#01779b">
<link rel="stylesheet" href="{getUrl('')}modules/board/skins/music/play.css" />
<title>AI 음악 플레이어</title>
<style>
#youtube-player {
position: fixed !important;
top: -9999px !important;
left: -9999px !important;
width: 0 !important;
height: 0 !important;
opacity: 0 !important;
visibility: hidden !important;
pointer-events: none !important;
}
.youtube-button {
display: inline-block;
margin-left: 5px;
color: #ff0000;
}
.debug-info {
font-size: 12px;
color: #666;
margin-bottom: 5px;
}
#main-equalizer {
display: flex;
align-items: flex-end;
justify-content: center;
height: 30px;
margin: 10px 0;
}
#main-equalizer .bar {
width: 3px;
height: 100%;
margin: 0 2px;
background-color: var(--accent-color);
transition: height 0.2s ease;
}
</style>
</head>
<body>
<div class="container">
<div class="track-list" id="track-list">
<table class="bd_lst bd_tb_lst bd_tb">
<tbody>
<tr class="track">
<td>
<div class="track-content">
<div class="track-info">
<div class="track-name">테스트 트랙</div>
<div class="track-details">
<span class="track-genre">테스트</span>
<span class="track-country">테스트</span>
<span class="track-author">테스트</span>
</div>
</div>
<div class="track-controls">
<!-- 디버깅용 -->
<div class="debug-info">
URL: https://www.youtube.com/watch?v=ekr2nIex040
</div>
<!-- YouTube 재생 버튼 -->
<button class="heart-button youtube-button"
data-youtube-url="https://www.youtube.com/watch?v=ekr2nIex040"
data-document-srl="test"
onclick="console.log('YouTube URL:', this.dataset.youtubeUrl)">
<span>♡</span>
</button>
</div>
</div>
</td>
</tr>
</tbody>
</table>
</div>
<div class="fixed-bottom">
<div class="equalizer" id="main-equalizer"></div>
<div class="progress-container">
<div class="progress-bar" id="progress-bar"></div>
</div>
<div class="controls">
<button id="repeat" class="button">⇋</button>
<button id="prev" class="button">◀◀</button>
<button id="play-pause" class="button play-pause">▶</button>
<button id="next" class="button">▶▶</button>
<a href="/upload" class="upload-button">
<svg viewBox="0 0 24 24" width="24" height="24">
<circle cx="12" cy="12" r="11" stroke="currentColor" stroke-width="2" fill="none"/>
<path d="M12 7v7M8 11l4-4 4 4M7 17h10" stroke="currentColor" stroke-width="2" stroke-linecap="round"/>
</svg>
</a>
</div>
</div>
</div>
<div id="youtube-player"></div>
<script>
// YouTube API 로드
var tag = document.createElement('script');
tag.src = "https://www.youtube.com/iframe_api";
var firstScriptTag = document.getElementsByTagName('script')[0];
firstScriptTag.parentNode.insertBefore(tag, firstScriptTag);
let audioQueue = [], currentlyPlayingAudio = null, equalizerInterval;
let isRepeat = false, isShuffle = false, isEqualizerRunning = false;
let youtubePlayer, isYoutubeReady = false;
function onYouTubeIframeAPIReady() {
console.log('YouTube API Ready');
youtubePlayer = new YT.Player('youtube-player', {
height: '0',
width: '0',
playerVars: {
'autoplay': 0,
'controls': 0,
'disablekb': 1,
'fs': 0,
'modestbranding': 1,
'playsinline': 1,
'rel': 0,
'showinfo': 0
},
events: {
'onReady': function() {
console.log('YouTube Player Ready');
isYoutubeReady = true;
},
'onStateChange': function(event) {
if (event.data === YT.PlayerState.ENDED && isRepeat) {
youtubePlayer.playVideo();
}
}
}
});
}
function createEqualizer() {
const equalizer = document.getElementById('main-equalizer');
if (!equalizer) return; // equalizer 요소가 없으면 함수 종료
for (let i = 0; i < 20; i++) {
const bar = document.createElement('div');
bar.className = 'bar';
equalizer.appendChild(bar);
}
}
function startEqualizer() {
if (!isEqualizerRunning) {
isEqualizerRunning = true;
const bars = document.querySelectorAll('#main-equalizer .bar');
equalizerInterval = setInterval(() => {
requestAnimationFrame(() => {
bars.forEach(bar => {
const height = Math.random() * 100;
bar.style.height = `${height}%`;
});
});
}, 200);
}
}
function stopEqualizer() {
clearInterval(equalizerInterval);
isEqualizerRunning = false;
document.querySelectorAll('#main-equalizer .bar').forEach(bar => {
bar.style.height = '0%';
});
}
function toggleHeart(button) {
console.log('Toggle Heart:', button);
button.classList.toggle('active');
button.querySelector('span').textContent = button.classList.contains('active') ? '♥' : '♡';
const youtubeUrl = button.getAttribute('data-youtube-url');
if (youtubeUrl) {
console.log('YouTube URL found:', youtubeUrl);
if (button.classList.contains('active')) {
// YouTube 재생 로직
if (isYoutubeReady) {
const videoId = extractVideoId(youtubeUrl);
console.log('Loading YouTube video:', videoId);
youtubePlayer.loadVideoById(videoId);
youtubePlayer.playVideo();
startEqualizer();
}
} else {
youtubePlayer.stopVideo();
stopEqualizer();
}
}
}
function extractVideoId(url) {
console.log('Extracting video ID from:', url);
const regExp = /^.*(youtu.be\/|v\/|u\/\w\/|embed\/|watch\?v=|\&v=)([^#\&\?]*).*/;
const match = url.match(regExp);
if (match && match[2].length === 11) {
console.log('Video ID found:', match[2]);
return match[2];
}
console.log('No video ID found');
return null;
}
window.addEventListener('load', function() {
console.log('Page loaded');
createEqualizer();
// YouTube 버튼 이벤트 리스너
document.querySelectorAll('.youtube-button').forEach(button => {
const url = button.getAttribute('data-youtube-url');
console.log('Found YouTube URL:', url);
button.addEventListener('click', function(e) {
e.stopPropagation();
console.log('YouTube button clicked:', url);
toggleHeart(this);
});
});
});
window.addEventListener('beforeunload', function() {
stopEqualizer();
});
</script>
</body>
</html>
{$document->getExtraEidValueHTML('eid이름')}
예) {$document->getExtraEidValue('url')}
이런식으로 사용하시면 되겠습니다.
게시글 읽기 페이지인 경우
{$oDocument->getExtraEidValue('url')}