테스트 사이트 - 개발 중인 베타 버전입니다
SIR

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

PC용 모바일용
돌아온헌이
프로필 보기이 회원 글보기이 회원의 댓글보기
 · 7년 전 · 6223 · 19

링크

http://evnmusic.com (616) http://evnmusic.com (271)
jh.JPG

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">&nbsp;</div>
                <div class="jp-duration" role="timer" aria-label="duration">&nbsp;</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">&nbsp;</div>
                </div>
            </div>
        </div>
        <div class="jp-playlist">
            <ul>
                <!-- The method Playlist.displayPlaylist() uses this unordered list -->
                <li>&nbsp;</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]

 

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

첨부파일

jh.JPG (54.3 KB, 0회) MusicPlayer_AutoStartPoster.zip (11.8 MB, 100회)
목록
이전글 다음글

댓글 작성

댓글을 작성하시려면 로그인이 필요합니다.

로그인하기

댓글 19개

브러운아이
프로필 보기이 회원 글보기이 회원의 댓글보기
 7년 전
공개해주셔서 감사합니다.
돌아온헌이
프로필 보기이 회원 글보기이 회원의 댓글보기
 7년 전
구글링하니 자료가 있어서 수가락만 얻졌어요 ^^
DooriSamChon
프로필 보기이 회원 글보기이 회원의 댓글보기
 7년 전
재수정해주셔서 감사합니다
헌이탈퇴
프로필 보기이 회원 글보기이 회원의 댓글보기
 7년 전
문제는 유튜브 광고방송을 노출시키네요
Evelyn
프로필 보기이 회원 글보기이 회원의 댓글보기
 7년 전
좋은 자료 정말 감사드려요~! ^-^
추천 누르고 갈게요 :)
돌아온헌이
프로필 보기이 회원 글보기이 회원의 댓글보기
 7년 전
감사합니다.^^
돌아온헌이
프로필 보기이 회원 글보기이 회원의 댓글보기
 7년 전
네에 감사합니다.
돌아온헌이
프로필 보기이 회원 글보기이 회원의 댓글보기
 7년 전
광고가 있는 유튜브를 함께 사용 하신다면 비추천 합니다.
돌아온헌이
프로필 보기이 회원 글보기이 회원의 댓글보기
 7년 전
보드와 연동된 쥬크 박스가 있었으면 좋겠네요
vision5
프로필 보기이 회원 글보기이 회원의 댓글보기
 7년 전
멋지네요.
적용해 보겠습니다
너무느린신
프로필 보기이 회원 글보기이 회원의 댓글보기
 7년 전
혹시 이런 부탁도 가능할까요?
파일안에 팝업 예제 페이지가 있는데...
그것을 일반 모바일 용크기로 세팅된 팝업 예제 페이지로...

저는 초보라 그냥 쓰니...pc에선 적당히 작은 크기로 열리는데..
모바일에선 좀 이상하게 보여지는 것이...

ㅎㅎ
염치가 없습니다.
몽당s연필
프로필 보기이 회원 글보기이 회원의 댓글보기
 6년 전
감사합니다 잘 사용하겠습니다
min222
프로필 보기이 회원 글보기이 회원의 댓글보기
 6년 전
헌이님 혹시 어떤 유튜브는 동영상을 재생할수 없다고 뜨는것들이 많은데 왜 그런건지 아시나요.ㅠㅠ
예를 들어 https://www.youtube.com/watch?v=rH8Dnlyf3go 대부분 음악들이 안되서요
화이팅이얍얍얍
프로필 보기이 회원 글보기이 회원의 댓글보기
 5년 전
좋아요
단팥빵
프로필 보기이 회원 글보기이 회원의 댓글보기
 4년 전
동영상 아닌 음악 리스트로 나오는 것도 볼 수 있을까요?
육체관계
프로필 보기이 회원 글보기이 회원의 댓글보기
 4년 전
감사합니다

게시판 목록

그누보드5 스킨

좋은 댓글과 좋아요는 제작자에게 큰힘이 됩니다.
글쓰기

[레이아웃] 111

#PC용
리자
프로필 보기이 회원 글보기이 회원의 댓글보기
• 3주 전

[최신글] 최신글 목록 심플한 스킨입니다. [1]

#PC용 #모바일용 #반응형
GGNUXNS
프로필 보기이 회원 글보기이 회원의 댓글보기
• 2개월 전

[최신글] 최신글 목록 스타일 스킨입니다. [2]

#PC용 #모바일용 #반응형
GGNUXNS
프로필 보기이 회원 글보기이 회원의 댓글보기
• 2개월 전

[최신글] 최신글 갤리리 스타일 스킨입니다. [2]

#PC용 #모바일용 #반응형
GGNUXNS
프로필 보기이 회원 글보기이 회원의 댓글보기
• 2개월 전

[최신글] 상단 탑배너(최신) [5]

#PC용
트리플
프로필 보기이 회원 글보기이 회원의 댓글보기
• 2개월 전

[레이아웃] 관리자, 어드민 페이지 버그 패치 (php8 위주) [37]

#PC용 #반응형
비비버팩토리
프로필 보기이 회원 글보기이 회원의 댓글보기
• 2개월 전

[게시판] 유튜브 게시판 - 담기, 선택재생 [15]

#반응형
지수아빠
프로필 보기이 회원 글보기이 회원의 댓글보기
• 2개월 전

[게시판] 부트스트랩 5.3 글쓰기 게시판 [3]

#PC용 #반응형
배부른북극곰
프로필 보기이 회원 글보기이 회원의 댓글보기
• 2개월 전

[최신글] 상단 탑배너(최신) [4]

#PC용
트리플
프로필 보기이 회원 글보기이 회원의 댓글보기
• 2개월 전

[최신글] 협력업체를 메인화면에 슬라이형식으로 보여주는 최근게시물 스킨 [11]

#PC용
설국열차
프로필 보기이 회원 글보기이 회원의 댓글보기
• 2개월 전

[게시판] 메인화면에 최신글로 볼 수 있도록 하는 협력업체 관리 게시판 [8]

#PC용
설국열차
프로필 보기이 회원 글보기이 회원의 댓글보기
• 2개월 전

[최신글] 최신글 스킨(header slide banner) [6]

#PC용
트리플
프로필 보기이 회원 글보기이 회원의 댓글보기
• 3개월 전
🐛 버그신고