I am currently working on a project that involves assigning specific videos to 6 roll buttons for continuous play. For instance, I want the first roll button to display a yellow dice and the second button to show a blue dice, and so on.
As of now, I have successfully created the 6 buttons, but when clicked, they play the videos randomly. I attempted to remove the math.random function, but this resulted in blank videos. I am unsure of the best approach to take in this situation.
Below is the code snippet I have been working on:
<html>
<head>
<link rel="stylesheet" type="text/css" href="style.css" title="Default Styles"/>
<script>
// Arrays for different categories of text
var r_text = new Array();
// Add more arrays here...
// Array of video objects with URL and associated text
var videos = [{
id: 1,
url: "http://example.com/video1.mp4",
text: function(){
return r_text[Math.floor(r_text.length*Math.random())];
}
},
// Add more video objects here...
];
// Function to display and play a video based on button click
function rollVideo(numberRand) {
// Your code to display video based on user selection...
}
// Event listeners for each roll button
document.getElementById("btn-roll").addEventListener("click", startRoll);
// Add event listeners for other buttons...
// Function to initiate video rolling on button click
function startRoll() {
let currentNumber = Math.floor(Math.random() * videos.length);
rollVideo(currentNumber);
}
</script>
</head>
// Your HTML code for buttons, video display, and text area goes here...
</html>