javascript - HTML 图像/视频播放列表

Question

我有一组图片和视频。我想实现一个可以循环播放所有图像和视频的播放器。 举个例子， A——图像，B——视频，C——图像； Assets = [A, B, C]; 我想要一个循环遍历此数组的 html 播放器，首先显示 A(图像)一个间隔 [5s]，然后自动播放 B(视频)和视频结尾，显示 C(图像)一个间隔(5s)并重复流量。我试过类似下面的代码。但这不是视频的解决方案。

var previewContainer = $(".previews-container");
var curIndex = 1;

appendMediaElement(loopAssets[0]); //initial 

setInterval(function() {
  if(curIndex >= loopAssets.length) {
     curIndex = 1;
  }

  appendMediaElement(loopAssets[curIndex]); //loopAssets array contains all the images and vidoes with meta data which is retrive from a ajax call

  curIndex++;
  
}, 5000);


function appendMediaElement(asset) {
    var mediaEl = "";
    if(asset.mediaType == "IMAGE") {
        mediaEl =  '<img id="lp-preview-image" src="' + asset.contentUrl + '">';
        previewContainer.html(mediaEl);
    } else if(asset.mediaType == "VIDEO") {
        mediaEl = "<video id='lp-preview-video' autoplay controls>";
        mediaEl += "<source src='"+ asset.contentUrl + "' type='" + asset.contentType + "'>";
        mediaEl += "</video>";
        previewContainer.html(mediaEl);
    }
}

<div class="col-xs-8">
  <div id="loop-preview">
    <div class="item previews-container" style="width: 700px; height: 450px">
      <!-- images/vidoes-->
    </div>
  </div>
</div>

任何更好的解决方案将不胜感激!

Answer 1

以下是您在评论中提到的解决方案:

• 图像将显示 5 秒，并且
• 视频将完整显示

在移动到下一个媒体元素之前。

尝试对您的代码进行最少的更改，这是可以完成的事情的列表:

• 删除setInterval(但保留更改媒体的功能，将其重命名为changeMedia)
• 如果是图片，在代码末尾添加一个 setTimeout，它会在 5 秒后调用您创建的新函数 (changeMedia)。
• 如果是视频，则在代码末尾添加一个监听器(ended 事件)，您可以在其中调用您创建的函数 (changeMedia).

应该就是这样。对于我的代码，我假设这是您从 AJAX 获得的数据(它遵循您原始代码的所有要求，尽管它可能只是您获得的内容的缩小版本):

var loopAssets = [
    { contentUrl: "http://lorempixel.com/200/200/abstract/", contentType: "image/jpg", mediaType:"IMAGE" },
    { contentUrl: "http://www.w3schools.com/html/mov_bbb.mp4", contentType: "video/mp4", mediaType: "VIDEO"},
    { contentUrl: "http://lorempixel.com/200/200/people/", contentType: "image/jpg", mediaType:"IMAGE" }
];

所以，这是一个工作演示(请参阅我更改的地方的注释):

var loopAssets = [
  { contentUrl: "http://lorempixel.com/200/200/abstract/", contentType: "image/jpg", mediaType:"IMAGE" },
  { contentUrl: "http://www.w3schools.com/html/mov_bbb.mp4", contentType: "video/mp4", mediaType: "VIDEO"},
  { contentUrl: "http://lorempixel.com/200/200/people/", contentType: "image/jpg", mediaType:"IMAGE" }
];
var previewContainer = $(".previews-container");
var curIndex = 1;

appendMediaElement(loopAssets[0]);

// removed the setInterval but kept the function
function changeMedia() {

  if(curIndex >= loopAssets.length) {
    // modified this so it would display the first image/video when looping
    curIndex = 0;
  }

  appendMediaElement(loopAssets[curIndex]);

  curIndex++;

};


function appendMediaElement(asset) {
  var mediaEl = "";
  if(asset.mediaType == "IMAGE") {
    mediaEl =  '<img id="lp-preview-image" src="' + asset.contentUrl + '">';
    previewContainer.html(mediaEl);
    // image: go to the next media after 5 seconds
    setTimeout("changeMedia()", 5000);
  } else if(asset.mediaType == "VIDEO") {
    mediaEl = "<video id='lp-preview-video' autoplay controls>";
    mediaEl += "<source src='"+ asset.contentUrl + "' type='" + asset.contentType + "'>";
    mediaEl += "</video>";
    previewContainer.html(mediaEl);
    // video: go to the next media when the video ends
    document.getElementById("lp-preview-video").addEventListener("ended", function(e) {
      changeMedia();
    });
  }
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<div class="col-xs-8">
  <div id="loop-preview">
    <div class="item previews-container" style="width: 700px; height: 450px">
    </div>
  </div>
</div>

正如我所说，这是使您的代码按照您在问题和评论中定义的方式工作的最简单的更改，为了使其更好/更高效，您可能需要考虑进行其他增强(例如:隐藏/显示而不是创建/删除元素)。