Question

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

＆＃13;

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

＆＃13;

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

＆＃13;

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

Answer 1

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

图像将显示5秒钟，
视频将完整显示

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

尝试最低限度地更改代码，这是可以完成的事情列表：

删除setInterval（但保留更改媒体的功能，将其重命名为changeMedia）
在代码结束时，如果是图片，请在5秒后添加一个setTimeout来调用您创建的新功能（changeMedia）。
在代码结束时，如果是视频，请在视频末尾（ended事件）添加一个侦听器，在其中调用您创建的函数（changeMedia）。< / LI>

那应该是它。对于我的代码，我假设这是您从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" }
];

所以，这是一个有效的演示（请参阅我更改过的地方的评论）：

＆＃13;

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();
    });
  }
}

＆＃13;

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

＆＃13;

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

Answer 2

Here is the JSFiddle demo

<强> // CODE

<!DOCTYPE html>
<html>
<head>
<style>
body{
    width: 100vw;
    height: 100vh;
    margin: 0 !important;
    display: -webkit-flex;
    display: flex;
    -webkit-justify-content: center;
    justify-content: center;
}   
#media{
    display: -webkit-flex;
    display: flex;
    -webkit-align-self: center;
    align-self:center;
}
#media>img{
    height: 500px;
    width: 500px;
}   
</style>
<script>
var imgFormat = ["jpg","png"];
var content = [
"http://cdn.wonderfulengineering.com/wp-content/uploads/2014/04/space-wallpapers-9.jpg",
"http://ak8.picdn.net/shutterstock/videos/1694950/preview/stock-footage-operator-cleans-lens-of-professional-videocamera-and-on-background-scenery-are-prepared.mp4",   
"http://www.sciencesortof.com/wp-content/uploads/2015/04/218_space_beer.jpg",
"http://www.spirit1059.com/pics/Feeds/Articles/2015611/118317/Beach.jpg",
"http://ak7.picdn.net/shutterstock/videos/3775625/preview/stock-footage-northern-lights-aurora-borealis-reflected-on-a-lake-timelapse-in-iceland.mp4"
];
document.onreadystatechange = function(){
    if(document.readyState == "interactive"){mediaChange();}
}
function mediaChange(){
    var mediaBox = document.getElementById("media");
    setInterval(function(){
        var media = mediaBox.children[0];
        var key = content.indexOf(media.getAttribute("src"));
        if((key+1) == content.length){key = 0;}
        else{key += 1;}
        var format = content[key].substr(content[key].length - 3);
        changeMedia(mediaBox,media,key,format);
    }, 5000);
}
function changeMedia(mediaBox,media,key,format){
        if(imgFormat.indexOf(format) < 0){
            var ele = document.createElement("video");
            ele.setAttribute("autoplay", true);
        }
        else{var ele = document.createElement("img");}
        ele.setAttribute("src",content[key]);       
        mediaBox.replaceChild(ele,media);           
}
</script>
</head>
<body>
<section id="media">
    <img src="http://cdn.wonderfulengineering.com/wp-content/uploads/2014/04/space-wallpapers-9.jpg">
</section>
</body>
</html>

HTML图片/视频播放列表

2 个答案: