CODEWITHSUNDEEP
javascriptjqueryhtmlvideo
h0bb5
h0bb5

Reputation: 617

How to randomize in pairs?

I'm trying to randomize some videos that are both .webm and .mp4.

I have a two of each video for instance vid1.webm and vid1.mp4

I'd like to have the videos randomize and pull both at the same time into the video tag.

safari doesn't support .webm so that's why i would like to have .mp4 as a backup and need both to randomize into the browser on click.

I am loading them from an array and also can't figure out how the folder structure should be listed out, I would really like to keep them in an array as I am loading in several hundred

var randomImage = new Array();

randomVideo[0] = "videos/1.webm/ or mp4"; //not sure how to do the file structure
randomVideo[1] = "videos/2.webm/ or mp4"; //
randomVideo[2] = "videos/3.webm/ or mp4"; //

//trying to figure out this part

$(function() {
    $('a.click').click(function(e) {
        e.preventDefault();
        var number = Math.floor(Math.random()*randomVideo.length);
        $(this).html('<source src="'+randomVideo[number]+'" />');
    });
});

$(function() {
    $('a.click').click(function(e) {
        e.preventDefault();
        var number = Math.floor(Math.random()*randomVideo.length);
        $(this).html('<source src="'+randomVideo[number]+'" type="video/mp4" /> )
    }
})

html 

<a href="#" class="click">
    <section> 
        <video controls autoplay>
            <script>
               randomVideo()
            </script>
        </video>    
    </section>
</a>

If anyone can help me figure this out it would be greatly appreciated! Can't figure it out, still learning.

Upvotes: 1

Views: 82

Answers (2)

geedubb
geedubb

Reputation: 4057

You have multiple issues. Firstly your array name doesn't match (randomImage and randomVideo). Not sure why you are hooking the click event twice. One approach is to store the common parts of the path in the array and then concatenate the file ending. Also, I have no idea what you were trying to do with the img tag...

Anyway, the code below should help you, if I have understood what you are trying to do correctly. 

var randomVideo = new Array();
// define your common video paths here
randomVideo[0] = "videos/1";
randomVideo[1] = "videos/2";
randomVideo[2] = "videos/3";

function randomiseVideos() {
        var number = Math.floor(Math.random() * randomVideo.length);
        $('#myvid').empty(); // clean up from last time
        // now add 2 sources (will fall back appropriately depending on client support)
        $('#myvid').append('<source src="' + randomVideo[number] + '.webm" type="video/webm">');
        $('#myvid').append('<source src="' + randomVideo[number] + '.mp4" type="video/mp4">');
}

$(function () {
    // Randomise on page load
    randomiseVideos();
    // handle click on test link
    $('a.click').click(function (e) {
        e.preventDefault();
        randomiseVideos();
    });
});

HTML:

<a href="#" class="click">Test Link</a>
<section>
    <video id="myvid" width="320" height="240" controls autoplay></video>
</section>

JS fiddle demo

Upvotes: 1

jermel
jermel

Reputation: 2336

The video element supports multiple sources https://developer.mozilla.org/en-US/docs/Web/Guide/HTML/Using_HTML5_audio_and_video

A very simple solution would be to store a list of video objects in your array:

var videos = [
    [{type:'mpg', 'src':'blah.mpg'}, {type:'webm', 'src':'blah.webm'}],
    [{type:'mpg', 'src':'blah2.mpg'}, {type:'webm', 'src':'blah2.webm'}],
];

...

var video = videos[randomIndex];

And use that to output sources like:

<video controls>
  <source src="blah.mpg" type="video/ogg">
  <source src="blah.webm" type="video/mp4">
  Your browser does not support the <code>video</code> element.
</video>

Upvotes: 1

Related Questions