Question

我正在处理HTML页面，并且我想要不同的图像，并且每个图像都有一个弹出视频。使用代码（html，css，javascript），我可以为一个视频制作该视频：单击图像时，会在同一页面中打开一个视频。但是我需要用于不同图片的不同视频，并且它们都打开相同的第一个视频。如何将每张图片定向到不同的视频？

我尝试使用javascript中的变量将图像连接到视频ID，每个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中添加了图片叠加层）

Answer 1

我稍微修改了代码，但是我认为概念是相同的。当您单击其他元素时，您想更改视频的来源。在这种情况下，图像。

您可以将视频置于模式窗口或弹出窗口中，并将其设置为在单击时关闭。（该函数未包含在示例中）

您需要做的就是将另一个元素添加到无序列表，并设置on click函数以将视频更改为参数中包含video元素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>

如何在同一网页中显示不同的视频弹出窗口？

1 个答案: