Lecture de vidéo automatique

**Amnael** · 16/05/2016, 16h36

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 :

Sélectionner tout - Visualiser dans une fenêtre à part

<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 :

Sélectionner tout - Visualiser dans une fenêtre à part

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

**01001111** · 18/05/2016, 04h22

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

**Amnael** · 19/05/2016, 03h12

Salut, et merci beaucoup pour le lien.

J'ai donc essayé de tester ce petit morceau de code.

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

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 !

**01001111** · 19/05/2016, 04h39

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 html :

Sélectionner tout - Visualiser dans une fenêtre à part

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>

**Amnael** · 19/05/2016, 10h08

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

Merci beaucoup !

Lecture de vidéo automatique

JavaScript

Discussions similaires

Partager

Partager