Youtube Data APIとYoutube Player APIを使用して、サムネイル表示の上にマウスカーソルを重ねるとプレビュー再生します。
http://bl.ocks.org/sfpgmr/raw/0671168256d7b4c09d34/
- d3.js
- q.js
- Bootstrap
- jquery
##ライセンス
- MITライセンス
##リンク
Last active
October 23, 2016 09:24
-
-
Save sfpgmr/0671168256d7b4c09d34 to your computer and use it in GitHub Desktop.
動画サムネイルの表示とプレビュー再生
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| <!DOCTYPE html> | |
| <html vocab="http://schema.org"> | |
| <head> | |
| <title>Youtube API サンプル - 動画サムネイルの表示とプレビュー再生</title> | |
| <meta charset="utf-8" /> | |
| <meta name="description" content="サムネイル表示の上にマウスカーソルを重ねるとプレビューできます。" /> | |
| <meta name="keywords" content="Youtube API,JavaScript" /> | |
| <meta name="author" content="S.F." /> | |
| <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no" /> | |
| <!-- Latest compiled and minified CSS --> | |
| <link rel="stylesheet" href="//maxcdn.bootstrapcdn.com/bootstrap/3.3.1/css/bootstrap.min.css"> | |
| <!-- Latest compiled and minified JavaScript --> | |
| <script type="text/javascript" src="http://www.sfpgmr.net/scripts/q.js"></script> | |
| <script type="text/javascript" src="http://cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.min.js"></script> | |
| <script type="text/javascript" src="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.1/js/bootstrap.min.js"></script> | |
| <script type="text/javascript" src="http://cdnjs.cloudflare.com/ajax/libs/d3/3.5.2/d3.js"></script> | |
| <script type="text/javascript" src="http://www.sfpgmr.net/scripts/youtube_apikey.js"></script> | |
| <script type="text/javascript"> | |
| if (!location.href.match(/localhost/)) { | |
| var _gaq = _gaq || []; | |
| _gaq.push(['_setAccount', 'UA-15457703-11']); | |
| _gaq.push(['_trackPageview']); | |
| (function () { | |
| var ga = document.createElement('script'); ga.type = 'text/javascript'; ga.async = true; | |
| ga.src = ('https:' == document.location.protocol ? 'https://ssl' : 'http://www') + '.google-analytics.com/ga.js'; | |
| var s = document.getElementsByTagName('script')[0]; s.parentNode.insertBefore(ga, s); | |
| })(); | |
| } | |
| </script> | |
| <style> | |
| html { | |
| position: relative; | |
| height: 100%; | |
| } | |
| body { | |
| /* Margin bottom by footer height */ | |
| margin-top: 50px; | |
| margin-bottom: 100px; | |
| } | |
| .footer { | |
| position: absolute; | |
| bottom: 0; | |
| width: 100%; | |
| /* Set the fixed height of the footer here */ | |
| height: 60px; | |
| background-color: #f5f5f5; | |
| } | |
| div#playerObj { | |
| display: none; | |
| position: absolute; | |
| } | |
| </style> | |
| </head> | |
| <body> | |
| <nav class="navbar navbar-default navbar-fixed-top " role="navigation"> | |
| <div class="container"> | |
| <!-- Brand and toggle get grouped for better mobile display --> | |
| <div class="navbar-header"> | |
| <button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#navbar-collapse"> | |
| <span class="sr-only">Toggle navigation</span> | |
| <span class="icon-bar"></span> | |
| <span class="icon-bar"></span> | |
| <span class="icon-bar"></span> | |
| </button> | |
| <div><a class="navbar-brand" href="#" property="headLine" id="headLine" style="margin-top:auto;margin-bottom:auto;">Youtube Test</a></div> | |
| </div> | |
| <div class="collapse navbar-collapse" id="navbar-collapse"> | |
| <p class="navbar-text navbar-right"><a id="homeLink" href="/" class="navbar-link"><span class="glyphicon glyphicon-home"></span>ホーム</a></p> | |
| </div> | |
| </div> | |
| </nav> | |
| <div class="container"> | |
| <header> | |
| <h1>動画サムネイルの表示とプレビュー再生</h1> | |
| <p>サムネイル表示の上にマウスカーソルを重ねるとプレビューできます。</p> | |
| </header> | |
| <section id="articles" class="row"></section> | |
| <aside style="margin-left:auto;margin-right:auto;display:block;"> | |
| <style> | |
| .blocks { | |
| width: 320px; | |
| height: 50px; | |
| } | |
| @media(min-width: 500px) { | |
| .blocks { | |
| width: 468px; | |
| height: 60px; | |
| } | |
| } | |
| @media(min-width: 800px) { | |
| .blocks { | |
| width: 728px; | |
| height: 90px; | |
| } | |
| } | |
| </style> | |
| <script async src="//pagead2.googlesyndication.com/pagead/js/adsbygoogle.js"></script> | |
| <!-- blocks --> | |
| <ins class="adsbygoogle blocks" | |
| style="display:inline-block;text-align:center;" | |
| data-ad-client="ca-pub-4402137407996189" | |
| data-ad-slot="3288576128"></ins> | |
| <script> | |
| (adsbygoogle = window.adsbygoogle || []).push({}); | |
| </script> | |
| </aside> | |
| </div> | |
| <div id="playerObj"> | |
| <div id="player"> | |
| </div> | |
| </div> | |
| <footer id="footer" class="navbar navbar-default navbar-fixed-bottom"> | |
| <div class="container"> | |
| <div class="row"> | |
| <div class="col-xs-3" property="creator" id="creator"> | |
| <div typeof="person" id="creatorPerson"> | |
| <span property="name" id="creatorName">By <a href="http://www.sfpgmr.net/">S.F.</a></span> | |
| </div> | |
| </div> | |
| <div class="col-xs-3 text-center"> | |
| </div> | |
| <div class="col-xs-6 text-right"><small><time id="date" property="dc:date" datetime="2015-01-11">2015-01-11</time></small></div> | |
| </div> | |
| </div> | |
| </footer> | |
| <script type="text/javascript"> | |
| "use strict"; | |
| var player; | |
| var playerWidth = 640; | |
| var playerHeight = 360; | |
| d3.select('head').append('script').attr('src', 'http://www.youtube.com/iframe_api'); | |
| if (window.location.href.match(/bl\.ocks\.org/i)) { | |
| d3.select('#homeLink').attr('href', 'http://bl.ocks.org/sfpgmr/'); | |
| } | |
| function onYouTubeIframeAPIReady() { | |
| player = new YT.Player('player', { | |
| width: playerWidth, | |
| height: playerHeight, | |
| playerVars: { | |
| 'fs': 1, | |
| 'hd': 1 | |
| }, | |
| events: { | |
| 'onReady': onPlayerReady | |
| }, | |
| enablejsapi: '1' | |
| }); | |
| function onPlayerReady(event) { | |
| d3.select('#player').on('mouseleave', function () { | |
| player.stopVideo(); | |
| var p = d3.select('#playerObj'); | |
| p.style('display', 'none'); | |
| d3.event.preventDefault(); | |
| }); | |
| } | |
| } | |
| /// <reference path="/scripts/q.js" /> | |
| var json = Q.nfbind(d3.json); | |
| var result = []; | |
| var defer = Q.defer(); | |
| function getData(pageToken) { | |
| var pt = ''; | |
| if (pageToken) { | |
| pt = '&pageToken=' + pageToken; | |
| } | |
| json('https://www.googleapis.com/youtube/v3/search?part=snippet&channelId=UCgwM0kBBsDRMZDhhWuTNR-g&order=date&maxResults=50' + pt + '&key=' + youtube_apikey) | |
| .then(function (d) { | |
| result = result.concat(d.items); | |
| if (d.nextPageToken) { | |
| getData(d.nextPageToken); | |
| } else { | |
| defer.resolve(); | |
| } | |
| }); | |
| } | |
| getData(); | |
| defer.promise.then(function () { | |
| var videos = result.filter( | |
| function (e, i, a) { | |
| return e.id.kind == 'youtube#video'; | |
| }); | |
| var thumb = d3.select('#articles').selectAll('div') | |
| .data(videos) | |
| .enter() | |
| .append('div') | |
| .classed({ 'col-xs-6': true, 'col-md-3': true, 'col-lg-2': true }) | |
| .append('div') | |
| .classed('thumbnail', true) | |
| // .style('height', 'px') | |
| .style('overflow', 'auto'); | |
| thumb//.append('a') | |
| //.attr('href', function (d) { return 'https://www.youtube.com/watch?v=' + d.id.videoId; }) | |
| //.attr('target', '_blank') | |
| .append('img') | |
| .attr('src', function (d) { return d.snippet.thumbnails.high.url; }) | |
| .attr('alt', function (d) { return d.snippet.title; }); | |
| thumb.on('mouseenter', function (d) { | |
| var o = d3.select(this); | |
| var rect = o.node().getBoundingClientRect(); | |
| var p = d3.select('#playerObj'); | |
| player.setSize(rect.width, rect.height); | |
| p.style('width', rect.width + 'px') | |
| .style('height', rect.height + 'px') | |
| .style('left', (rect.left + window.scrollX) + 'px') | |
| .style('top', (rect.top + window.scrollY) + 'px') | |
| .style('display', 'block'); | |
| player.loadVideoById({ videoId: d.id.videoId }); | |
| d3.event.preventDefault(); | |
| }); | |
| //var cap = thumb | |
| //.append('div') | |
| //.classed('caption', true); | |
| //cap.append('h4').text(function (d) { return d.snippet.title; }); | |
| //cap.append('p').text(function (d) { return d.snippet.description; }); | |
| }); | |
| </script> | |
| </body> | |
| </html> |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment