[jQuery] [Youtube Api Data V3] Problème avec la récupération des donnés d'une recherche youtube.
Posté : 05 sept. 2017, 21:29
Bonjour,
Je souhaite créer une page web qui permet d'afficher les résultats d'une recherche youtube à partir d'un mot clé. Le problème est que lorsque que j'entre le mot clé et que le lance la requête, il ne se passe rien : aucun résultats affiché et aucune erreur dans la console alors que l'ai codé. Voici le code :
Ficher index.html
Fichier style.css (c'est au cas ou mais je pense qu'il ne sert à rien)
Fichier script.js (qui contient la function de requête vers youtube)
Merci à l'avance pour votre aide.
Cordialement
Je souhaite créer une page web qui permet d'afficher les résultats d'une recherche youtube à partir d'un mot clé. Le problème est que lorsque que j'entre le mot clé et que le lance la requête, il ne se passe rien : aucun résultats affiché et aucune erreur dans la console alors que l'ai codé. Voici le code :
Ficher index.html
Code : Tout sélectionner
<!DOCTYPE html>
<html>
<head>
<title>SearchVideo</title>
<link rel="stylesheet" href="css/style.css">
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<script src="js/script.js"></script>
</head>
<body>
<div id="container">
<header>
<h1>Search<span>Video</span></h1>
<p>Search all youtube video</p>
</header>
<section>
<form id="search-form" name="search-form" onsubmit="event.preventDefault(); return search();">
<div class="fieldcontainer">
<input type="search" id="query" class="search-field" placeholder="Search YouTube...">
<input type="submit" name="search-btn" id="search-btn" value="">
</div>
</form>
<ul id="results"></ul>
<div id="buttons"></div>
</section>
<footer>
<p>Copyright © 2017 All Rights Reserved</p>
</footer>
</div>
</body>
</html>
Fichier style.css (c'est au cas ou mais je pense qu'il ne sert à rien)
Code : Tout sélectionner
*{
padding:0;
margin:0;
}
body{
font-family:"Segoue", sans-serif;
line-height:1.6em;
color:#666;
background:#e1e1e1 url(../img/creampaper.jpg);
font-size:14px;
}
a{
color:#333;
text-decoration:none;
}
#container{
width:740px;
background:#fff;
margin:auto;
}
.clearfix{
clear: both;
}
header{
padding: 30px 20px;
background: #f4f4f4;
}
header hl{
color: #000;
margin-bottom:5px;
}
header span{
color:#dd2826;
}
section{
padding:30px 20px 20px 20px
}
footer{
padding:20px;
background: #f4f4f4;
text-align: center
}
#search-form{
display: block;
margin-bottom: 15px;
}
.fieldcontainer{
display: block;
position: relative;
width: 90%;
margin: 0 auto;
}
.search-field{
-moz-box-sizing: border-box;
-webkit-box-sizing: border-box;
box-sizing: border-box;
display: block;
width: 45%;
padding: 11px 7px;
padding-right: 43px;
background: #fff;
color: #000000;
border: 1px solid #c8c8c8;
font-size: 1.6em;
border-bottom-color: #d2e2e7;
-moz-border-radius: 1px;
-webkit-border-radius: 1px;
border-radius: 1px;
-moz-box-shadow:inset 0 1px 2px rgb(0,0,0,0.1), 0 0 0 6px #f0f0f0;
-webkit-box-shadow:inset 0 1px 2px rgb(0,0,0,0.1), 0 0 0 6px #f0f0f0;
box-shadow:inset 0 1px 2px rgb(0,0,0,0.1), 0 0 0 6px #f0f0f0;
}
#search-btn{
position:absolute;
background:url(../img/search.png) top left no-repeat;
background-size: 100% 100%;
right:360px;
top:5px;
height:35px;
width:35px;
border:0;
cursor:pointer;
zoom:1;
filter:alpha(opacity=65);
opacity:0.65;
}
#search-btn:hover{
filter: alpha(opacity=90);
opacity: 0.9;
}
Fichier script.js (qui contient la function de requête vers youtube)
Code : Tout sélectionner
//Searchbar Handler
$(function(){
var searchField = $('#query');
var icon = ('#search-btn');
// Focus Event Handler
$(searchField).on('focus',function(){
$(this).animate({
width:'100%'
}, 400);
$(icon).animate({
right:'10px'
}, 400);
});
//Blur Evend Handler
$(searchField).on('blur', function(){
if(searchField.val() == ''){
$(searchField).animate({
width:'45%'
}, 400, function(){});
$(icon).animate({
right:'360px'
}, 400, function(){});
}
})
});
function search(){
// clear Results
$('#results').html('');
$('#buttons').html('');
//Get Form Input
q = $('#query').val();
// Run GET Request on API
$.get(
"https://www.googleapis.com/youtube/v3/search",{
part: 'snippet, id',
q: q,
type: 'video',
key: 'AIzaSyAvwn7gqVOb0XTJFsJg2PKQEBgk3VJ-JHc'},
function(data){
var nextPageToken = data.nextPageToken;
var prevPageToken = data.prevPageToken;
console.log(data);
$.each(data.items, function(i, items){
var output = getOutput(items);
// Display Result
$('#results').append(output);
});
}
);
}
// Build Output
function getOutput(items) {
var videoId = items.id.videoId
var title = items.snippet.title;
var description = items.snippet.description;
var thumb = items.snippet.thumbnails.high.url;
var ChannelTitle = items.snippet.ChannelTitle;
var videoDate = items.snippet.publishedAt;
// Build Output String
var output = '<li>' +
'<div class="list-left">' +
'<img scr="'+thumb+'">' +
'<div/>' +
'<div class="list-right">' +
'<h3>'+title+'</h3>'
'<small>By <span class="cTtitle">'+ChannelTitle+'</span> on '+videoDate+'<small>'+
'<p>'+description+'</p>'+
'</div>' +
'</li>' +
'<div class="clearfix"></div>' +
'';
return output;
}
Cordialement