JQuarry기반 html5 음악플레이어(유튜브재생토록함)
페이지 정보
작성자
운영자쪽지보내기
메일보내기
자기소개
아이디로 검색
전체게시물
댓글 0건
조회 2,842회
작성일 21-02-07 09:43
본문
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>
첨부파일
- MusicPlayer_AutoStartPoster.zip (11.8M) 44회 다운로드 | DATE : 2021-02-07 09:43:15
댓글목록
등록된 댓글이 없습니다.