This code is playing video on floating windows using bootstrap. But i want to modify the video src using javascript so i can have dynamic video link. I use onClick() to change the src of the video but it didn’t work.
JavaScript
x
3
1
function changevideo() {
2
document.getElementById("source").src = "videos/projects/havoc/guide/guide_GOL_101_019_010.mp4";
3
}
JavaScript
1
29
29
1
<!DOCTYPE html>
2
<html lang="en">
3
4
<head>
5
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.0.2/dist/css/bootstrap.min.css" rel="stylesheet">
6
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.0.2/dist/js/bootstrap.bundle.min.js">
7
</script>
8
9
</head>
10
11
<body>
12
<button width="200" data-bs-toggle="modal" data-bs-target="#video" class="img" onClick="changevideo()">click me
13
1</button>
14
15
<!-- Modal -->
16
<div class="modal fade" id="video">
17
<div class="modal-dialog modal-dialog-centered">
18
<div class="modal-content">
19
<div class="modal-body">
20
<video width="100%" autoplay loop>
21
<source id="source" src="">
22
</video>
23
</div>
24
</div>
25
</div>
26
</div>
27
</body>
28
29
</html>
Advertisement
Answer
You just forgot to press play
.
JavaScript
1
21
21
1
const video = document.getElementById("video-element");
2
3
const clear = (node) => {
4
while (node.firstChild) {
5
node.removeChild(node.lastChild);
6
}
7
};
8
9
10
const changevideo = () => {
11
const source = document.createElement('SOURCE');
12
13
clear(video);
14
15
source.type = "video/mp4";
16
source.src = "http://commondatastorage.googleapis.com/gtv-videos-bucket/sample/BigBuckBunny.mp4";
17
18
video.appendChild(source);
19
20
video.play();
21
}
JavaScript
1
28
28
1
<!DOCTYPE html>
2
<html lang="en">
3
4
<head>
5
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.0.2/dist/css/bootstrap.min.css" rel="stylesheet">
6
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.0.2/dist/js/bootstrap.bundle.min.js">
7
</script>
8
9
</head>
10
11
<body>
12
<button width="200" data-bs-toggle="modal" data-bs-target="#video" class="img" onClick="changevideo()">click me
13
1</button>
14
15
<!-- Modal -->
16
<div class="modal fade" id="video">
17
<div class="modal-dialog modal-dialog-centered">
18
<div class="modal-content">
19
<div class="modal-body">
20
<video id="video-element" width="100%" loop>
21
</video>
22
</div>
23
</div>
24
</div>
25
</div>
26
</body>
27
28
</html>