JQuarry기반 html5 음악플레이어(유튜브재생토록함) > 그누보드5 스킨

최신글 매뉴얼 FAQ
그누보드5
그누보드6
가이드
포럼
  • Q&A
  • 파이써니스타
  • 이슈
  • 버그신고
  • 사용후기
    • 자료실
  • 다운로드
  • 팁자료실
  • 스킨
  • 테마
  • 플러그인
    • Q & A
    궁금한 게 있으신가요? 지금 질문해보세요!
    솔루션
    프로그래밍
    서버
    사이트운영
    컨텐츠몰
    나의 재능을 팔아보세요!
    부가서비스
    프로모션! 신용카드 결제수수료 2.9%
    제작의뢰
    커뮤니티
    커뮤니티
    소모임
    스터디
    강좌
    기타
    매출이 오르면 내리는 수수료! 지금 수수료센터에서 전자결제(PG)수수료 비교견적 신청해 보세요!

    그누보드5 스킨

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

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

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

    첨부파일

    MusicPlayer_AutoStartPoster.zip (11.8M) 100회 다운로드 2018-11-25 14:42:56 포인트 차감1

    본문

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

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

     

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

     

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

     

    
<!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>

     

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

    추천
    11
    #PC용 #모바일용

    댓글 전체

    너무느린신 홈페이지 자기소개 아이디로 검색 전체게시물 회원게시물 18.12.13 01:34:17
    혹시 이런 부탁도 가능할까요?
    파일안에 팝업 예제 페이지가 있는데...
    그것을 일반 모바일 용크기로 세팅된 팝업 예제 페이지로...

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

    ㅎㅎ
    염치가 없습니다.
    min222 자기소개 아이디로 검색 전체게시물 회원게시물 19.05.30 19:09:58
    헌이님 혹시 어떤 유튜브는 동영상을 재생할수 없다고 뜨는것들이 많은데 왜 그런건지 아시나요.ㅠㅠ
    예를 들어 https://www.youtube.com/watch?v=rH8Dnlyf3go  대부분 음악들이 안되서요
    전체 2,434 |RSS
    그누보드5 스킨 내용 검색

    회원로그인

    (주)에스아이알소프트 / 대표:홍석명 / (06211) 서울특별시 강남구 역삼동 707-34 한신인터밸리24 서관 1404호 / E-Mail: admin@sir.kr
    사업자등록번호: 217-81-36347 / 통신판매업신고번호:2014-서울강남-02098호 / 개인정보보호책임자:김민섭(minsup@sir.kr)
    © SIRSOFT