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

그누보드5 스킨

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

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

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

첨부파일

MusicPlayer_AutoStartPoster.zip (11.8M) 95회 다운로드 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에선 적당히 작은 크기로 열리는데..
모바일에선 좀 이상하게 보여지는 것이...

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

회원로그인

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