JQuarry기반 html5 음악플레이어(유튜브재생토록함)

밑에 @DooriSamChon분이 올리신 jplayer입니다. 

그냥 시간이 좀 남아 유튜브또한 재생하도록 하였습니다. 

그런데.... 이것은..... 

[code]

<!DOCTYPE html><html lang='en' class=''>
<head>

<style class="cp-pen-styles"></style></head><body>
<title>:+: Gaedoori Music Player :+:</title>
<meta http-equiv="content-type" content="text/html; charset=euc-kr">
<link href="../../dist/skin/blue.monday/css/jplayer.blue.monday.min.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>
<!-- 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: " NEW K-POP SONGS TOP 1~20",//곡명
        m4v: "https://www.youtube.com/watch?v=qLrUPQ2M0ug" },//유튜브URL
        {
            title:"이별후애(愛)", // 곡명
            artist:"해당경로mp3디렉토리에 위치한 음원", // 가수명
            mp3:"mp3/001.mp3", // 음원경로
            poster: "img/poster/002.jpg" // 플레이할때 화면에 보여줄 포스터 640x360 크기 최적화
        },
    {
        type: "youtube", /* <- Remember to add this */
        title: "Finding Dory - Youtube",//곡명
        m4v: "https://www.youtube.com/watch?v=cfLob5IYMp8" },//유튜브URL

    {
        title: "Incredibles Teaser",
        m4v: "http://www.jplayer.org/video/m4v/Incredibles_Teaser.m4v" }],

    {
        playlistOptions: {
            autoPlay: true },

        supplied: "webmv, ogv, m4v, oga, mp3",
        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: "cfLob5IYMp8",
                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>

[/code]

## 보드스킨 아니기때문에 플러그인에 올리려니 그렇고 스킨에 올리려니 그렇네요