즐겨찾기
바탕화면
내 문서
로컬 디스크 (C:)
로컬 디스크 (D:)
다운로드
즐겨찾기
<div id="bgm_box" style="vertical-align: middle;"> <!DOCTYPE html> <html> <body style="cursor: url(http://pointnemo.ml/point.cur), auto !important;"> <!-- 1. The <iframe> (and video player) will replace this <div> tag. --> <div id="player"></div> <script> // 2. This code loads the IFrame Player API code asynchronously. var tag = document.createElement('script'); tag.src = "https://www.youtube.com/iframe_api"; var firstScriptTag = document.getElementsByTagName('script')[0]; firstScriptTag.parentNode.insertBefore(tag, firstScriptTag); // 3. This function creates an <iframe> (and YouTube player) // after the API code downloads. var player; function loadPlaylist_playlist_id(list_id) { player.loadPlaylist({ 'list': list_id, //이부분을 변수로 받아옴 'listType': 'playlist', 'index': 0, 'startSeconds': 0, 'suggestedQuality': 'small' }); } function onYouTubeIframeAPIReady() { player = new YT.Player('player', { height: '1', width: '1', videoId: 'M7lc1UVf-VE', events: { 'onReady': onPlayerReady, 'onStateChange': onPlayerStateChange } }); } // 4. The API will call this function when the video player is ready. function onPlayerReady(event) { loadPlaylist_playlist_id(''); player.setLoop(true); event.target.playVideo(); //player.playVideo(); } // 5. The API calls this function when the player's state changes. // The function indicates that when playing a video (state=1), // the player should play for six seconds and then stop. var done = false; function onPlayerStateChange(event) { if (event.data == YT.PlayerState.PLAYING && !done) { //setTimeout(stopVideo, 6000); done = true; } } function stopVideo() { player.stopVideo(); } </script> <script> var isplaying = 1; function imgToggle(){ var playicon = document.getElementById("playicon"); var pauseicon = document.getElementById("pauseicon"); if(isplaying%2==1){ pauseicon.style.display='none'; playicon.style.display='inline-block'; player.pauseVideo(); }else{ playicon.style.display='none'; pauseicon.style.display='inline-block'; player.playVideo(); } isplaying++; } </script> <img src="./img/pre.png" onClick="player.previousVideo()"></img> <img src="./img/play.png" id="playicon" onClick="imgToggle()" style="display:none;"></img> <img src="./img/pause.png" id="pauseicon" onClick="imgToggle()" style="display:inline-block;" ></img> <img src="./img/next.png" onClick="player.nextVideo()"></img> <img src="./img/shuffle.png" onClick="player.setShuffle(true)"></img> </div> </body> </html> </div>
