Can I pull images from a category with javascript?

Question

What is the best way to pull videos or images that are categorized?

Is it possible to write in values into an array ie: landscape, technology, abstract, etc.. And then when the user selects an input they are given the items that fall into the category or would I need to use PHP or JSON to write something like this effectively?

What I am trying to do is have a page that will randomize images/videos from an array. The user when visiting the page will be able to select a category from a dropdown and the randomizer will only randomize images with that category tag and display them one at a time.

If no category is selected then it will randomize from the total amount of videos.

the code I currently have is set for videos but images/videos is the same concept

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

Any help or insight is much appreciated! Thanks everyone!

Remove `.on()` from the closure and add it to `$(document).ready`. — Mohammad Areeb Siddiqui, Jan 11 '15 at 09:49

score 1 · Accepted Answer · edited May 23 '17 at 11:44

1

If I understood the task correctly, what you are trying to achieve is something like this:

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

this array is going to be filtered by category

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

then use some shuffling algorithm, like the one from here 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;
}

and the final condition

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

Pluker

edited May 23 '17 at 11:44

Community

1
1

answered Jan 11 '15 at 10:10

sbedulin

4,102
24
34

Awesome! Thanks for the reply sbedulin. There is one thing I am unsure about. How would the HTML look on this? Also, would I just replace all of my current javascript with the code you've shown and it would work ? Or would I have to keep my current javascript for the on click and onload randomize functions? – h0bb5 Jan 12 '15 at 00:41
@h0bb5 welcome! I added working plunk to the answer - please have a look. Although I'm not sure what you are trying to achieve with videos in the displayed list. – sbedulin Jan 12 '15 at 09:25
Ah awesome! that's almost perfect! Yeah what i'm trying to achieve is just to have one of the resulting videos or images display at random and then on click it will randomize from that selected category. What changes can I make to achieve this? Thanks for the help and I will be sure up vote you! – h0bb5 Jan 13 '15 at 00:57
@h0bb5, thanks! I updated the plunk, you can use any html template in video view, e.g. play the video once it's selected. I don't understand `click` part though - one more random needed? :) – sbedulin Jan 13 '15 at 09:14
Yes!!! Just one more randomize is needed for the click part. So basically the div or section would be wrapped in an tag and once that section is clicked a randomize would occur but only from within the category that is selected :) Thanks heaps for your help! Once that is finished that will be absolutely everything I was having trouble with – h0bb5 Jan 13 '15 at 15:23
One more thing, I also noticed that it's outputting the randomized result as 'Webm: /videos/3.webm; Mp4: /videos/3.mp4' With the code I had written earlier I had it so that when it would randomize it would output the 'src' and 'type' into a video tag like this . So the results would output into the empty spaces in the tag. When I try this with your code I am getting undefined :S Thanks again! – h0bb5 Jan 13 '15 at 15:38
Awesome! That looks pretty much perfect. Thanks tons for your help, i'm going to go through this like crazy to learn what you did. One thing, I have two different file types playing, .webm and .mp4, in your code only one is loaded in, where does the other one go? There needs to be a fallback for browswer compatibillity as safari doesn't support .webm and vice versa with other browsers. If you see my code I have – h0bb5 Jan 13 '15 at 16:10
@h0bb5 to be honest I don't have a quick answer for `mp4/webm` compatibility, I'd suggest creating a simple page with single ` – sbedulin Jan 13 '15 at 18:00
The question wasn't so much about compatibility. More so just how to display the array or data into both tags like my initial code that I began with? where the first one will be .webm and the next will be .mp4 – h0bb5 Jan 13 '15 at 18:59
@h0bb5 I think I got what you mean. I updated plunk and `json` array so that available `` tags, e.g. ``, will now be added to ` – sbedulin Jan 13 '15 at 20:41

Can I pull images from a category with javascript?

1 Answers1