Как разместить разные видео всплывающие окна на одной веб-странице? - PullRequest
Новая
       7

Как разместить разные видео всплывающие окна на одной веб-странице?

1 голос
/ 01 мая 2019

Я работаю над HTML-страницей и хочу, чтобы у меня были разные изображения, и для каждого из них всплывающее видео. Используя код (html, css, javascript), я могу сделать это для одного видео: когда я нажимаю на свое изображение, видео открывается на той же странице. Но мне нужны разные видео для разных картинок, и все они открывают одно и то же первое видео. Как я могу направить каждую картинку на другое видео?

Я пытался использовать переменные в javascript, чтобы связать изображение с идентификатором видео, у каждого из которых есть собственный источник (ссылка на видео) Теперь я попытался сделать разные функции javascript для каждого видео (пронумерованные 1 и 2) Но они все еще открывают то же видео

это код java-скрипта (где я добавил '1', я добавил '2' для другого) (я также пытался использовать идентификатор видео) 

<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)

1 Ответ

0 голосов
/ 01 мая 2019

Я немного изменил код, но концепция та же самая, я думаю. Вы хотите изменить источник видео при нажатии на другой элемент. В этом случае изображение.

Вы можете поместить видео в модальное или всплывающее окно и установить его закрытие при нажатии. (эта функция не включена в пример)

Все, что вам нужно сделать, это добавить еще один элемент в неупорядоченный список и установить функцию щелчка, чтобы перейти к видео с идентификатором элемента видео в аргументах.

Полный пример ниже просто подключите видео к video1.mp4 и наблюдайте, как происходит волшебство

<========================================= </p> 

         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>
Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.

Нет похожих вопросов

...