Sujet Précédent Sujet Suivant

Vidéo qui change aléatoirement de position après lecture

Grapuslover - Modifié le 13 janv. 2020 à 23:23
cs_PaTaTe Messages postés 2107 Date d'inscription mercredi 21 août 2002 Statut Contributeur Dernière intervention 19 février 2021 - 6 févr. 2020 à 01:34
Bonjour,
je suis débutante en javascript, je veux créer une page où serait jouée aléatoirement une playlist youtube dans un player, et qu'à chaque changement de vidéo, le player bouge également aléatoirement de position dans la page.
Pour l'instant, j'ai réussi à lancer un player aléatoire, mais je ne sais pas trop quelle démarche suivre ne serait-ce que pour que le player bouge aléatoirement à un refresh de la page. J'ai essayé de changer les propriétés de l'id de la div du player en javascript (avec le code ci-dessous) mais ça ne marche pas. 
pos_x = Math.round(Math.random() * 400);
pos_y = Math.round(Math.random() * 400);

document.getElementById('player').style.left = pos_x;
document.getElementById('player').style.top = pos_y;


Mon code complet : 
var tag = document.createElement('script');

tag.src = "https://www.youtube.com/iframe_api";
var firstScriptTag = document.getElementsByTagName('script')[0];
firstScriptTag.parentNode.insertBefore(tag, firstScriptTag);

function rotateYT() {
    var videos = [
        '8x0XPpBRKUQ',
        'Q7b7YxxwVTI',
        '-8TpZgrjDEo',
        'ztXEZQTUl6M',
        'SXKScxZlgr4',
        'vVgbagF6ixk',
        'qbGow83qysg',
        'w_fZ13_6VOo',
        '51qQfzJHyms',
        'dWfiazwRkJs',
        '-bri8bn227A',
        '4HrAa5IjEHM',
        'q7d-L0jvs_U',
        'YypWJQJw-YQ',
        'xyaJkQ7sLkc',
    ];

    var index = Math.floor(Math.random() * videos.length);
    return videos[index];
}

var player;
function onYouTubeIframeAPIReady() {
    var videoID = rotateYT();
    player = new YT.Player('player', {
        height: '300',
        width: '300',
        videoId: videoID,
        events: {
            'onReady': onPlayerReady,
            'onStateChange': onPlayerStateChange
        }
    });
}
var player =
    document.getElementById('player')

pos_x = Math.round(Math.random() * 400);
pos_y = Math.round(Math.random() * 400);

document.getElementById('player').style.left = pos_x;
document.getElementById('player').style.top = pos_y;


function onPlayerReady(event) {
    player.setPlaybackRate(1);
    event.target.playVideo();
}

function onPlayerStateChange(event) {
    if (event.data === 0) {
       event.target.setShuffle(true); 
        event.target.loadVideoById(rotateYT());
        event.target.playVideo();

    }
}


et le html: 
<!DOCTYPE html><html><head>
    <script src="p5.js"></script>
    <script src="p5.sound.min.js"></script>
    <link rel="stylesheet" type="text/css" href="style.css">
    <meta charset="utf-8">
    <style>
       #player {
           margin-left: 20px;
       }


    </style>
</head>
  <body>
    <script src="sketch.js"></script>
           <div id="player"></div>
  

</body></html>

Merci d'avance !

1 réponse

Réponse 1 / 1
cs_PaTaTe Messages postés 2107 Date d'inscription mercredi 21 août 2002 Statut Contributeur Dernière intervention 19 février 2021 2
6 févr. 2020 à 01:34
Bonjour,

Pour que les positions left et top soient prises en compte, la position de l'élémént (ici player) doit être en absolute ou fixed. 

document.getElementById('player').style.position = 'absolute';


Cela devrait fonctionner :)

Cordialement,
0
Rejoignez-nous