|
760
by Keith Hughitt
Added latest movies page |
1 |
<!DOCTYPE html>
|
2 |
<html lang="en"> |
|
3 |
<head> |
|
4 |
<title>Helioviewer.org - Latest Movies</title> |
|
5 |
<meta charset="utf-8" /> |
|
6 |
<script src="../lib/swfobject/swfobject.js"></script> |
|
7 |
<style type='text/css'> |
|
8 |
body { |
|
9 |
background-image: url('../resources/images/backgrounds/gradient_v5-optimized.png'); |
|
10 |
background-color: #20242F; |
|
11 |
background-repeat: repeat-x; |
|
12 |
text-align: center; |
|
13 |
}
|
|
14 |
#header {height: 50px;} |
|
15 |
#moviePlayer {} |
|
16 |
</style> |
|
17 |
</head> |
|
18 |
<body> |
|
19 |
<div id="header"> |
|
20 |
<h1 id="title">Helioviewer.org - Latest Movies</h1> |
|
21 |
</div> |
|
22 |
<div id="player"></div> |
|
23 |
||
24 |
<!-- Main -->
|
|
25 |
<script src="http://code.jquery.com/jquery-1.7.2.min.js" type="text/javascript"></script> |
|
26 |
<script> |
|
27 |
// Global playlist
|
|
28 |
var playlist = { |
|
29 |
videos: [], |
|
30 |
current_video: 0, |
|
31 |
player: null |
|
32 |
};
|
|
33 |
||
34 |
$(function () { |
|
35 |
// Query params
|
|
36 |
var params = { |
|
37 |
action: 'getUserVideos', |
|
38 |
num: 30 |
|
39 |
};
|
|
40 |
$.post("../api/index.php", params, parseUserVideos, "json"); |
|
41 |
});
|
|
42 |
||
43 |
function parseUserVideos(response) { |
|
44 |
var params, attrs, startURL, width, height; |
|
45 |
||
46 |
playlist.videos = parseYoutubeVideoIds(response); |
|
47 |
||
48 |
// Load SWFObject
|
|
49 |
params = { |
|
50 |
allowScriptAccess: "always", |
|
51 |
allowfullscreen: "true" |
|
52 |
};
|
|
53 |
attrs = {id: "moviePlayer"}; |
|
54 |
||
55 |
playlist.current_video = 0; |
|
56 |
||
57 |
startURL = "http://www.youtube.com/v/" + playlist.videos[0] + "?" + $.param({ |
|
58 |
enablejsapi: 1, |
|
59 |
playerapiid: "ytplayer", |
|
60 |
rel: 0 |
|
61 |
});
|
|
62 |
||
63 |
width = $(window).width() * 0.8; |
|
64 |
height = $(window).height() * 0.8; |
|
65 |
||
66 |
swfobject.embedSWF(startURL, "player", width, height, "8", "../lib/swfobject/expressinstall.swf", null, params, attrs); |
|
67 |
}
|
|
68 |
||
69 |
//suggestedQuality
|
|
70 |
||
71 |
// YouTube JavaScript Player Callbacks
|
|
72 |
// https://developers.google.com/youtube/js_api_reference
|
|
73 |
function onYouTubePlayerReady(playerId) { |
|
74 |
playlist.player = document.getElementById("moviePlayer"); |
|
75 |
playlist.player.addEventListener("onStateChange", "onStateChange"); |
|
76 |
playlist.player.playVideo(); |
|
77 |
}
|
|
78 |
||
79 |
function onStateChange(newstate) { |
|
80 |
if (newstate !== 0) { |
|
81 |
return; |
|
82 |
}
|
|
83 |
||
84 |
// Re-query latest videos once we get to the end of the loop
|
|
85 |
if ((playlist.current_video + 1) === playlist.videos.length) { |
|
86 |
// Query params
|
|
87 |
var params = { |
|
88 |
action: 'getUserVideos', |
|
89 |
num: 30 |
|
90 |
};
|
|
91 |
||
92 |
$.post("../api/index.php", params, function(response) { |
|
93 |
playlist.videos = parseYoutubeVideoIds(response); |
|
94 |
||
95 |
loadVideo(0); |
|
96 |
}, "json"); |
|
97 |
} else { |
|
98 |
// Otherwise play the next video in the queue
|
|
99 |
loadVideo((playlist.current_video + 1) % playlist.videos.length); |
|
100 |
}
|
|
101 |
}
|
|
102 |
||
103 |
function loadVideo(i) { |
|
104 |
// Load next video
|
|
105 |
playlist.current_video = i; |
|
106 |
playlist.player.loadVideoById(playlist.videos[playlist.current_video], null, "highres"); |
|
107 |
}
|
|
108 |
||
109 |
function parseYoutubeVideoIds(response) { |
|
110 |
var ids = []; |
|
111 |
||
112 |
$.each(response, function (i, video) { |
|
113 |
var id = video.url.split("=").pop(); |
|
114 |
ids.push(id); |
|
115 |
});
|
|
116 |
||
117 |
return ids; |
|
118 |
};
|
|
119 |
||
120 |
</script> |
|
121 |
</body> |
|
122 |
</html> |