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

Signaler
-
Messages postés
2075
Date d'inscription
mercredi 21 août 2002
Statut
Contributeur
Dernière intervention
16 mars 2020
-
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

Messages postés
2075
Date d'inscription
mercredi 21 août 2002
Statut
Contributeur
Dernière intervention
16 mars 2020
2
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,