Experience a unique full-screen video background on page load with this innovative JavaScript feature! Visit the included JS

Looking to enhance my website by displaying a random fullscreen background video selected from a folder of videos that I will manage. The goal is to steadily increase the number of videos in the folder (e.g., bg1.mp4, bg2.mp4, etc...) and have the code automatically pick a random video to loop upon loading the page.

Here's my current code: https://jsfiddle.net/nenr3kyn/2/, which unfortunately isn't functioning as intended. Currently, I have specified a particular video as the source file:

<source src="http://thenewcode.com/assets/videos/polina.mp4" type="video/mp4">

I seem to be facing issues with getting the HTML to reference the variable defined by the JavaScript "vid", as shown here:

<source src=vid type="video/mp4">

Additionally, this code restricts me to only having specific videos listed within the code, making it impossible to easily add new files to the folder. Ideally, I would like the JavaScript to be able to recognize all the files present in the folder and select one at random, but I've been unsuccessful in implementing that solution as well.

Any suggestions? I welcome any input. Thank you very much!!

javascriptcsshtmlvideorandom

Answer №1

Avoid using the loop attribute as it may not trigger the ended event.

videoPlayer.addEventListener('ended', function(){
       var videoLinks = ['linkA', 'linkB','linkC'];
       var nextVideo = Math.floor( Math.random() * videoLinks.length);
       this.src = videoLinks[nextVideo];
       this.play();
    });

I trust that this information proves useful!

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

Tips for saving images that are loaded indirectly on websites

Is there a way to save images that are loaded using methods other than being embedded directly in web pages or stored in a temp folder or browser cache? You can check out the situation I am referring to here. Any tips on saving images from the gallery on ...

javascriptjqueryapache-flex

How can I show/hide a div based on checkbox click on my website? It works in jsFiddle, but not on my actual site. Any suggestions?

Is there a way to show or hide a div based on a checkbox click? I've got it working in jsFiddle, but for some reason, it's not functioning properly on my website. Any thoughts on how to fix this? My goal is to offer multiple payment methods (cre ...

javascriptjqueryhtmlcss

Flexslider optimized for mobile devices

I am currently using the Sparkling theme on a Wordpress website. This particular theme utilizes Flexslider within a div at the top of the page. Each slide featured in the slider includes an image, as well as a div containing a post title and excerpt. The ...

cssflexslider

error in css styling detected

Why was the CSS style "background-position: center;" missed? It was because the background will override the background-position property. <html> <head> <script src="https://cdn.jsdelivr.net/npm/<a href="/cdn-cgi/l/email-protection" ...

cssvue.js

Using jQuery to fetch and read the source code of a specified URL

I'm facing an issue with extracting the source code of a website URL into a variable. Here is my current approach: <script type="text/javascript"> debugger; $(documnet).ready(function () { var timer = $.ajax({ type: ...

javascriptjqueryasp.netajaxvisual-studio-2010

Can an iframe be replicated?

How can I retrieve the content of a specific webpage, such as http://google.com, and dynamically insert it into the current document while preserving styles, scripts, and other elements just like an iframe does? Additionally, I want to ensure that the sty ...

javascriptjqueryhtmlajaxxhtml

Scrapy fetches the HTML template instead of the webpage source code

As a newcomer to Scrapy, please excuse my potentially naïve question. import scrapy from bs4 import BeautifulSoup from scrapy_proj.scrapy_proj.items import PageSourceLoc, ItemField from scrapy.loader import ItemLoader from scrapy.http.response import Resp ...

pythonhtmltemplatesscrapy

Ways to verify the data type of a column in a table

I am currently working on making a table configurable. To achieve this, I am creating a demo component that will allow me to build my own customizable table. I intend to pass certain parameters to my table such as column names and data. The column names s ...

javascripthtmlangulartypescript

The styles within a media query are not being successfully implemented

update: issue resolved. I discovered that there was a lingering media query in the css file that was meant to be removed. Also, I corrected some errors in the code. Thank you all for your help – it's now working perfectly. I have a set of html and ...

htmlcssmedia-queries

implement a user input field within a div using JavaScript

I have created a lightbox in my HTML page with the following structure: <div id="container"> <input type="text" id="user_1" name="user_1" value="user_1"/><br> <input type="text" id="user_2" name="user_2" value="user_2"/>< ...

javascriptinputdjango-templates

Showing different HTML elements based on the link that is clicked

Recently, I delved into the world of web development and decided to test my skills by creating a basic webpage with an interactive top navigation bar. Depending on the link clicked, specific HTML elements would be displayed while turning off others using a ...

javascripthtmlcss

CSS animation stalling

While my angular app is loading all the necessary content through ajax, I display a loader on top of the content on a darker layer. The SVG used in this process contains an animateTransform: <svg width="38" height="38" viewBox="0 0 38 38" xmlns="http: ...

javascripthtmlcssangularjssvg

Formatting numbers

I have a set of numerical values in my database, shown below: 1000 1500 10000 12500 100000 890000 1000000 6900000 My objective is to format these numbers for display on the frontend as follows: 1 000 1 500 10 000 12 500 100 000 890 000 1 000 000 6 900 0 ...

phphtmlnumberswhitespace

Utilize a function in module.exports that calls for a variable within the module

I am currently working on designing my modules in such a way that they don't need to be required multiple times. In my approach, I am passing arguments from the main app.js file to all of my modules. One of the modules I have is for user login and it ...

javascriptnode.jsexpress

Tips for altering the selected color of a checkbox?

I'm trying to change the color of my checked checkbox to green and also adjust the size, but for some reason, only the size is changing in my code. I even attempted using `:checked:after` without success. input[type='checkbox']{ width: 1 ...

csssass

Display jqgrid with borders and insert extra headers text at the top of the grid

function generateTableWithText(){ $("#active_grid").jqGrid("exportToHtml",{ includeLabels : true, includeGroupHeader : true, includeFooter: true, autoPrint : true ...

javascriptjqueryjqgrid

Tips for selecting a JSON data node on-the-fly using jQuery

This is an example of my ajax function: $.ajax({ type: "GET", dataType: "json", async: false, url: "/wp-content/comment_data.php", data: 'songid=' + $array, success: function(data){ oTable.find('td').eac ...

javascriptjquery

What is the process for creating a default button in Ionic framework?

Recently, I developed an app that includes a survey page. Each question in the survey has two buttons for the user to select: Yes or No. However, as a newcomer to using Ionic, I encountered an issue after building the code and checking the output. One of ...

cssangularionic-frameworkionic4

Issues arise when attempting to retrieve JSON data through an Ajax GET call. Specifically, an "Undefined" error occurs for all records in the JSON object

Here is the client side code snippet I am working with: $.ajax({ url: 'http://localhost/App.WebAPI/api/Messages/AppName', type: 'GET', dataType: 'json', crossDom ...

javascriptjqueryajaxjson

What exactly is the purpose of utilizing the toContain() function within expect statements?

As we all know, "expect" has been replaced with "jest" and some properties of "expect" have also changed. For example, "toContain" was previously known as "toInclude". More information can be found here: https://github.com/skovhus/jest-codemods/blob/master ...

javascriptnode.jsjestjs