What is the best way to link the roll button to a specific video URL?

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>

Answer №1

To achieve the desired functionality, simply incorporate an `if-else` statement into your code. In the `startRoll` function, you can retrieve the `id` of the clicked button and proceed with your desired actions based on that information. Assigning a specific number to each button will determine which video is displayed. While there may be more optimal methods to accomplish this task, this approach should suffice for your current needs. I hope this explanation proves helpful.

Check out the jsfiddle example here: https://jsfiddle.net/321hdwrk/2/

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

Is it possible to implement sticky sessions with Node.js and pm2?

Can sticky sessions be implemented using the pm2 node module? Although not supported by Node.js's internal cluster module on purpose, it could still prove beneficial in scenarios like paused media streams. ...

Struggling to Align Banner in Dynamic Layout

I am currently working on centering the banner image as the resolution size decreases, rather than having it pushed to the right. The specific page I am addressing can be found here. My approach involves utilizing a width of 100%. <!-- BEGIN T ...

Display Information in Tooltip Using Text from a Different Source

I'm seeking a way to create tooltips on a webpage that provide definitions for specific words. However, these definitions are located on a separate page within the same website. Is it possible for me to extract the text I need to display in the toolti ...

How can I iterate through each element of MySelector in the callback function of jquery-ui's draggable function?

When using: jQuery(MySelector).dragabble( start: function( e, ui ) { } ) In the start function: The start event provides $(this) with the current dragged element from MySelector. How can I loop through each element in MySelector to apply additional code ...

Alignment vertically in a Razor view

Here is a snippet of code I am working with: <p> @Html.LabelFor(m => m.address, new { style="vertical-align: middle;" }) @Html.TextAreaFor(m => m.address, new { @class = "addition ", value = "",rows="4", required = "required" }) </p> A ...

Which is the superior choice: Classic Ajax or jQuery Ajax?

I have a question about using AJAX. I'm stuck between choosing traditional AJAX and jQuery AJAX. When I use jQuery AJAX, sometimes it behaves strangely in Internet Explorer. This is surprising to me because jQuery is supposed to be a cross-browser lib ...

How can I customize a CSS media class?

In my project, I am using a CSS library that includes the following class: @media only screen and (max-width: 480px) { .nav-tabs>li { margin-bottom:3px; } .nav-tabs>li, .nav-tabs>li>a { display:block !important; ...

What is the process of using the split() method to extract specific text from a string in JavaScript?

Working with AngularJS and facing a requirement to extract a specific text from a scope value. Here's my scope value: $scope.myLogMsg = '1111 order is placed by Sukumar Ms(User)'; //output: by Sukumar Ms(User) Desired output: by Sukumar Ms ...

Adjust the sizing of all fonts following the switch in font styles

Seeking help for adjusting font-size across a responsive web page design using different font families. font-family:Cambria, "Hoefler Text", "Liberation Serif", Times, "Times New Roman", serif; To achieve responsiveness, various media queries were applie ...

Ways to identify when all images have been loaded during a dynamic page load

I am trying to load a page with images into a div element. I need to find out when all the images on that dynamically added page have finished loading. $("#main").load('imagespage.php', function(){ alert("Page loaded"); }); The problem is that ...

Comparison of Grant and Passport.js: Which One to Choose?

Are you unsure about the distinctions between Grant and Passport.js? How do you decide when to utilize Grant over passport.js, and vice versa? If your goal is to create a social media platform that tracks user activities and posts them on a news feed, whi ...

Working with arrays and data to populate tables and cross tables using a single Eloquent Model in Vue and Laravel

There are three tables in the database: species, panel, and a cross table called species_panel. The relationship between them is that one panel can contain multiple species, so a one-to-many relationship is used. Data needs to be inserted into the panel ta ...

Compile a roster of service providers specializing in unit testing imports

Recently joining a new team that works with Angular, they asked me to implement unit testing on an existing project built with Angular 8. After researching the best approach, I decided to use Karma + Jasmine for testing. I set up a .spect.ts file structure ...

Pass data in JSON format from Laravel controller to AngularJS

When working with Laravel, I successfully converted data in MySQL to JSON for use in AngularJS. However, I am now unsure of how to effectively utilize these values in AngularJS. Can anyone offer assistance? View output data (hide each value) https://i.ss ...

What is the best way to convert a document.getElementById(id) element into a jQuery object?

It's surprising that no one has asked this question before: When I create elements using the following code: document.getElementById(id).innerHTML = (a string with id's in it); for example. I want to use jQuery to update the CSS of these dynam ...

Interactive Javascript Dropdown Selection

I'm currently developing a registration page for a website and I've added a drop-down box that explains to users why we need their birthday. However, I seem to be having issues with my code. Take a look at the script below: <script language=& ...

Removing items in vue.js

I'm currently in the process of learning Vue.js. This is my first attempt at creating a small to-do application, and I am encountering issues with deleting each individual task upon clicking. Despite watching multiple YouTube tutorials, I have not bee ...

"Enhancing the appearance of sorted divs using CSS3 animations in jQuery

Looking to enhance the sorting functionality of divs using jQuery by incorporating CSS3 transition animations for smoother transitions. Encountering an issue where the CSS3 transition animation is not functioning as expected, currently investigating the r ...

Issue: Unauthorized access: nodeMailer despite correct configuration

Having trouble with an error when using the less app option on Gmail. I don't have 2-factor authentication enabled, and my credentials are correct. I can log in to my file to verify this, but the error still persists. const nodemailer = require(" ...

The curious behavior of $viewContentLoaded in Angular

For my jQuery code, I wanted it to run immediately after the template view was loaded and the DOM was modified. To achieve this, I initially used the $viewContentLoaded event in my controller. $scope.$on('$viewContentLoaded', function(){ // ...