个人中心
gpt4 book ai didi

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

转载 作者：行者123 更新时间：2023-11-28 19:27:12 24 4
gpt4 key购买 nike

我正在处理一个 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中添加了图片叠加)

最佳答案

我稍微更改了代码，但我认为概念是一样的。您想在单击另一个元素时更改视频的来源。在这种情况下是图像。

您可以将视频放在模态窗口或弹出窗口中，并将其设置为在单击时关闭。 (示例中不包含该功能)

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

关于javascript - 如何在同一网页中显示不同的视频弹出窗口？，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/55936448/

24 4 0
文章推荐： css - 为什么 flex 元素限制为父级大小？
文章推荐： python - 自动检测代理设置 linux
文章推荐： python - 无法在 objectify.parse 结果上调用 lxml.etree._ElementTree.find()
文章推荐： javascript - Ractive.js 翻转 bool 函数
行者123
个人简介

我是一名优秀的程序员,十分优秀！

滴滴打车优惠券免费领取
滴滴打车优惠券
全站热门文章
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com