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

돌아온헌이

프로필 보기 이 회원 글보기 이 회원의 댓글보기

· 7년 전 · 조회 6255 6255 · 댓글 19 19

링크

http://evnmusic.com (619) http://evnmusic.com (272)

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

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

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

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

[code]

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

   {
       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]

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

#PC용 #모바일용

첨부파일

jh.JPG (54.3 KB) 0회 2018-11-25 14:42 포인트 차감 1

MusicPlayer_AutoStartPoster.zip (11.8 MB) 100회 2018-11-25 14:42 포인트 차감 1

글쓰기

댓글 19개

브러운아이

프로필 보기 이 회원 글보기 이 회원의 댓글보기

7년 전

공개해주셔서 감사합니다.

돌아온헌이

프로필 보기 이 회원 글보기 이 회원의 댓글보기

7년 전

구글링하니 자료가 있어서 수가락만 얻졌어요 ^^

DooriSamChon

프로필 보기 이 회원 글보기 이 회원의 댓글보기

7년 전

재수정해주셔서 감사합니다

헌이탈퇴

프로필 보기 이 회원 글보기 이 회원의 댓글보기

7년 전

문제는 유튜브 광고방송을 노출시키네요

Evelyn

프로필 보기 이 회원 글보기 이 회원의 댓글보기

7년 전

좋은 자료 정말 감사드려요~! ^-^
추천 누르고 갈게요 :)

돌아온헌이

프로필 보기 이 회원 글보기 이 회원의 댓글보기

7년 전

감사합니다.^^

지니야

프로필 보기 이 회원 글보기 이 회원의 댓글보기

7년 전

감사합니다

돌아온헌이

프로필 보기 이 회원 글보기 이 회원의 댓글보기

7년 전

네에 감사합니다.

돌아온헌이

프로필 보기 이 회원 글보기 이 회원의 댓글보기

7년 전

광고가 있는 유튜브를 함께 사용 하신다면 비추천 합니다.

돌아온헌이

프로필 보기 이 회원 글보기 이 회원의 댓글보기

7년 전

보드와 연동된 쥬크 박스가 있었으면 좋겠네요

vision5

프로필 보기 이 회원 글보기 이 회원의 댓글보기

7년 전

멋지네요.
적용해 보겠습니다

너무느린신

프로필 보기 이 회원 글보기 이 회원의 댓글보기

7년 전

혹시 이런 부탁도 가능할까요?
파일안에 팝업 예제 페이지가 있는데...
그것을 일반 모바일 용크기로 세팅된 팝업 예제 페이지로...

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

ㅎㅎ
염치가 없습니다.

쭈냥

프로필 보기 이 회원 글보기 이 회원의 댓글보기

6년 전

감사합니다

몽당s연필

프로필 보기 이 회원 글보기 이 회원의 댓글보기

6년 전

감사합니다 잘 사용하겠습니다

min222

프로필 보기 이 회원 글보기 이 회원의 댓글보기

6년 전

헌이님 혹시 어떤 유튜브는 동영상을 재생할수 없다고 뜨는것들이 많은데 왜 그런건지 아시나요.ㅠㅠ
예를 들어 https://www.youtube.com/watch?v=rH8Dnlyf3go 대부분 음악들이 안되서요