Lecture de vidéo automatique

Version imprimable

16/05/2016, 16h36
Amnael

Lecture de vidéo automatique
Bonsoir à tous,

j'aimerais un petit coup de main sur la chose suivante.

J'aimerais faire une page dans laquelle se lirait automatiquement des vidéos youtube.

Donc coté html j'aurais ceci

Code:

<iframe src="//www.youtube.com/embed/LRLdhFVzqt4?rel=0&autoplay=1" frameborder="0" allowfullscreen="allowfullscreen" style="width: 560px; height: 315px;" id="lecteurAuto"></iframe>

Si je place ça dans une page, la vidéo commencera automatiquement et va se jouer.

Maintenant, j'aimerais utiliser un script js pour lancer une autre vidéo lorsque la vidéo courante se termine.

Je sais que l'on peut modifier les attribut en js, de ce coté là pas de soucis, donc en fait je pourrais très bien le faire à l'heure actuelle au rechargement de la page par exemple, mais ce que je voudrais faire c'est arriver à détecter la fin de la vidéo pour effectuer ce changement.

J'ai essayé ceci pour essayer de détecter la fin d'une vidéo, mais sans succès
Code:

1 2 3 4 5 6 7 8 <script type="text/javascript"> $(function () { $("#lecteurAuto").bind("ended", function() { alert("Fin"); }); }); </script>
Merci pour le coup de main :)
18/05/2016, 04h22
01001111

Si un peu de lecture en anglais ne te fait pas peur, la réponse est ici:
http://stackoverflow.com/questions/7...nishes-playing

Salut, et merci beaucoup pour le lien.

J'ai donc essayé de tester ce petit morceau de code.
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 <div id="player"></div> <script src="http://www.youtube.com/player_api"></script> <script> // create youtube player var player; function onYouTubePlayerAPIReady() { var t=Math.floor(Math.random()*2); if(t==0){ Id='0Bmhjf0rKe8'; }else{ Id= 'U2eWoiHcVHs'; } player = new YT.Player('player', { height: '390', width: '640', videoId:Id, events: { 'onReady': onPlayerReady, 'onStateChange': onPlayerStateChange } }); } // autoplay video function onPlayerReady(event) { event.target.playVideo(); } // when video ends function onPlayerStateChange(event) { if(event.data === 0) { onYouTubePlayerAPIReady(); } } </script>
La vidéo part bien de façon automatique et aléatoire sur une des deux vidéos proposés.
La fin est bien détectée; en revanche lorsque je veux appeler de nouveau la fonction onYouTubePlayerAPIReady() pour "recharger le player avec une nouvelle vidéo, rien ne se passe.

J'imagine que j'ai fais une erreur bête, mais n'ayant pas vraiment de connaissances solides en js, je ne la vois pas...

La solution toute bête serait de forcer l'actualisation de la page, mais je veux pas imposer ça à l'utilisateur, reste la solution avec ajax pour recharger sans que l'utilisateur s'en aperçoivent, mais je ne pense pas que mon hébergeur pourra supporter de l'ajax...bref, si vous voyez une solution quelle quelle soit, je suis preneur^^

Merci encore !

Cela vient du fait que youtube remplace le div d'id player par une iframe est se retrouve incapable bizarrement de modifier sa propre iframe du coup.

Essaie ainsi avec un conteneur, (testé et fonctionne)

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
47
48
49
50
51
52
53
54
55
56
57
58
59
 
<html>
<head>
<meta charset="utf-8"/>
<title>Youtube</title>
<style type="text/css">
</style>
</head>
<body>
<div id="player_container"></div>
 
<script src="http://www.youtube.com/player_api"></script>
 
<script>
 
        // create youtube player
        var player;
        var t=0;
        function onYouTubePlayerAPIReady() {
                if (t%2===0) {
                        Id='0Bmhjf0rKe8';
                } else {
                        Id='U2eWoiHcVHs';
                }
                t++;
                if (document.getElementById("player")) {
                        document.getElementById("player_container").removeChild(document.getElementById("player"));
                }
                var div=document.createElement("div");
                div.id="player";
                document.getElementById("player_container").appendChild(div);
                player = new YT.Player('player', {
                        height: '390',
                        width: '640',
                        videoId:Id,
                        events: {
                        'onReady': onPlayerReady,
                        'onStateChange': onPlayerStateChange
                        }
                });
        }
 
        // autoplay video
        function onPlayerReady(event) {
                event.target.playVideo();
        }
 
        // when video ends
        function onPlayerStateChange(event) {
                console.log(event);      
                if(event.data === 0) {           
                        onYouTubePlayerAPIReady();
                }
        }
 
</script>
 
</body>
</html>

19/05/2016, 10h08
Amnael

Super ça fonctionne comme sur des roulettes de cette façon ;)

Merci beaucoup !