[Web] Intégration twitch sur une page web
Salut,
Je suis en trin de réaliser un petit projet à la con et j'ai besoin de votre aide,
sur une simple page html j'ai inclus un stream twitch et son chat en utilisant des iframe :
<iframe height="378" width="620" frameborder="0" scrolling="no" src="http://www.twitch.tv/pseudoTwitch/embed"></iframe>
<iframe height="378" width="300" frameborder="0" scrolling="no" src="http://www.twitch.tv/pseudoTwitch/chat">
Je récupère également le status du stream pour savoir si il est en ligne en utilisant le script : https://github.com/Fugiman/Twitch-Channel-Status
Je viens donc vers vous pour savoir si il est possible d'intégrer le nombre de viewers d'un stream sur ma petite page web !
Merci d'avance
Beaucoup plus simple en faite :
https://bpaste.net/show/ced7268e66a0
Je sais pas quel lvl tu as alors si tu as des question hésites pas.
ha, et je sais pas si tu fais un site en casu ou si tu essayes d'acquérir des compétences dans le web.
Si c'est le 2eme cas je te conseil de mettre des id à tes iframes <iframe id="videoframe" src="http://www.twitch.tv/pseudoTwitch/chat">
Et dans le css
#videoframe {
height=378px;
width=300px;
border:none;
overflow:hidden;
}
Ça évite les erreurs w3c.
J'essai surtout d'acquérir des compétences dans le web, mon niveau laisse à désirer.
Merci pour le petit tuyau
Pas du tout, je suis plutôt habitué au C++ etc ... Quand je m'approche du web j'ai peur et j'ose pas regarder quand ca deviens trop complexe
Bah le petit bout de code que j'ai mis marche bien et tu récupère par mal d'autre info :
https://bpaste.net/show/21cff4fc3739
Bah je trouve que c'est à mort relou, par contre je connais pas grand chose à Javascript, moyens de m'expliquer vite fait comment marche le script ?
Alors déjà pour le script j'utilise jquery qui permet de simplifier grandement la syntaxe.(par exemple pour selectionner une div par l'id il suffit de faire $("#monId") plutot que document.getElementById("monId") )
je décompose le script :
$(document).ready(); permet d’exécuter la fonction passée en paramètre quand la page est chargée. (c'est important car si tous les éléments de la page ne sont pas chargé ça peut planté).
function(){
} c'est une fonction anonyme en js, c'est à dire, tu ne lui donne par de nom, c'est juste qu'elle est exécute direct (ici quand la page est chargé).
Plutôt qu'utiliser une fonction anonyme j'aurai pu faire comme ça :
$(document).ready(scriptNbrViewer);
function scriptNbrViewer() {
//Le code
}
$.ajax(); permet de faire un appel ajax, c'est à dire que tu demande au navigateur de chargé une page qui n'est pas sur ton site.
{
url : 'https://api.twitch.tv/kraken/channels/formuleoregon',
type : 'GET',
success:function(data) {
console.log(data);
$("#test").html(data.views);
}
}
Ce sont les paramètres de l'appel ajax en JSON, je les prends un part un
url : 'https://api.twitch.tv/kraken/channels/formuleoregon' C'est l'url que tu appeles avec ajax, tu remarquera que si tu l'ouvres dans ton navigateur tu auras du JSON qui s'affichera. l'appel ajax reçois exactement là même chose, du JSON
success: function(data) {
} signifie : "quand l'appel est un succes j’exécute la fonction suivante, ici, j'ai aussi fait une fonction anonyme.
Le paramètre data va être les données renvoyé par l'appel. il existe d'autre paramètres comme le status le message d'erreur etc (http://api.jquery.com/jquery.ajax/). Autre précision, je l'ai appelé data, mais j'aurai pu écrire "reponse", ou "mabite", c'est pareil c'est juste que le premier paramètre de cette fonction sera les données renvoyées par l'appel.
console.log(data); affiche dans la console du navigateur le json renvoyé (tu peux aller l'explorer avec la console c'est très pratique.
$("#test"); permet de sélectionner la div qui à l'id test
.html(texte); permet de remplir la div avec le texte.
data.views; permet de selectionner l'attribut views de l'objet JSON data.
Tu ne dois accéder à ce site que si tu as au moins 18 ans ou si tu as l'âge légal pour visionner ce type de matériel dans ta juridiction locale, l’âge le plus élevé étant retenu. En outre, tu déclares et garantis que tu ne permettras aucun mineur à d'accéder à ce site ou à ces services.
En accédant à ce site, tu acceptes nos conditions d'utilisation.