Как воспроизвести каждое видео из массива при нажатии на изображение с использованием JavaScript? - PullRequest
Новая
       19

Как воспроизвести каждое видео из массива при нажатии на изображение с использованием JavaScript?

0 голосов
/ 19 июня 2019

У меня есть два массива. Одно видео и одно изображение.Мне нужно воспроизвести только одно видео за один раз, когда изображение щелкнуло.Например, если щелкнуть img [1], то должно воспроизводиться видео [1], а если img [2], то видео [2].

Мне нужно сделать что-то вроде этого: IMAGE

Я просмотрел несколько примеров, но не нашел аналогичного ответа, используя только javascript.Теперь, когда я нажимаю на изображение, он открывает ссылку тега привязки, которую я добавил для тестирования, но не могу воспроизвести видео. 

  var videosList = [
    "http://media.w3.org/2010/05/sintel/trailer.mp4",
    "http://media.w3.org/2010/05/bunny/trailer.mp4",
    "http://vjs.zencdn.net/v/oceans.mp4"
  ];

  var allVideos = videosList.length;
  var i = 0;
  for (; i < allVideos; i++) {
    var vid = document.createElement('source');
    vid.src = videosList[i];
    document.getElementById('myVideo').appendChild(vid);
  }



  var images = [
    'https://picsum.photos/200/300',
    'https://picsum.photos/id/237/200/300',
    'https://picsum.photos/200/300?grayscale',
    'https://picsum.photos/id/237/200/300',
    'https://picsum.photos/200/300'

  ];

  var allPics = images.length;
  var i = 0;

  for (; i < allPics; i++) {
    var a = document.createElement('a');
    a.href = 'example.html';
    var img = document.createElement('img');
    img.src = images[i];
    a.appendChild(img);
    document.getElementById('myImg').appendChild(a);
  }

Вот пример кода: codepen

1 Ответ

1 голос
/ 19 июня 2019 
// JavaScript can be change in the following way
// Assuming that the video to be played is the same as index of the image clicked



// make it as global to access in all functions
 var videosList = [
        "http://media.w3.org/2010/05/sintel/trailer.mp4",
        "http://media.w3.org/2010/05/bunny/trailer.mp4",
        "http://media.w3.org/2010/05/bunny/movie.mp4",
        "http://vjs.zencdn.net/v/oceans.mp4"
    ];
    window.onload = function() {
      // for videos
        var vid = document.createElement('source');
        vid.src = videosList[0]; // playing first video in the array by default
        document.getElementById('myVideo').appendChild(vid);


      // for images

      var images = [
        'https://picsum.photos/200/300',
        'https://picsum.photos/id/237/200/300',
        'https://picsum.photos/200/300?grayscale',
        'https://picsum.photos/id/237/200/300',
        'https://picsum.photos/200/300'

      ];

      var allPics = images.length;
      var i = 0;

      for (; i < allPics; i++) {
        var a = document.createElement('a');
        // a.href = 'example.html';
        var img = document.createElement('img');
        img.src = images[i];
        img.id = i; // for the reference of clicked image
        a.appendChild(img);
        a.addEventListener("click", clickFn, false); 
        document.getElementById('myImg').appendChild(a);
      }

    }

    /**click function for the image of the image */
    clickFn = function(e){
         var video = document.getElementById('myVideo');
         video.src = videosList[parseInt(e.srcElement.id,10)];
         video.play();
    }

Надеюсь, это поможет .. !!

измененный код в codepen

...