Generating random numbers in JavaScript using the Math.random() method and incorporating them

Looking to display 2-3 .mp4 files randomly on each page load? Consider using JavaScript for this task. Here's a snippet of code that you can use as a starting point:


#vid {
    position: fixed;
    min-width: 100%;
    min-height: 100%;
    opacity: 1;
    width: auto;
    height: auto;
    z-index: -100;
    transform: translateX(-50%) translateY(-50%);
    background-size: cover;
    overflow: hidden;
    -webkit-filter: blur(15px);
    -moz-filter: blur(15px);
    -o-filter: blur(15px);
    -ms-filter: blur(15px);
    filter: blur(15px);
    background: #070915;
    background: rgba(7, 9, 21, .5);
    filter: brightness(62.5%);
    top: 50%;
    left: 50%;

Within the HTML markup, include the following video element with JavaScript for controlling playback:


<video autoplay class="fadeIn" disablePictureInPicture disableRemotePlayback id="vid" loop playsinline>
    <source src="assets/media/video1.mp4" type="video/mp4" />
    <source src="assets/media/video2.mp4" type="video/mp4" />
    
    <script type="text/javascript">
        const video = document.currentScript.parentElement;
        video.volume = 0.15;

        function pause_resume() {
            const button = document.getElementById("pause_resume_button");

            if (video.paused) {
                video.play()
                button.textContent = "resume video";
            } else {
                video.pause()
                button.textContent = "pause video";
            }
        }
    </script>
</video>

<div class="font-right-bottom animated fadeInUp">
    <a style="font-size:0.9em;" class="font-bold font-white" href="javascript:void(0);" onclick="pause_resume()" id="pause_resume_button">pause video</a>
    <p style="font-size: 0.9em;" class="font-light font-white no-margin">pog?</p>
    <br>
</div>

Answer №1

To enhance the video player functionality, I recommend organizing the sources into an array and using JavaScript to dynamically set the source of the video from one of the items in the array.


<video autoplay class="fadeIn" disablePictureInPicture disableRemotePlayback id="vid" loop playsinline>
      <script type="text/javascript">
        const video = document.currentScript.parentElement;
    
        const sources = ["assets/media/video1.mp4", "assets/media/video2.mp4"];
        const sourceIndex = Math.floor(Math.random() * sources.length);
        const source = document.createElement("source");
        source.setAttribute("src", sources[sourceIndex]);
        video.appendChild(source);
    
        video.volume = 0.15;

        function pause_resume() {
          const button = document.getElementById("pause_resume_button");

          if (video.paused) {
            video.play()
            button.textContent = "resume video";
          } else {
            video.pause()
            button.textContent = "pause video";
          }
        }
      </script>

</video>

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

Challenges with Vue and the <noscript> element

I recently deployed a vue app and everything seems to be functioning as expected. However, I encountered an issue when trying to view the page source in any browser - the actual content is not visible and instead, the body section starts with a message ins ...

What is the best way to align a div to the bottom of its container div in Bootstrap 5?

Within the Bootstrap 5 code snippet provided, there is a nested div with the ID "div-in-right-div" inside another div with the ID "right-div". Currently, "div-in-right-div" is aligned with the top of "right-div". The question arises: How can you adjust the ...

Show various columns in Select2

I am currently utilizing select2 and I am interested in displaying a multicolumn table as a dropdown. In order to achieve this, the width of the drop-down container should differ (be larger) than the input itself. Is it feasible to accomplish this? Furth ...

Is it possible to navigate to a different section of a webpage while also jumping to a specific id within that section seamlessly?

I'm trying to create a navbar link that will take me directly to a specific section of a page, but I'm having trouble getting it to work. Here's what I've tried: <a href="home#id" class="nav-link text on-hover"></a> Where ...

The issue with the class attribute being disregarded by Internet Explorer

Having trouble with a complex web page (JavaScript application) where an included style sheet has the following rule: .floatleft { float: left; margin-right: 10px; } There is a DIV element within that layout: <div class="floatleft" width="25%"> ...

Unable to locate a declaration file for the module "../constants/links" in src/constants/links.js, as it implicitly defaults to type 'any'

Within my VueJS application, I have brought in some constant variables. <script lang="ts"> import { Component, Prop, Vue } from 'vue-property-decorator' import { MOON_HOLDINGS_LINK, TWITTER_LINK } from '../constants/links' @Comp ...

Guide on hiding a div element when clicked outside of it?

How can I create a dropdown feature in Khan Academy where it disappears when clicked outside but stays visible when clicked inside, using JavaScript/CSS/HTML? The current implementation closes the dropdown even on internal clicks. The code includes an even ...

Using Mongoose to insert a JavaScript object directly into the database

Recently, I've been working on POSTing a JS object through AJAX to the nodejs backend. My goal is to seamlessly insert this js object into my mongoose db without having to manually map each key to the schema. This is what I have currently (a bit clun ...

No matter what I do, I can't seem to stop refreshing the page. I've attempted to prevent default, stop propagation, and even tried using

Below is the code I have written for a login page: import { useState } from "react"; import IsEmail from "isemail"; import { useRouter } from "next/router"; import m from "../library/magic-client"; import { useEffect ...

Creative Blueprint

Our company currently operates 3 browser based games with a team of just 4-5 coders. We are looking to enhance the collaboration within our coding team and streamline our processes. Considering the fact that our games are built using a mix of html, php, j ...

Dollar Sign vs "$$()" Sparkling Protractor with "by.css()" vs "$()"

I'm a bit confused about the purposes of the $ and $$ commands. I initially thought they were just substitutes for 'by.css', but why use $$? <element id = "eId"></element> Based on the example above, I assumed that these two l ...

Enhancing Next.js Images with Custom CSS Styles

I am working with a Next.js component: import styles from '../styles/Navbar.module.css' import Image from 'next/image' export const Navbar = () => { <div> <Image className={styles["navbar-home-icon"]} ...

Tips for efficiently importing a file or folder that is valuable but not currently in use

I'm struggling to find any information about this particular case online. Perhaps someone here might have some insight. I keep getting a warning message saying 'FournisseursDb' is defined but never used no-unused-vars when I try to import t ...

Issue found in Bootstrap-Multiselect plugin: The dropdown menu appears beneath the outer container when overflow-y is applied

My experience with using Bootstrap-Multiselect and encountering an issue where the dropdown disappears when the outer container has overflow-y: scroll and a max-height has prompted me to seek solutions. I am looking for a way to ensure that the dropdown is ...

Utilize the class names to assign a distinctive color using mixins in SCSS

I am diving into the world of Sass and I have a peculiar challenge. I want to create a class that allows me to set a color using percentages for red, green, and blue values. For example, the class name color-50-10-60 would represent 50% red, 10% green, a ...

The justify-content-center class in the latest version of Bootstrap (v4.5) appears to be malfunction

I'm currently working on creating a responsive contact section for a website I'm developing for a small local company. Unfortunately, the icons in their container are not being centered despite using the justify-content-center class from Bootstra ...

What could be causing CSS to fail in rendering on Chrome while functioning properly in Eclipse?

I am currently facing an issue with my application where CSS is rendering correctly inside Eclipse but not in the Chrome browser when using JSF for the front end. I have included the CSS file in JSF as shown below. Can anyone help me identify the problem ...

Arrange the JSON object according to the date value

I am working on a JavaScript project that involves objects. Object {HIDDEN ID: "06/03/2014", HIDDEN ID: "21/01/2014"} My goal is to create a new object where the dates are sorted in descending order. Here's an example of what I want: SortedObject ...

Impact items without the need to individually assign a class to each item

Apologies if this question has already been answered elsewhere...I have been unable to find the solution, perhaps due to my lack of knowledge on how to phrase it. I am attempting to modify list items by setting a class for the ul, eliminating the need to ...

Updating Cart Array in Angular 4 when Adding a New Item

I'm currently using angular 4 and I have encountered an issue in the code where adding a new product to the cart overwrites the existing item instead of appending it to the array. Here is a screenshot illustrating the problem cart.service.ts export ...