Switching videos dynamically with JavaScript while utilizing Bootstrap to enable playback in a floating window

This is a piece of code that enables playing videos in floating windows using Bootstrap. However, I am looking to enhance the functionality by dynamically changing the video source using JavaScript. I tried using onClick() to modify the src attribute of the video element, but it didn't yield the desired result.

function changevideo() {
  document.getElementById("source").src = "videos/projects/havoc/guide/guide_GOL_101_019_010.mp4";
}
<!DOCTYPE html>
<html lang="en">

<head>
    <link href="https://cdn.jsdelivr.net/npm/<a href="/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="3f5d50504b4c4b4b54f7f0a110f110d">[email protected]</a>/dist/css/bootstrap.min.css" rel="stylesheet">
    <script src="https://cdn.jsdelivr.net/npm/<a href="/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="27454848535453554657671209170915">[email protected]</a>/dist/js/bootstrap.bundle.min.js">
    </script>

</head>

<body>
    <button width="200" data-bs-toggle="modal" data-bs-target="#video" class="img" onClick="changevideo()">Click Me
        1</button>

    <!-- Modal -->
    <div class="modal fade" id="video">
        <div class="modal-dialog modal-dialog-centered">
            <div class="modal-content">
                <div class="modal-body">
                    <video width="100%" autoplay loop>
                        <source id="source" src="">
                    </video>
                </div>
            </div>
        </div>
    </div>
</body>

</html>

javascripthtmlcssbootstrap-4

Answer №1

Don't forget to hit the play button.

const video = document.getElementById("video-element");

const clear = (node) => {
    while (node.firstChild) {
        node.removeChild(node.lastChild);
    }
};


const changevideo = () => {
  const source = document.createElement('SOURCE');
  
  clear(video);
  
  source.type = "video/mp4";
  source.src = "http://commondatastorage.googleapis.com/gtv-videos-bucket/sample/BigBuckBunny.mp4";
  
  video.appendChild(source);
  
  video.play();
}
<!DOCTYPE html>
<html lang="en">

<head>
    <link href="https://cdn.jsdelivr.net/npm/<a href="/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="ef8d80809b9c9b9d8e9fafdac1dfc1dd">[email protected]</a>/dist/css/bootstrap.min.css" rel="stylesheet">
    <script src="https://cdn.jsdelivr.net/npm/<a href="/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="f6949999828582849786b6c3d8c6d8c4">[email protected]</a>/dist/js/bootstrap.bundle.min.js">
    </script>

</head>

<body>
    <button width="200" data-bs-toggle="modal" data-bs-target="#video" class="img" onClick="changevideo()">click me
        1</button>

    <!-- Modal -->
    <div class="modal fade" id="video">
        <div class="modal-dialog modal-dialog-centered">
            <div class="modal-content">
                <div class="modal-body">
                    <video id="video-element" width="100%" loop>
                    </video>
                </div>
            </div>
        </div>
    </div>
</body>

</html>

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

Exploring the Usage of sessionStorage within the <template> Tag in Vue.js

Is it possible to access sessionStorage in the script section of a Vuejs component like this? <template> {sessionStorage} </template> Whenever I try to call it this way, I consistently receive the error message "cannot read property &apo ...

javascriptvue.jsvuejs2

Enhancing jQuery's ScrollTop Functionality

My jQuery script for scrolling to the top of a container seems to accelerate after it starts. It begins slowly and then speeds up. Is there a way to prevent this lag at the beginning and maintain a consistent speed throughout the entire scroll? // Once t ...

javascriptjqueryscrolltop

How to vertically align radio buttons with varying label lengths using Angular and Bootstrap 4?

Is there a way to properly align radio buttons with variable length labels? When each label has a different length, the radio buttons appear misaligned. How can this be fixed? <div class="row"> <div class="form-check form-check-inline" *ngFor="l ...

htmlangularbootstrap-4

Guide on how to trigger loader page during execution of Selenium code in Python

I am currently developing a Python Flask web application that incorporates Selenium in the backend. One of my objectives is to disable the webpage when the Selenium driver is running to prevent user interference. Below is the code snippet I am using: < ...

javascriptpythonselenium

Is there a way to update a child component in React when the parent state changes, without utilizing the componentWill

I am currently working on developing a JSON editor using React, but I am facing an issue with the library I am utilizing not having a componentWillReceiveProps hook. As someone relatively new to React, I am trying to find a way to automatically update th ...

javascriptreactjsstate

Is there a way to determine if a property contains a string value?

In my main.js file, I have a function called $scope.onError which is triggered when there is an error while uploading an attachment. The function logs the error message received from the server and assigns it to the variable $scope.errorMessage. If the val ...

javascriptangularjs

A JavaScript function that produces an array as an output

Could anyone explain why the output vector from the function TriangulosParaLinhas is not being stored in the vector Lines? if (lineMode == true) { var lines = triangulosParaLinhas(vertices); } function triangulosParaLinhas(vertices) { var poi ...

javascriptarraysfunction

Filter search results using selected region from dropdown menu

I have been attempting to retrieve the value from a dropdown list and customize the search functionality specifically for the selected field. The client should only be able to search within the chosen zone in the dropdown. I have been searching for a solut ...

javascriptc#asp.net.netasp.net-mvc-5

Service for Posting in Angular

I am looking to enhance my HTTP POST request by using a service that can access data from my PHP API. One challenge I am facing is figuring out how to incorporate user input data into the services' functionality. Take a look at the following code snip ...

javascriptphpangularjs

React Native is facing difficulty in fetching pagination data which is causing rendering errors

Currently, I am working on fetching pagination data from an API. The process involves retrieving data from https://myapi/?page=1, then from https://myapi/?page=2, and so on. However, despite following this logic, I encountered an error that has left me puz ...

javascriptandroidreactjsreact-native

What order do Node.js event queues, Promises, and setTimeout() operate in?

QUERY: When working with Node.js event queues, such as code like "new Promise((r) => setTimeout(r, t));", where exactly is the setTimeout() function evaluated? Is it immediate, in the microqueue for Promise resolutions, or elsewhere? INSIGHT ...

javascriptnode.jsasync-awaitpromise

Highlighting the navbar in the right-hand section

I need help with highlighting the navbar item that corresponds to a specific section when clicked or scrolled into view. I've tried using CSS properties and Bootstrap, but I can't seem to get it working. Any assistance would be greatly appreciate ...

htmlcssbootstrap-4navbar

Modify the color of the title in a bootstrap vue tab

Utilizing bootstrap-vue.js, I created a tab that looks like this: https://i.sstatic.net/EW76k.png The default color of the tab title doesn't fit with my project theme, so I attempted to change it. I found information on how to modify the tab title in ...

javascriptvue.js

When I scroll, changing the position from fixed to absolute causes my image to jump

My goal is to implement a unique visual effect where a background image, initially positioned as "fixed", gradually moves towards the top of the webpage and then disappears as if it were absolutely positioned. However, this movement should only occur after ...

javascriptjquerycsscss-positionpositioning

Customize the Emotion Styled Material UI Tab Indicator Overwrite

Looking for a way to customize the appearance of tab indicators using Emotion styled components. I'm struggling to target nested classes in my code. Here's what I have so far: const StyledTabs = styled(Tabs)( { classes: { indicator: ...

cssreactjsmaterial-uiemotioncss-in-js

Changing the text during a reset process

I've been grappling with this issue, but it seems to slip through my fingers every time. I can't quite put my finger on what's missing. My project involves clicking an image to trigger a translate effect and display a text description. The ...

javascripthtmlcss

What causes the form to be submitted when the text input is changed?

I'm puzzled by the behavior of this code snippet that triggers form submission when the input value changes: <form> <input type="text" onchange="submit();"> </form> Typically, I would expect something along t ...

javascripthtml

What are some strategies for efficiently displaying a large amount of data on a screen using Javascript and HTML without sacrificing performance?

Imagine having a hefty 520 page book with over 6,200 lines of text ranging from 5 to 300 characters each. The challenge lies in efficiently displaying this content on the screen for users to read without causing lag or performance issues. Attempting to re ...

javascripthtmlcssreactjscanvas

Loading Animation with jQuery and Minimum Time Delay

Hello there, I am looking for a way to establish a minimum time duration for an onload function to ensure that a div is displayed for at least 2 seconds. Similar to setting a min-width or min-height, I want the div to be shown for a minimum of 2 seconds e ...

javascriptjquery

Ensuring a Fixed Delta Tooltip in lightweight-charts is essential for maintaining a seamless

I have implemented lightweight-charts to present a chart using mock data. I am looking to establish a fixed Delta Tooltip on the chart when the page loads, with predetermined start and end dates that are specified as input. Furthermore, I aim to restrict t ...

javascriptnext.jstooltiplightweight-charts