API YouTube - pas de tir 'onYouTubePlayerReady ()'
-
21-09-2019 - |
Question
D'après ce que j'ai lu, voici comment je configurer les API de YouTube:
<!DOCTYPE html>
<html lang="en">
<head>
<meta content='text/html;charset=UTF-8' http-equiv='content-type' />
<title>Youtube Player</title>
<script src="jquery.js" type="text/javascript"></script>
<script src="http://ajax.googleapis.com/ajax/libs/swfobject/2.2/swfobject.js" type="text/javascript"></script>
<script type="text/javascript" charset="utf-8">
function onYouTubePlayerReady(id) {
console.log("onYouTubePlayerReady() Fired!");
var player = $("#youtube_player").get(0);
}
var params = { allowScriptAccess: "always" };
var atts = { id: "youtube_player" };
swfobject.embedSWF("http://www.youtube.com/apiplayer?enablejsapi=1",
"youtube", "425", "356", "8", null, null, params, atts);
</script>
</head>
<body>
<div id="youtube"></div>
</body>
</html>
Cependant, 'onYouTubePlayerReady () ne se déclenche pas du tout, et si je reçois manuellement une référence au joueur, beaucoup de méthodes ne sont pas définis; par exemple, cueVideoById () fonctionne, mais playVideo () ne fonctionne pas.
Comment puis-je résoudre ce problème?
La solution
Vous devez être sur un serveur web avec votre script de test, comme indiqué dans le < strong> documentation :
Remarque:. Pour tester l'un de ces appels, vous devez avoir votre fichier en cours d'exécution sur un serveur web, comme le lecteur Flash restreint les appels entre les fichiers locaux et Internet
Autres conseils
cette fonction:
function onYouTubePlayerReady(playerid) {
console.log('readyIn');
};
ne doivent pas être directement en tête dans la balise de script distinct.
règle que vous devez garder est: ne mettez pas cette fonction à l'intérieur de l'événement domready - il doit être défini plus tôt
.Par exemple, dans Mootools Je l'utilise comme ceci:
function onYouTubePlayerReady(playerid) {
echo('readyIn');
};
document.addEvent('domready', function() {
...
});
J'ai la réponse, séparer cette partie du script et le mettre dans la tête dans sa propre balise de script. OMG, enfin
<script type="text/javascript" language="javascript">
function onYouTubePlayerReady(playerid) {
ytp = document.getElementById('ytplayer');
ytp.mute();
};
</script>
Je considère que ce la meilleure façon d'ajouter une vidéo sur youtube à votre site Web avec le javascript. Il vous donne une façon très claire de faire face aux événements. Il fonctionne sur une machine locale, et pour autant que je sais que cela fonctionne sur les appareils Apple. Vous pouvez utiliser tous les événements et les fonctions décrites dans la documentation javascript pour la api youtube.
<div id="player"></div>
<script>
//Load player api asynchronously.
var tag = document.createElement('script');
tag.src = "http://www.youtube.com/player_api";
var firstScriptTag = document.getElementsByTagName('script')[0];
firstScriptTag.parentNode.insertBefore(tag, firstScriptTag);
var done = false;
var player;
function onYouTubePlayerAPIReady() {
player = new YT.Player('player', {
height: '390',
width: '640',
videoId: 'JW5meKfy3fY',
events: {
'onReady': onPlayerReady,
'onStateChange': onPlayerStateChange
}
});
}
function onPlayerReady(evt) {
evt.target.playVideo();
}
function onPlayerStateChange(evt) {
if (evt.data == YT.PlayerState.PLAYING && !done) {
setTimeout(stopVideo, 6000);
done = true;
}
}
function stopVideo() {
player.stopVideo();
}
</script>
source: http://apiblog.youtube. com / 2011/01 / introduction-javascript-joueur-api-for.html
<!DOCTYPE html>
a dû mener la page pour que les choses html5 à fonctionner pour moi dans FF4
Si vous intégrez des vidéos sur youtube comme ceci:
<iframe src="http://www.youtube.com/embed/VIDEO_ID?jsapi=1" width="1280" height="720" frameborder="0" webkitAllowFullScreen mozallowfullscreen allowFullScreen></iframe>
vous devez placer
<script src="http://www.youtube.com/player_api"></script>
après la balise . Au moins, c'est comment je l'ai eu à travailler.
En outre, si vous changez de façon dynamique le [src] attribut du iframe via jQuery ou autre pour charger une nouvelle vidéo, vous devez appeler onYouTubePlayerAPIReady()
après avoir chargé.
Je préfère changer l'attribut [src] puis:
setTimeout(onYouTubePlayerAPIReady, 500);
Juste eu le même problème, mais pour une autre raison. Il a travaillé dans Chrome, mais pas Firefox, et la raison était que j'avais un en-tête http "Content-Type: text / xml" au lieu de "Content-Type: text / html". Au service HTML déclenche maintenant l'événement onYouTubePlayerReady dans Firefox, aussi.
affichage Juste ce cas, quelqu'un trébuche dans cette réponse de Google (comme je l'ai fait en essayant de trouver une solution).