Question

I have BigVideo.js working on a few client sites and I was recently asked if I could load in 3 or 4 videos and have them load randomly with each visit. I am a beginner when it comes to JavaScript but I get the jist. Firstly I thought of writing an array of the video sources then a random function etc…

The problem is, there is an if firefox condition to show a .ogg video source if firefox is being used. I don’t really know how to go about loading arrays with this condition also in it so I would be grateful for any suggestions

Here is big video js > http://dfcb.github.com/BigVideo.js/

Here is my code for the index page showing the video :

<script>
$(function() {
var BV = new $.BigVideo({useFlashForFirefox:true});
BV.init();
BV.show('http://clients.kevinhowbrook.com/nw/bigvideo/vids/video1.mp4',{ambient:true},     {altSource:'http://clients.kevinhowbrook.com/nw/bigvideo/vids/video1.ogv'});
});
</script>

Answer 1

You can create an array of the several videos that may appear and select a member from the array at random:

var videos = ['http://clients.kevinhowbrook.com/nw/bigvideo/vids/video1.mp4',
              'some other video',
              'some third video'];
var index = Math.floor(Math.random() * videos.length);
BV.show(videos[index], params);

You would probably need the alt source in the array as well:

var videos = [
    {source: 'http://clients.kevinhowbrook.com/nw/bigvideo/vids/video1.mp4', alt: 'http://clients.kevinhowbrook.com/nw/bigvideo/vids/video1.ogv'},
    {source: 'some other video', alt: ''},
    {source: 'some third video', alt: ''}
];
var index = Math.floor(Math.random() * videos.length);
BV.show(videos[index].source, params);