Youtube: Event de fin de vidéo ?

Version imprimable

Bonjour tout le monde.

Et bien voila, pour la petite histoire, je suis en train de faire un petit plugin greasemonkey pour Youtube, qui doit ajouter un bouton "Lire après", permettant de faire une "playlist instantanée" temporaire.

Très pratique pour les soirée, par exemple, lorsque l'on veux ecouter quelques musiques les unes après les autres, sans être devant son pc pour changer entre chaque musique, et sans créer un playlist juste pour ça.

Bref, j'ai déjà pas mal avancé, la playlist est déjà créer dans un objet javascript.

Là ou j'ai un problème, c'est que je n'arrive pas à capter la fin de la vidéo sur le lecteur youtube (sur youtube.com, et non pas intégrée dans un site), et donc je ne connais pas le moment ou changer la vidéo.

En cherchant à droite à gauche j'ai crus comprendre qu'il y aurait un événement "onStateChange", mais je n'arrive pas a trouver où, et donc encore moins à m'en servir ^^

Bref si quelqu'un pourrait me filer un petit coup de main pour ça, ce serait super; sachant que j'arrive déjà a récupéré le div contener de la vidéo, ainsi que l'object même de la vidéo.

Afin de ne pas rien mettre, je vous passe ce que j'ai déjà essayé de faire à ce niveau:
Code:

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 $(window).load(function(){ // #warch7-player : div contener de l'object flash player $("#watch7-player").on("click focus change hover", function(){ alert(0); //marche pas !? } //console.log(window.yt.player.ytPlayeronStateChangeplayer1); // #movie_player : object flash player $("#movie_player").bind("onStateChange", function(){ alert(1); // marche pas non plus :( }); $("#movie_player")[0].playVideo() // Ca sa fonctionne, sa lance la vidéo sur youtube. console.log($("#movie_player")[0].onStateChange) // undefined !??? :'( });
J'utilise plutôt pas mal de jQuery, mais ça me va très bien si c'est en javascript pur :)

Merci beaucoup par avance = )

Ah ! Alors, un peu d'avancement:

j'arrive à faire ce que je veux, mais seulement dans la console firefox :/

Code:

1
2
3
4
5
6
7
8
9
10
11
function test(newState) {
   console.log(newState)
}
 
setTimeout(function(){
	console.log(document.getElementById("movie_player"));
	player = document.getElementById("movie_player");
 
	player.addEventListener("onStateChange", "test");
 
},5000);

Lorsque je place ce code dans la console firebug, ça fonctionne bien, j'ai un console.log du Statement a chaque pause/lecture/stop etc...

Par contre, lorsque je le met dans mon script greasemonkey, ça ne marche plus :/

Quelqu'un saurait pourquoi ? ^^'

Voici mon script complet:

Code:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
// ==UserScript==
// @name           Youtube PlayNext
// @namespace      YOUTUBEPLAYNEXT
// @description    Ajout d'un bouton "Lire à la suite" pour la gestion d'une playlist instantnée
// @include        http://www.youtube.com/watch*
// @include        https://www.youtube.com/watch*
// @require 	   http://ajax.googleapis.com/ajax/libs/jquery/1.9.0/jquery.min.js
// ==/UserScript==
 
$(document).ready(function(){
 
	sessionStorage.init = 0;
 
	var playlist;
 
	if(!sessionStorage || !("init" in sessionStorage) || sessionStorage.init!=1){
		sessionStorage.init=1;
		sessionStorage.playList = [];
		playlist = new Array();
	} else {
		playlist = sessionStorage.playList;
	}
 
	$("#watch7-secondary-actions").append('<span><button class="yt-uix-button yt-uix-tooltip read-after" role="button" title="Play after"><span class="yt-uix-button-content"><img src="http://hacker-law.net/multimedia/images/general/youtube-add.png" /></span></button></span>');
 
	$("#watch7-secondary-actions button.read-after").on("click", function(){
		playlist.push(document.location.href);
		sessionStorage.playList = playlist;
		console.log(sessionStorage.playList);
 
		return false;
	});
 
});
 
function test(newState) {
   console.log(newState)
}
 
setTimeout(function(){
	console.log(document.getElementById("movie_player"));
	player = document.getElementById("movie_player");
 
	player.addEventListener("onStateChange", "test");
 
},5000);

Merci :)

06/02/2013, 17h22
Bovino

Ce serait plutôt

Code:

player.addEventListener("onStateChange", test);

non ? :?
06/02/2013, 18h27
xxkirastarothxx

Apparemment non:

Quand je test dans mon script, rien de plus qu'avant,
et quand je test dans ma console, ça ne marche plus si je ne met pas "test" entre guillement.

Hey salut !

Bon alors un peu de nouveau:

Déjà pour commencé, je me suis apperçu que le $(window).load(); s'éxecutait plusieurs fois, d'ou un certain conflit.
Je ne sais pas trop pourquoi d'ailleurs, mais du coup, j'ai donc remplacé $(window).load(function(){[...]}) par window.onload = function(){[...]}
Cela à bien réglé le problème, et window.load ne s’exécute bien qu'une seule fois.

Mais bon, ça marche toujours pas :'(

J'ai continuer à faire des tests à droite à gauche, et j'ai fini par comprendre que c'est la fonction "test" que le script ne trouve pas, je m'explique:

lorsque le plugin est actif, je lance une vidéo youtube; lorsque je clic sur pause par exemple, rien ne se passe.
Par contre si dans la console firebug j'execute simplement "function test(event){console.log(event)}" La ça fonctionne.

Ce qui veut dire que mon addEventListener fonctionne bien, et qu'il ajoute bien la fonction test; mais celle ci est introuvable lors de son exécution.
Auriez vous une idée de pourquoi ?

Sinon, est-ce possible de faire un addEventListener avec une fonction anonyme qui prendrait un parametre, du genre

Code:

elem.addEventListener("onStateChange", function($event){console.log($event)});

Voici mon code actuel:
Code:

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 // ==UserScript== // @name Youtube PlayNext // @namespace YOUTUBEPLAYNEXT // @description Ajout d'un bouton "Lire à la suite" pour la gestion d'une playlist instantnée // @include http://www.youtube.com/watch* // @include https://www.youtube.com/watch* // @require http://ajax.googleapis.com/ajax/libs/jquery/1.9.0/jquery.min.js // ==/UserScript== window.onload = function(){ sessionStorage.init = 0; var playlist; if(!sessionStorage || !("init" in sessionStorage) || sessionStorage.init!=1){ sessionStorage.init=1; sessionStorage.playList = []; playlist = new Array(); } else { playlist = sessionStorage.playList; } $("#watch7-secondary-actions").append('<span><button class="yt-uix-button yt-uix-tooltip read-after" role="button" title="Play after"><span class="yt-uix-button-content"><img src="http://hacker-law.net/multimedia/images/general/youtube-add.png" /></span></button></span>'); $("#watch7-secondary-actions button.read-after").on("click", function(){ playlist.push(document.location.href); sessionStorage.playList = playlist; console.log(sessionStorage.playList); return false; }); var test = function(newState){ console.log(newState) } player = document.getElementById("movie_player"); console.log(player); player.addEventListener("onStateChange", "test"); }
Pour précision, j'ai essayé de mettre la fonction "test", avant, dans et après le onload, mais ça n'a rien changé.
J'ai également essayé de décalarer la fonction en faisant

Code:

test = function(event){[...]}

et

Code:

function test(event){[...]}

mais rien aucune différence :'(

Dernière précision:
Effectivement, lorsque je fais un console.log(test); dans ma console firebug, j'ai un retour d'erreur:

Code:

ReferenceError: test is not defined

Je continue de chercher de mon coté,
Merci.