Skip welcome & menu and move to editor
Welcome to JS Bin
File
Add library
Share
Login or Register
Blog
Help
Load cached copy from
  • Run with JS
  • Save
  • Share
  • …
 
<!DOCTYPE html> 
<html> 
<head> 
    <title>到高雄看黃色小鴨</title> 
    <meta name="viewport" content="width=device-width, initial-scale=1"> 
    <script src="http://code.jquery.com/jquery-1.7.2.min.js"></script>
</head> 
​
<body> 
    <div id="VideoPlayer"><!-- 這裡會嵌入YouTube Player播放影片 --></div>
    <div id="VideoThumbs"><!-- 這裡會產生YouTube Thumbs列出影片 --></div>
    <script type="text/javascript">
        function LoadVideo(videoUrl) {
            str = '<iframe width="100%" height="240" src="http://www.youtube.com/embed/' + videoUrl + '&autoplay=1" frameborder="0">';
            str += '</iframe>';
            $("#VideoPlayer").html(str);
            window.scrollTo(0,0);
        }
        function ShowVideoThumbs(data) {
          var feed = data.feed;
          var entries = feed.entry || [];
          var html = ['<ul style="margin-bottom:0px;padding-left:0px;margin-left:0px;list-style:none;">'];
          for (var i = 0; i < entries.length; i++) {
                var entry = entries[i];
                var title = entry.title.$t.substr(0,10);
                var thumblUrl = entries[i].media$group.media$thumbnail[0].url;
                var videoUrl = entries[i].media$group.media$content[0].url;
                if ( i==0 ) LoadVideo(videoUrl.substr(25)); /// 第一個嵌入YouTube Player播放影片 
                html.push('<li onclick="LoadVideo(\'', videoUrl.substr(25) , '\')" style="float:left;width:45%;margin-bottom:1em;margin-right:1em;">', '<span>', title , '...<br /><img src="', thumblUrl, '" style="width:100%;box-shadow:1px 1px 5px #666;border:solid 4px #fff;" />', '</span></li>');
              }
              html.push('</ul><br style="clear:left;"/>');
              document.getElementById('VideoThumbs').innerHTML = html.join('');
        }
    </script>
    <!-- YouTube API是從下列這行開始動作, 得到影片json資料後, 就會呼叫ShowVideoThumbs函式進行處理. -->
    <script type="text/javascript" src="http://gdata.youtube.com/feeds/api/playlists/PLZpe6ObhwpBApHl7to54WhUzj8UEv-X-S?v=2&alt=json-in-script&callback=ShowVideoThumbs&max-results=50"></script>
</body>
</html>
Output

You can jump to the latest bin by adding /latest to your URL

Dismiss x
public
Bin info
anonymouspro
0viewers