Fatal编程技术网
  • javascript/
  • Javascript HTML图像/视频播放列表

Javascript HTML图像/视频播放列表

javascript jquery html video

Javascript HTML图像/视频播放列表,javascript,jquery,html,video,Javascript,Jquery,Html,Video,我有一套图片和视频。我想实现一个能循环播放所有图像和视频的播放器。 例如,， A-图像，B-视频，C-图像； 资产=[A、B、C]； 我想要一个html播放器，它在这个数组中循环，首先显示a（图像）间隔[5s]，然后自动播放B（视频）并结束视频，显示C（图像）间隔（5s）并重复流程。我试过下面的代码。但这不是视频的解决方案 var previewContainer=$（“.previews容器”）； var curIndex=1； appendMediaElement（loopAssets[0

我有一套图片和视频。我想实现一个能循环播放所有图像和视频的播放器。 例如,， A-图像，B-视频，C-图像； 资产=[A、B、C]； 我想要一个html播放器，它在这个数组中循环，首先显示a（图像）间隔[5s]，然后自动播放B（视频）并结束视频，显示C（图像）间隔（5s）并重复流程。我试过下面的代码。但这不是视频的解决方案

var previewContainer=$（“.previews容器”）；
var curIndex=1；
appendMediaElement（loopAssets[0]）//首字母
setInterval（函数（）{
if（curIndex>=loopAssets.length）{
curIndex=1；
}
appendMediaElement（loopAssets[curIndex]）；//loopAssets数组包含所有带有从ajax调用检索的元数据的图像和视频
curIndex++；
}, 5000);
功能元素（资产）{
var mediaEl=“”；
如果（asset.mediaType==“图像”）{
中间层=''；
previewContainer.html（mediaEl）；
}else if（asset.mediaType==“视频”）{
mediaEl=“”；
中位数+=”；
中位数+=”；
previewContainer.html（mediaEl）；
}
}

//代码

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


身体{
宽度：100vw；
高度：100vh；
边距：0！重要；
显示：-webkit flex；
显示器：flex；
-webkit内容：中心；
证明内容：中心；
}   
#媒体{
显示：-webkit flex；
显示器：flex；
-webkit-align-self:center；
自对准：居中；
}
#媒体>img{
高度：500px；
宽度：500px；
}   
var imgFormat=[“jpg”，“png”]；
变量内容=[
"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=函数（）{
如果（document.readyState==“interactive”）{mediaChange（）；}
}
函数mediaChange（）{
var mediaBox=document.getElementById（“媒体”）；
setInterval（函数（）{
var media=mediaBox.children[0]；
var key=content.indexOf（media.getAttribute（“src”）；
如果（（键+1）=content.length）{key=0；}
else{key+=1；}
var format=content[key].substr（content[key].length-3）；
更改媒体（媒体盒、媒体、密钥、格式）；
}, 5000);
}
功能更改介质（介质盒、介质、键、格式）{
if（imgFormat.indexOf（format）<0）{
var ele=document.createElement（“视频”）；
ele.setAttribute（“自动播放”，真）；
}
else{var ele=document.createElement（“img”）；}
ele.setAttribute（“src”，content[key]）；
mediaBox.replaceChild（ele，media）；
}
以下是您在评论中提到的解决方案：

  • 图像将显示5秒钟，然后
  • 视频将完全显示
在移动到下一个媒体元素之前

尽量少地修改代码，下面列出了可以完成的事情：

  • 删除
    setInterval
    （但保留更改介质的功能，将其重命名为类似
    changeMedia
    ）
  • 当代码是图像时，在代码末尾添加一个
    setTimeout
    ，该函数在5秒后调用您创建的新函数（
    changeMedia
    ）
  • 当它是视频时，在代码末尾添加一个侦听器到视频末尾（
    end
    事件），在该事件中调用您创建的函数（
    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，内容类型：“视频/mp4”，媒体类型：“视频”}，
{contentUrl:“http://lorempixel.com/200/200/people/，contentType:“image/jpg”，mediaType:“image”}
];
var previewContainer=$（“.previews容器”）；
var curIndex=1；
appendMediaElement（loopAssets[0]）；
//删除了setInterval，但保留了该函数
函数changeMedia（）{
if（curIndex>=loopAssets.length）{
//对此进行了修改，以便在循环时显示第一个图像/视频
curIndex=0；
}
appendMediaElement（loopAssets[curIndex]）；
curIndex++；
};
功能元素（资产）{
var mediaEl=“”；
如果（asset.mediaType==“图像”）{
中间层=''；
previewContainer.html（mediaEl）；
//图像：5秒钟后转到下一个媒体
setTimeout（“changeMedia（）”，5000）；
}else if（asset.mediaType==“视频”）{
mediaEl=“”；
中位数+=”；
中位数+=”；
previewContainer.html（mediaEl）；
//视频：视频结束后转到下一个媒体
document.getElementById（“lp预览视频”）.addEventListener（“结束”，函数（e）{
changeMedia（）；
});
}
}
是的，给我一点时间，我将把答案作为旁注发布：第一个图像/视频只会在页面第一次加载时显示，不会再显示，因为在
设置间隔中，您将
curIndex
设置为1（而不是0）您所说的“任何更好的解决方案”是什么意思？更快的解决方案？更有效的解决方案？代码更少的解决方案？@Alvarontoro我是说工作解决方案：）

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" }
];