Create a gist now

Instantly share code, notes, and snippets.

Embed
What would you like to do?
<html>
<head>
<meta name="viewport" content="user-scalable=no,width=device-width,initial-scale=1" />
<link rel="stylesheet" href="http://code.jquery.com/mobile/1.4.0-rc.1/jquery.mobile-1.4.0-rc.1.min.css">
<script src="http://code.jquery.com/jquery-1.10.2.min.js"></script>
<script src="http://code.jquery.com/mobile/1.4.0-rc.1/jquery.mobile-1.4.0-rc.1.min.js"></script>
<style>
#container
{
text-align:center;
}
</style>
</head>
<script>
$(document).on('pagebeforechange', function (e, data) {
if (typeof data.toPage === 'string') {
var u = $.mobile.path.parseUrl(data.toPage),
re = /^#video/;
if (u.hash.search(re) !== -1) {
var videoId = u.hash.replace(/.*id=/, "");
var videoName = data.options.link.text();
runtimePopup('<iframe src="//player.vimeo.com/video/' + videoId + '?title=0&amp;byline=0&amp;portrait=0&amp;autoplay=0" width="300" height="200" frameborder="0" webkitallowfullscreen mozallowfullscreen allowfullscreen></iframe> <p><a href="http://vimeo.com/' + videoId + '">' + videoName + '</a> on <a href="https://vimeo.com">Vimeo</a>.</p>');
e.preventDefault();
}
}
});
$(document).on("pageshow", "#home", function (event) {
$.mobile.loading('show');
var url = "http://vimeo.com/api/v2/user13844206/videos.json";
$.getJSON(url + "?callback=?", null, function (videos) {
var list = [], video;
for (var i = 0; i < videos.length; i++) {
video = videos[i];
if (video.embed_privacy == "anywhere") {
if (i == 0) {
$("#container").html('<iframe src="//player.vimeo.com/video/' + video.id + '?title=0&amp;byline=0&amp;portrait=0&amp;autoplay=0" width="300" height="200" frameborder="0" webkitallowfullscreen mozallowfullscreen allowfullscreen></iframe> <p><a href="http://vimeo.com/' + video.id + '">' + video.title + '</a> on <a href="https://vimeo.com">Vimeo</a>.</p>').trigger("create");
}
list.push('<li><a href="#video?id=' + video.id + '"> <img src="' + video.thumbnail_small + '"> <h2>' + video.title + '</h2> <p>' + video.upload_date + '</p></a> </li>');
}
}
$("#playList").append(list.join('')).listview('refresh');
$.mobile.loading('hide');
});
});
function runtimePopup(message, popupafterclose) {
var template = "<div data-role='popup' class='ui-content messagePopup' style='max-width:320px'>"
+ "<a href='#' data-role='button' data-theme='g' data-icon='delete' data-iconpos='notext' "
+ " class='ui-btn-right closePopup'>Close</a> <span> "
+ message + " </span> </div>";
popupafterclose = popupafterclose ? popupafterclose : function () { };
$.mobile.activePage.append(template).trigger("create");
$.mobile.activePage.find(".closePopup").on("tap", function (e) {
$.mobile.activePage.find(".messagePopup").popup("close");
});
$.mobile.activePage.find(".messagePopup").popup().popup("open").bind({
popupafterclose: function () {
$(this).unbind("popupafterclose").remove();
popupafterclose();
}
});
}
</script>
<body>
<div data-role="page" id="home">
<div data-role="header">
<h1>Video Playlist</h1>
</div><!-- /header -->
<div data-role="content">
<ul data-role="listview" data-inset="true" id="playList">
</ul>
</div><!-- /content -->
<div data-role="footer">
<h4>Video Playlist</h4>
</div>
</div>
</body>
</html>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment