poonkave/vimeo_playlist.html

## vimeo_playlist.html

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

	<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&byline=0&portrait=0&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&byline=0&portrait=0&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>