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();
$("#container").html('<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>').trigger("create");
window.scroll(0, 0);
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');
});
});
</script>
<body>
<div data-role="page" id="home">
<div data-role="header">
<h1>Video Playlist</h1>
</div><!-- /header -->
<div data-role="content">
<div id="container">
</div>
<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