HTML圖像/視頻播放列表

我有一組圖像和視頻。我想要實現一個可以遍歷所有圖像和視頻的播放器。例如， A - 圖像，B - 視頻，C - 圖像; 資產= [A，B，C]; 我想要一個循環播放這個數組的html播放器，首先顯示A（圖像）間隔[5s]，然後自動播放B（視頻）和視頻結尾，顯示C（圖像）間隔（5s）和重複流程。我嘗試過類似下面的代碼。但這不是視頻的解決方案。HTML圖像/視頻播放列表

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>

任何更好的解決方案將不勝感激！

來源

2015-09-24 zlas

是啊給我一秒我會發布答案 –

作爲一個方面的評論：第一次的圖像/視頻將只會顯示當第一次加載頁面，而不會再次，因爲在'setInterval'你正在設置'curIndex'設置爲1（而不是0） –

「_any better solution_」是什麼意思？更快的解決方案？更有效的解決方案？少代碼的解決方案？ –

這裏是你在你的評論中提到什麼樣的解決方案：

的圖像將顯示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>

正如我所說的，這是因爲你在你的問題和評論定義爲使你的代碼工作的最簡單的變化，使它bett呃/更高效，你可能想要考慮做其他增強（例如：隱藏/顯示，而不是創建/刪除元素）。

來源

2015-09-24 19:25:40

非常具有描述性的答案。我做了一些修改，以適應我的代碼庫和它的工作正常。非常感謝你@Alvaro – zlas

雖然這個作品@Alvaro我不敢相信你甚至可以稱我的代碼爲比較不好的解決方案......我可以指出你做錯了很多不同的事情，只有一個例子是你將HTML元素聲明爲字符串並將其寫入innerHTML'previewContainer.html（mediaEl）'大聲笑......這不是很好的編程和效率，甚至不使用DOM ...請！知道你在說什麼之前，你說話之前，你有沒有像我這樣的人回答，只是這樣你就可以得分... smh .... –

@JordanDavis我沒有說我的解決方案是最佳的。事實上，在我的回答中，我提到OP代碼需要進行微小的更改才能生效，在最後一段中我甚至提到可以通過不同的方式進行改進。關於您的解決方案，如果答案得到改善，我會很樂意刪除我的評論，但在此之前，我會支持他們 –

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>

來源

2015-09-24 18:38:02

@AlvaroMontoro正如我在評論區塊中提到的，loopAssets是一個包含帶有元數據的圖像和視頻的對象數組。它從一個不在我的代碼片段中的ajax調用中檢索。對於那個很抱歉。 – zlas

首先@AlvaroMontoro他從來沒有說過AJAX，他列出的是三個元素（img，vid，img）來循環......你的權利我可以通過'tagName'（視頻| img），但由於只有兩個圖像，實際上沒有看到重點......我將更新代碼以顯示次要的OOP更改... –

@zlas如果您使用AJAX我將更新代碼因此... –

HTML圖像/視頻播放列表

回答

相關問題