Question

我有两个数组，一个是视频，另一个是图像。单击图像时，一次只需要播放一个视频。就像单击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

Answer 1

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

中修改的代码

使用javascript单击图像时如何播放数组中的每个视频？

1 个答案: