diff options
author | Ludovic Barman <ludovic.barman@gmail.com> | 2014-05-11 13:47:28 +0200 |
---|---|---|
committer | Ludovic Barman <ludovic.barman@gmail.com> | 2014-05-11 13:47:28 +0200 |
commit | 68579f3a451b910ffa47ed9cc7414a5e0338105f (patch) | |
tree | 629481040c33d31e4031eeea048bc050b2013a9b | |
parent | d2a60ddea8d779e0f025f8fe965fa388c5a840b2 (diff) | |
download | playGraph-68579f3a451b910ffa47ed9cc7414a5e0338105f.tar.gz playGraph-68579f3a451b910ffa47ed9cc7414a5e0338105f.tar.bz2 playGraph-68579f3a451b910ffa47ed9cc7414a5e0338105f.zip |
Working version YoutubePlayer
-rw-r--r-- | app/index.html | 6 | ||||
-rw-r--r-- | app/js/yt_musicsearch.js | 18 | ||||
-rw-r--r-- | videosearch_n_play.html | 13 |
3 files changed, 32 insertions, 5 deletions
diff --git a/app/index.html b/app/index.html index 8bb6176..905840a 100644 --- a/app/index.html +++ b/app/index.html @@ -45,6 +45,12 @@ <li data-ng-repeat="song in playseq | filter:{selected:true}">{{song.label}}</li> </ul> </fieldset> + + <iframe id="ytplayer" type="text/html" width="640" height="360" +src="https://www.youtube.com/embed/M7lc1UVf-VE?autoplay=1&modestbranding=1" +frameborder="0" allowfullscreen></iframe> + + </div> <div id="column-middle"> <div class="world"> diff --git a/app/js/yt_musicsearch.js b/app/js/yt_musicsearch.js index fcc52db..82ad741 100644 --- a/app/js/yt_musicsearch.js +++ b/app/js/yt_musicsearch.js @@ -18,12 +18,22 @@ function searchClicked() document.documentElement.firstChild.appendChild(script); } - - function newMusic(id) + + var musicTimer; + + function startSongWithDuration(id, duration) { $('#ytplayer').attr('src', 'https://www.youtube.com/embed/'+id+'?autoplay=1&modestbranding=1'); + console.log("Starting music "+id+", timer="+duration); + musicTimer = setInterval(changeSong, duration * 1000); } - + + function changeSong() + { + alert("Done"); + clearInterval(musicTimer); + } + function getAllMatchingIds(data) { var feed = data.feed; @@ -44,7 +54,7 @@ function searchClicked() for (var i = 0; i < results.length; i++) { //html.push('<li>', '<img src="http://img.youtube.com/vi/', results[i].id, '/2.jpg" /><a href="#" onclick="newMusic(\'', results[i].id ,'\')">', results[i].title, '</a>(', results[i].duration, ')', '</li>'); - html.push('<li>', '<a href="#" onclick="newMusic(\'', results[i].id ,'\')">', results[i].title, '</a>', '</li>'); + html.push('<li>', '<a href="#" onclick="startSongWithDuration(\'', results[i].id ,'\', '+results[i].duration +')">', results[i].title, '</a>', '</li>'); } html.push('</ul>'); document.getElementById('videoResultsDiv').innerHTML = html.join(''); diff --git a/videosearch_n_play.html b/videosearch_n_play.html index 8a8f854..fb58843 100644 --- a/videosearch_n_play.html +++ b/videosearch_n_play.html @@ -31,9 +31,18 @@ } - function newMusic(id) + var songFinished; + function newMusic(id, duration) { $('#ytplayer').attr('src', 'https://www.youtube.com/embed/'+id+'?autoplay=1&modestbranding=1'); + songFinished = setTimer(nextSong, duration * 1000); + console.log("Setting timer for "+duration+" seconds"); + } + + function nextSong() + { + clearTimer(songFinished); + console.log("Bingo !"); } function getAllMatchingIds(data) @@ -60,6 +69,8 @@ html.push('</ul>'); document.getElementById('videoResultsDiv').innerHTML = html.join(''); } + + </script> |