Last active
August 29, 2015 14:14
-
-
Save nasitra/01f6d123576b0ec2a0ab to your computer and use it in GitHub Desktop.
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| <!DOCTYPE html> | |
| <html> | |
| <head> | |
| <meta charset="utf-8" /> | |
| <meta name="viewport" content="width=device-width, user-scalable=no, initial-scale=1, maximum-scale=1, minimum-scale=1" /> | |
| <title>Youtube Music Player</title> | |
| <link rel="stylesheet" href="//code.jquery.com/mobile/1.2.1/jquery.mobile-1.2.1.min.css" /> | |
| <style> | |
| * { | |
| -webkit-tap-highlight-color: rgba(0, 0, 0, 0); | |
| -webkit-text-size-adjust:none; | |
| -webkit-touch-callout:none; | |
| } | |
| html { | |
| min-height: 0px !important; | |
| overflow: hidden; | |
| } | |
| body { | |
| -webkit-user-select: none; | |
| background-color: black; | |
| margin: 0px; | |
| overflow: hidden; | |
| user-select: none; | |
| width: 100%; | |
| } | |
| #header-title { | |
| height: 20px; | |
| margin-left: 80px; | |
| margin-right: 80px; | |
| } | |
| #content { | |
| background-color: black; | |
| overflow: hidden; | |
| padding: 0px; | |
| } | |
| #search-form { | |
| display: none; | |
| } | |
| #search-text-container { | |
| margin: 60px auto 20px auto; | |
| max-width: 400px; | |
| } | |
| #input-text-container { | |
| margin: 0px 20px; | |
| } | |
| #search-text-input { | |
| width: 100%; | |
| } | |
| #play-button-container { | |
| margin: 0px auto; | |
| max-width: 200px; | |
| } | |
| #player-container { | |
| background-color: black; | |
| position: absolute; | |
| width: 100%; | |
| } | |
| #player { | |
| background-color: black; | |
| height: 100%; | |
| width: 100%; | |
| } | |
| </style> | |
| <script src="//code.jquery.com/jquery-1.8.3.min.js"></script> | |
| <script> | |
| $(document).bind("mobileinit", function(){ | |
| $.mobile.ajaxEnabled = false; | |
| $.mobile.pushStateEnabled = false; | |
| $.mobile.linkBindingEnabled = false; | |
| $.mobile.hashListeningEnabled = false; | |
| }); | |
| </script> | |
| <script src="//code.jquery.com/mobile/1.2.1/jquery.mobile-1.2.1.min.js"></script> | |
| <script src="//www.youtube.com/iframe_api"></script> | |
| </head> | |
| <body> | |
| <div id="page" data-role="page"> | |
| <div id="header" data-role="header"> | |
| <a id="search-button" class="controlButton" href="#" data-icon="search" data-iconpos="notext" rel="external" data-ajax="false"></a> | |
| <h2 id="header-title"> </h2> | |
| <a id="next-button" href="#" class="ui-btn-right" data-icon="arrow-r" rel="external" data-ajax="false">Next</a> | |
| </div> | |
| <div id="content" data-role="content"> | |
| <div id="search-form"> | |
| <div id="search-text-container"> | |
| <div id="input-text-container"> | |
| <input id="search-text-input" type="text" id="keywordInput" value="" /> | |
| </div> | |
| </div> | |
| <div id="play-button-container"> | |
| <button id="play-button" data-role="button" data-theme="b" rel="external" data-ajax="false">Play</button> | |
| </div> | |
| </div> | |
| <div id="player-container"> | |
| <div id="player"></div> | |
| </div> | |
| </div> | |
| </div> | |
| <script> | |
| (function() { | |
| // player | |
| var keyword = decodeURI(window.location.hash.substring(1)); | |
| var player = null; | |
| var currentVideoID; | |
| var playedVideoIDs = {}; | |
| var currentVideoTitle; | |
| var mode; | |
| var isFirstLoad = true; | |
| function loadPlayer(keyword) { | |
| $.mobile.silentScroll(0); | |
| $("#header-title").text("Loading...").css({color: "gray"}); | |
| $.getJSON("//gdata.youtube.com/feeds/api/videos?v=2&alt=json&q="+ keyword +"&category=Music&format=5", function(data) { | |
| if (mode === "play") { | |
| var items = data.feed.entry, item = items[Math.floor(Math.random() * items.length)]; | |
| var videoIDText = item.id.$t.split(":"); | |
| videoIDText = videoIDText[videoIDText.length - 1]; | |
| currentVideoID = videoIDText; | |
| playedVideoIDs[currentVideoID] = true; | |
| currentVideoTitle = item.title.$t; | |
| $("#header-title").text(currentVideoTitle); | |
| if(navigator.userAgent.search(/iPhone/) !== -1 || navigator.userAgent.search(/iPad/) !== -1 || navigator.userAgent.search(/Android/) !== -1) { $("#player-container").css("opacity", 1).show(); } | |
| if (player === null) { | |
| player = new YT.Player("player", { | |
| height: "100%", | |
| width: "100%", | |
| videoId: currentVideoID, | |
| playerVars: { | |
| autoplay: 0, | |
| controls: ("createTouch" in document) ? 1 : 0, | |
| enablejsapi: 1, | |
| origin: location.protocol + "//" + location.host, | |
| rel: 0, | |
| showinfo: 0, | |
| showsearch: 0 | |
| }, | |
| events: { | |
| "onReady": onPlayerReady, | |
| "onStateChange": onPlayerStateChange, | |
| "onError": onPlayerError | |
| } | |
| }); | |
| } else { | |
| $("#next-button").hide(); | |
| $("#player-container").hide(); | |
| player.loadVideoById(currentVideoID); | |
| } | |
| } | |
| }).error(function() { | |
| if (mode === "play") { $("#header-title").text("video load error"); } | |
| }).complete(function() { | |
| if (mode === "play") { | |
| $("#search-button").show(); | |
| $("#next-button").show(); | |
| } | |
| }); | |
| } | |
| function onPlayerReady(event) { | |
| if (mode === "play") { | |
| if (navigator.userAgent.search(/iPhone/) === -1 && navigator.userAgent.search(/iPad/) === -1 && navigator.userAgent.search(/Android/) === -1) { player.playVideo(); } | |
| $("#search-button").show(); | |
| $("#next-button").show(); | |
| } | |
| } | |
| function onPlayerStateChange(event) { | |
| if (mode === "play") { | |
| if(navigator.userAgent.search(/Android/) !== -1) { $("#search-text-input").blur().hide(); } | |
| var newState = event.data; | |
| if (newState === -1) { player.playVideo(); } | |
| else if (newState === 0) { nextVideo(); } | |
| else if (newState === 1) { | |
| $("#header-title").css({color: "white"}); | |
| if (isFirstLoad) { | |
| if (!("opera" in window)) { $("#player-container").css("opacity", 0); } | |
| $("#player-container").show(); | |
| $("#player-container").animate({"opacity": 1}, 160); | |
| isFirstLoad = false; | |
| } else { $("#player-container").css("opacity", 1).show(); } | |
| } | |
| } | |
| } | |
| function onPlayerError(event) { | |
| if (mode === "play") { | |
| $("#header-title").text("video load error"); | |
| $("#next-button").show(); | |
| } | |
| } | |
| function shuffle(array) { | |
| var i = array.length; | |
| while (--i) { | |
| var j = Math.floor(Math.random() * (i + 1)); | |
| if (i == j) continue; | |
| var k = array[i]; | |
| array[i] = array[j]; | |
| array[j] = k; | |
| } | |
| return array; | |
| } | |
| function getShuffledArray(len) { | |
| var array = [], i; | |
| for (i = 0; i < len; ++i) { array[i] = i; } | |
| return shuffle(array); | |
| } | |
| function nextVideo() { | |
| $("#header-title").text("Loading...").css({color: "gray"}); | |
| $("#next-button").hide(); | |
| $.getJSON("//gdata.youtube.com/feeds/api/videos/"+ currentVideoID +"/related?v=2&alt=json&category=Music&format=5", function(data) { | |
| if (mode === "play") { | |
| var items = data.feed.entry, item = items[Math.floor(Math.random() * items.length)]; | |
| var videoIDText = item.id.$t.split(":"); | |
| videoIDText = videoIDText[videoIDText.length - 1]; | |
| if (playedVideoIDs[videoIDText]) { | |
| var shuffledArray = getShuffledArray(items.length), i, len; | |
| for (i = 0, len = shuffledArray.length; i < len; ++i) { | |
| item = items[shuffledArray[i]]; | |
| videoIDText = item.id.$t.split(":"); | |
| videoIDText = videoIDText[videoIDText.length - 1]; | |
| if (!playedVideoIDs[videoIDText]) { | |
| break; | |
| } | |
| } | |
| } | |
| currentVideoID = videoIDText; | |
| playedVideoIDs[currentVideoID] = true; | |
| currentVideoTitle = item.title.$t; | |
| $("#header-title").text(currentVideoTitle); | |
| if(navigator.userAgent.search(/iPhone/) !== -1 || navigator.userAgent.search(/iPad/) !== -1 || navigator.userAgent.search(/Android/) !== -1) { $("#player-container").show(); } | |
| if ("opera" in window || navigator.userAgent.search(/Android/) !== -1) { player.loadVideoById(currentVideoID); } | |
| else { player.cueVideoById(currentVideoID); } | |
| } | |
| }).error(function() { | |
| if (mode === "play") { | |
| $("#header-title").text("video load error"); | |
| $("#player-container").show(); | |
| } | |
| }).complete(function() { | |
| if (mode === "play") { | |
| $("#search-button").show(); | |
| $("#next-button").show(); | |
| } | |
| }); | |
| } | |
| var U = { | |
| isDOMContentLoaded: false, | |
| isYouTubePlayerAPIReady: false, | |
| keyword: function() { return keyword; }, | |
| player: function() { return player; }, | |
| loadPlayer: loadPlayer | |
| }; | |
| window.UPlayer = U; | |
| $(function() { | |
| U.isDOMContentLoaded = true; | |
| // style | |
| var headerHeight = $("#header").outerHeight(); | |
| $(window).resize(function() { | |
| var agent = navigator.userAgent, contentHeight = $(window).height() - headerHeight; | |
| if(agent.search(/iPhone/) !== -1) { contentHeight += 60; } | |
| $("#content").height(contentHeight); | |
| $("#player").height(contentHeight - 4); | |
| }); | |
| $(window).resize(); | |
| $(window).bind("orientationchange", function() { | |
| $.mobile.silentScroll(0); | |
| }); | |
| $("#header-title").bind("touchstart", function() { $.mobile.silentScroll(0); }); | |
| function setStyle(mode) { | |
| if (!("opera" in window)) { $("#player-container").css("opacity", 0); } | |
| if (mode === "search") { | |
| $("#header-title").text("YouTube Music Player").css({color: "white"}); | |
| $("html").css({"background": "transparent"}); | |
| $("body").css({"background-color": "transparent"}); | |
| $("#content").css({"background-color": "transparent"}); | |
| $("#next-button").hide(); | |
| $("#search-button").hide(); | |
| $("#search-form").show(); | |
| $("#search-text-input").show().val("").focus(); | |
| $("#player-container").hide(); | |
| } else if (mode === "play") { | |
| $("html").css({"background": "black"}); | |
| $("body").css({"background-color": "black"}); | |
| $("#content").css({"background-color": "black"}); | |
| $("#search-form").hide(); | |
| $("#search-text-input").val("").blur().hide(); | |
| $("#player-container").show(); | |
| } | |
| $("#play-button").button("disable"); | |
| } | |
| if (keyword === "") { mode = "search"; } | |
| else { mode = "play"; } | |
| setStyle(mode); | |
| // next | |
| $("#next-button").bind("tap", function(event) { | |
| event.preventDefault(); | |
| player.pauseVideo(); | |
| nextVideo(); | |
| }); | |
| // search | |
| $("#search-button").bind("tap", function(event) { | |
| event.preventDefault(); | |
| searchVideo(); | |
| }); | |
| function searchVideo() { | |
| if (player !== null) { player.pauseVideo(); } | |
| window.location.href = "#"; | |
| mode = "search"; | |
| setStyle(mode); | |
| placeholderText = defaultPlaceholderText; | |
| playedVideoIDs = {}; | |
| isFirstLoad = true; | |
| } | |
| // input | |
| var defaultPlaceholderText = "Search for an artist or track..."; | |
| var placeholderText = defaultPlaceholderText; | |
| $("#search-text-input").keypress(function(event) { | |
| if (event.keyCode === 13) { doPlayVideo(); } | |
| }).keyup(function(){ | |
| if ($(this).val() !== "") { $("#play-button").button("enable"); } | |
| else { $("#play-button").button("disable"); } | |
| }).focus(function() { | |
| $("#search-text-input").attr("placeholder", ""); | |
| placeholderText = defaultPlaceholderText; | |
| }).blur(function() { | |
| $("#search-text-input").attr("placeholder", placeholderText); | |
| }); | |
| // play | |
| function doPlayVideo() { | |
| var inputText = $("#search-text-input").val(); | |
| window.location.href = "#" + inputText; | |
| if(navigator.userAgent.search(/iPhone/) !== -1 || navigator.userAgent.search(/iPad/) !== -1 || navigator.userAgent.search(/Android/) !== -1) { | |
| placeholderText = inputText; | |
| $("#search-text-input").val("").attr("placeholder", inputText); | |
| $("#play-button-container").hide(); | |
| $("#header-title").text("Loading...").css({color: "gray"}); | |
| window.location.reload(); | |
| return; | |
| } | |
| if (inputText !== "") { | |
| if ("createTouch" in document) { | |
| placeholderText = inputText; | |
| $("#search-text-input").attr("placeholder", inputText); | |
| $("#search-text-input").val(""); | |
| setTimeout(function() { | |
| if ($("#search-text-input").val().length === 0) { | |
| $("#search-text-input").blur().hide(); | |
| playVideo(inputText); | |
| } | |
| }, 100); | |
| } else { playVideo(inputText); } | |
| } | |
| } | |
| function playVideo(keyword) { | |
| if (keyword !== "") { | |
| mode = "play"; | |
| setStyle(mode); | |
| placeholderText = defaultPlaceholderText; | |
| $("#search-text-input").attr("placeholder", placeholderText); | |
| loadPlayer(keyword); | |
| } | |
| } | |
| $("#play-button").bind("tap", function(event) { | |
| event.preventDefault(); | |
| doPlayVideo(); | |
| }); | |
| if (keyword !== "" && (U.isYouTubePlayerAPIReady || "opera" in window) && player === null) { loadPlayer(keyword); } | |
| }); | |
| })(); | |
| function onYouTubePlayerAPIReady() { | |
| UPlayer.isYouTubePlayerAPIReady = true; | |
| var keyword = UPlayer.keyword(); | |
| if (UPlayer.isDOMContentLoaded && UPlayer.keyword() !== "" && UPlayer.player() === null) { | |
| UPlayer.loadPlayer(keyword); | |
| } | |
| } | |
| </script> | |
| </body> | |
| </html> |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Play a music video and related one after another automatically |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment