Question

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

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

我要做的是有一个页面可以随机化阵列中的图像/视频。用户在访问页面时将能够从下拉列表中选择一个类别，随机发生器将仅随机化具有该类别标签的图像并一次显示一个。

如果未选择任何类别，则会从视频总数中随机化。

我目前拥有的代码是针对视频设置的，但图片/视频是相同的概念

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

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

然后使用一些改组算法，例如https://stackoverflow.com/a/2450976/3819736

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从类别中提取图片吗？

1 个答案: