我可以从 javascript 的类别中提取图像吗？

Question

提取已分类的视频或图片的最佳方式是什么？

是否可以将值写入数组，即：风景、技术、摘要等。然后当用户 select 进行输入时，他们会得到属于该类别的项目，或者我需要使用 PHP 或 JSON 来有效地编写这样的内容吗？

我想要做的是创建一个页面，该页面将从数组中随机化 images/videos。用户在访问该页面时将能够 select 从下拉列表中选择一个类别，随机化器只会随机化带有该类别标签的图像并一次显示一个。

如果没有类别被 selected 则它将从视频总数中随机分配。

我目前的代码是为视频设置的，但images/videos是相同的概念

    <head>
        <title>Randomizer</title>
    </head>

    <body> 

         <section>

          <div class="desktop">
            <video loop autoplay>

              <source src="" type="">
              <source src="" type="">
              Your browser does not support the <code>video</code> element.
            </video>
          </div> 

        </section>

    </body>

</html>

JavaScript

var videos = [
    [{type:'mp4', 'src':'/videos/1.webm'}, {type:'webm', 'src':'/videos/1.mp4'}],
    [{type:'mp4', 'src':'/videos/2.webm'}, {type:'webm', 'src':'/videos/2.mp4'}],
    [{type:'mp4', 'src':'/videos/3.webm'}, {type:'webm', 'src':'/videos/3.mp4'}],
    [{type:'mp4', 'src':'/videos/4.webm'}, {type:'webm', 'src':'/videos/4.mp4'}],
    [{type:'mp4', 'src':'/videos/5.webm'}, {type:'webm', 'src':'/videos/5.mp4'}], 

];



$(function() {
    $('section').on('click', 'div', function(e) {
    var number = Math.floor(Math.random()*videos.length);
    $(this).find('source').each(function(index){ 
          videoSrc = videos[number][index].src;
          $(this).attr('src', videoSrc);
          $('video').load();
          $('video').play();
        });
    });
}); 


$(document).ready(function() { 
    var number = Math.floor(Math.random()*videos.length); 
     $(this).find('source').each(function(index){ 
          videoSrc = videos[number][index].src;
          $(this).attr('src', videoSrc);
          $('video').load();
          $('video').play();
        });
     }
);

非常感谢任何帮助或见解！谢谢大家！

Answer 1

如果我对任务的理解正确，那么您要实现的目标是这样的：

videos json 数组

var videos = [
    { category: 'landscape',  sources: [ { type: 'webm', src: '/videos/1.webm'  }, { type: 'mp4', src: '/videos/1.mp4' } ] },
    { category: 'landscape',  sources: [ { type: 'webm', src: '/videos/2.webm'  }, { type: 'mp4', src: '/videos/2.mp4' } ] },
    { category: 'landscape',  sources: [ { type: 'webm', src: '/videos/3.webm'  }, { type: 'mp4', src: '/videos/3.mp4' } ] },
    { category: 'technology', sources: [ { type: 'webm', src: '/videos/4.webm'  }, { type: 'mp4', src: '/videos/4.mp4' } ] },
    { category: 'technology', sources: [ { type: 'webm', src: '/videos/5.webm'  }, { type: 'mp4', src: '/videos/5.mp4' } ] },
    { category: 'technology', sources: [ { type: 'webm', src: '/videos/6.webm'  }, { type: 'mp4', src: '/videos/6.mp4' } ] },
    { category: 'abstract',   sources: [ { type: 'webm', src: '/videos/7.webm'  }, { type: 'mp4', src: '/videos/7.mp4' } ] },
    { category: 'abstract',   sources: [ { type: 'webm', src: '/videos/8.webm'  }, { type: 'mp4', src: '/videos/8.mp4' } ] },
    { category: 'abstract',   sources: [ { type: 'webm', src: '/videos/9.webm'  }, { type: 'mp4', src: '/videos/9.mp4' } ] },
    { category: 'abstract',   sources: [ { type: 'webm', src: '/videos/10.webm' }, { type: 'mp4', src: '/videos/10.mp4'} ] },
    { category: 'abstract',   sources: [ { type: 'webm', src: '/videos/11.webm' }, { type: 'mp4', src: '/videos/11.mp4'} ] }
];

这个数组将按类别过滤

var category = 'technology'; // take the category from dropdown
var videosByCategory = videos.filter(function(video) {
    return video.category === category;
});

然后使用一些洗牌算法，就像这里的那个

function shuffle(array) {
    var currentIndex = array.length, temporaryValue, randomIndex ;

    // While there remain elements to shuffle...
    while (0 !== currentIndex) {

        // Pick a remaining element...
        randomIndex = Math.floor(Math.random() * currentIndex);
        currentIndex -= 1;

        // And swap it with the current element.
        temporaryValue = array[currentIndex];
        array[currentIndex] = array[randomIndex];
        array[randomIndex] = temporaryValue;
    }

    return array;
}

和最终条件

var shuffledVideos = shuffle(videosByCategory.length > 0 ? videosByCategory : videos);

Pluker

我可以从 javascript 的类别中提取图像吗？

Can I pull images from a category with javascript?

html

javascript

php

jquery

json