CODEWITHSUNDEEP
javascriptjquerycsshtmlhtml5-video
h0bb5
h0bb5

Reputation: 617

How to output math random array into HTML

I'm just trying to work on my javascript skills and I am trying to make a page that will load up an HTML5 video at random from an array.

Once the video is loaded I am trying to set it so once the video is clicked it will trigger the function to randomize a new video from the array and output the result into the HTML video code.

So every time the user clicks a video will be randomized and begin playing on the page.

I believe I am pretty close with the code I have written so far, but I can't seem to get it to randomize after it clicked on every click.

Here is my code

HTML

<a href="#" class="click">
            <section> 
                <div>
                    <video loop autoplay>
                      <source src="videos/1.mpg" type="video/ogg">
                      <source src="videos/1.webm" type="video/mp4">
                      Your browser does not support the <code>video</code> element.
                    </video>
                </div>  
        </section>
</a>

JavaScript 

// Loads in Notifier 
$(document).ready(function(){
    swal({   title: "Tap or Swipe to randomize",   
              confirmButtonColor: "#FF1D23",
              confirmButtonText: "Cool!", 
              imageUrl: "images/thumbs-up.jpg",
              timer: 4000
            });
});

//Array of Videos 
var videos = [
    [{type:'mp4', 'src':'videos/1.mp4'}, {type:'webm', 'src':'videos/1.webm'}],
    [{type:'mp4', 'src':'videos/2.mp4'}, {type:'webm', 'src':'videos/2.webm'}],  
];

//onClick + Action 
$(function() {
    $('a.click').click(function(e) {
        e.preventDefault();
        var randomIndex = parseInt(Math.random()*videos.length);
        $(this).find('videos').append('<source src="'+videos[randomIndex]+'" />');      
    });
});


function getRandomVideo() { 
var number = Math.floor(Math.random()*video.length);
document.write('<source src="'+videos[number]+'" />');
}

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

Upvotes: 0

Views: 407

Answers (2)

hip3r
hip3r

Reputation: 9

videos[number][0].src for .mp4 format and videos[number][1].src for .webm format

and make sure to correct object declaration:

{type:'mp4', 'src':'videos/2.mp4'}

should be {type:'mp4', src:'videos/2.mp4'}

Upvotes: 1

Phillip Dodson
Phillip Dodson

Reputation: 158

See this fiddle

//onClick + Action
$('a.click').click(function(e) {
    e.preventDefault();
    var randomIndex = parseInt(Math.random()*videos.length);
    $(e.currentTarget).find('video').html('<source src="'+videos[randomIndex][0].src+'" type="video/ogg" /><source src="'+videos[randomIndex][1].src+'"  type="video/mp4" />');
});

I left your data structure alone, although it could be structured better.

Couple of issues. First, you aren't creating your HTML string correctly. You have to use videos[randomIndex][0].src (notice the src). Secondly, you are .append() when you should be .html(). And lastly, you .find('videos') instead of .find('video'). The tag is a video (no S).

EDIT: Also, you can't do $(this).find(...) in that context. this refers to the click event, not the a tag. You need to get the TARGET of the event $(e.currentTarget).find('video'), not the event.

Upvotes: 1

Related Questions