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

Question

我有两个 arrays.One 视频和一张图片。单击图像时，我一次只需要播放一个视频。就像点击 img[1] 然后它应该播放 video[1] 如果点击 img[2] 然后 video[2].

我需要做这样的事情：IMAGE

我查看了几个示例，但仅使用 javascript 没有找到任何类似的答案。现在，当我点击图片时，它会打开我添加的用于测试但无法播放视频的锚标记 link。

  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 单击图像时如何播放数组中的每个视频？

How to play each video from array when an image is clicked using javascript?

javascript

arrays

anchor

image

html5-video