如何在同一网页上有不同的视频弹出窗口？
Posted
tags:
篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了如何在同一网页上有不同的视频弹出窗口？相关的知识，希望对你有一定的参考价值。
我正在开发一个html页面，我希望有不同的图像，并且每个图像都有一个弹出视频。使用代码（html，css，javascript）我可以为一个视频制作这个：当我点击我的图像时，视频会在同一页面中打开。但我需要不同的视频用于不同的图片，并且他们都打开相同的第一个视频。如何将每张图片指向不同的视频？
我尝试在javascript中使用变量，将图像连接到视频ID，每个都有自己的源（链接到视频）现在我尝试为每个视频制作不同的javascript函数（编号为1和2）但是他们仍然打开同样的视频
这是java脚本代码（我在其中添加'1'，我为另一个添加了'2'）（我也尝试使用视频ID）
<script>
window.document.onkeydown = function(e) {
if (!e) {
e = event;
}
if (e.keyCode == 27) {
*lightbox_close1*();
}
}
function *lightbox_open1*() {
var lightBoxVideo = document.getElementById(**"V1"**);
window.scrollTo(0, 0);
document.getElementById('light').style.display = 'block';
document.getElementById('fade').style.display = 'block';
lightBoxVideo.play();
}
function *lightbox_close1*() {
var lightBoxVideo = document.getElementById(**"V1"**);
document.getElementById('light').style.display = 'none';
document.getElementById('fade').style.display = 'none';
lightBoxVideo.pause();
}
</script>
这就是我在html中所拥有的
<div id="light">
<a class="boxclose" id="boxclose" onclick="*lightbox_close1*();"></a>
<video id=**"V1"** width="600" controls>
<source src="10 Creamy Satisfying Pasta Dishes.mp4" type="video/mp4">
<!--Browser does not support <video> tag -->
</video>
</div>
<div id="fade" onClick="*lightbox_close1*();"></div>
<div>
<a href="#" onclick="*lightbox_open1*();">
<div class="container">
<img src="Aperitive.jpg" alt="A" class="image" >
<div class="overlay">
<div class="text">Aperitive</div>
</div>
</div>
</a>
</div>
另一个是相同但2而不是1，'**'仅用于粗体（我在css中添加了图像叠加）
我改变了一些代码，但我认为这个概念是一样的。您想要在单击其他元素时更改视频源。在这种情况下是一个图像。
您可以将视频放在模态或弹出窗口中，并将其设置为单击时关闭。 （此功能未包含在示例中）
您需要做的就是在无序列表中添加另一个元素，并将on click函数设置为更改为参数中带有视频元素id的视频。
下面的完整示例只是将您的视频插入video1.mp4并观看魔术发生。
<=========================================
Edited for clarification
=========================================>
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>My Vid Stuff</title>
<style>
ul{
list-style: none;
text-align: center;
width: 50%;
border: 1px solid black;
}
li{
display: inline-block;
border: 1px solid #ccc;
border-radius: 5px;
width: 100px;
height: 100px;
cursor: pointer;
margin-right: 16px
}
</style>
<script>
//this function takes 2 arguments the video element id
//and the video source.
function changeVid(id, video){
//set the element for the change
var vid = document.querySelector('#' + id + ' source');
//change the source of the element
vid.src = video;
//load the video to play
document.querySelector('#' + id).load();
//logging purposes to see the change in action (optional)
console.log(document.querySelector('#' + id +' source').src);
}
</script>
</head>
<body>
<div class="container">
<div class="video-wrapper">
<video id="myvideo" controls>
<source src="video1.m4v" type="video/mp4">
Your browser does not support HTML5 video.
</video>
</div>
<ul>
<!-- onclick of user set myvideo <video> to the video source specified -->
<li onclick="changeVid('myvideo', 'video1.m4v')" > Cat Video 1</li>
<li onclick="changeVid('myvideo', 'video2.m4v')" > Cat Video 2</li>
</ul>
</div>
</body>
</html>
以上是关于如何在同一网页上有不同的视频弹出窗口？的主要内容，如果未能解决你的问题，请参考以下文章
Java编程。比如在一个面板上有两个按钮，怎么实现分别点击这两个按钮然后弹出不同的窗口？我的代码不
如何创建一个 HTML 页面来更新同一网页上的多个 YouTube 视频链接？ [关闭]