youtube api 질문 드립니다
본문
제이쿼리 탭과 유튜브 api를 이용해서 유투브동영상 플레이/ 스톱 을 적용하려고 합니다
여분필드 wr_1 에 유투브 동영상 아이디를 입력해서 출력합니다
빨간색 부분의 id 가 변경되야 할것 같은데
<div id="video<?php echo $i>"></div> 이렇게 입력하고
스크립트 부분의
player = new YT.Player('video', { 의 video 를
player = new YT.Player('video<?php echo $i?>', {
위처럼 변경해도 먹히질 않네요..
id 에서 <?php echo $i> 이 코드를 제거하면 나중에 등록한 동영상만 플레이/스톱 스크립트가 먹히는데..
api 스크립트를 어떻게 처리해야 하나요??
부탁드립니다 ㅜㅜ
<?php
include_once(G5_PATH.'/head.sub.php');
?>
<style type="text/css">
#tabs {
width: 95%;
margin-left: auto;
margin-right: auto;
margin-top: 10px;
}
</style>
<link rel="stylesheet" href="//code.jquery.com/ui/1.11.4/themes/smoothness/jquery-ui.css">
<script src="//code.jquery.com/jquery-1.10.2.js"></script>
<script src="//code.jquery.com/ui/1.11.4/jquery-ui.js"></script>
<script>
$(function() {
$( "#tabs" ).tabs();
});
</script>
<div id="tabs">
<!--탭 제목 출력 시작-->
<ul>
<?
$sql = "select * from g5_write_channel";
$result = sql_query($sql);
for ($i=0; $row2=sql_fetch_array($result); $i++) {
?>
<li><a href="#tabs-<?=$i?>">탭-<?=$i?></a></li>
<?php } ?>
</ul>
<!--탭 제목 출력 끝-->
<!-- 탭 내용출력 시작-->
<?
$sql = "select * from g5_write_channel";
$result = sql_query($sql);
for ($i=0; $row2=sql_fetch_array($result); $i++) {
?>
<div id="tabs-<?=$i?>">
<div id='video'></div>
<div>
<a href="#" id="play-button">play</a> |
<a href="#" id="pause-button">pause</a>
</div>
<!--탭 내용 출력 끝-->
</div>
<!--유투브 api 스크립트 시작-->
<script>
var player;
// this function gets called when API is ready to use
function onYouTubePlayerAPIReady() {
// create the global player from the specific iframe (#video)
player = new YT.Player('video', {
height: '510',
width: '830',
videoId: '<?php echo $row2[wr_1]?>',
events: {
// call this function when player is ready to use
onReady: onPlayerReady
},
playerVars: {
'autoplay': 0,
'controls': 0,
'rel' : 0
}
});
}
function onPlayerReady(event) {
// bind events
var playButton = document.getElementById("play-button");
playButton.addEventListener("click", function() {
player.playVideo();
});
var pauseButton = document.getElementById("pause-button");
pauseButton.addEventListener("click", function() {
player.pauseVideo();
});
}
// Inject YouTube API script
var tag = document.createElement('script');
tag.src = "//www.youtube.com/player_api";
var firstScriptTag = document.getElementsByTagName('script')[0];
firstScriptTag.parentNode.insertBefore(tag, firstScriptTag);
</script>
<!--유투브 api 스크립트 끝-->
<?php } ?>
</div>