How to randomize video on click and on page load

问题

I have been scratching my head for a few days now with this one. Just trying to get better at javascript but no one seems to be able to figure out what I am doing wrong here.

What I want is to create a data structure or array containing videos

On page load I would like a random video to be loaded and begin playing

After this I would like the user to be able to click the video to initiate the math.random and generate a new video in its place.

Issues - 1 - With the code I have whenever I click to randomize the video just disappears no console errors or anything.

2 - The page doesn't randomize on load

3 - I am not sure if this is the best way to go about as far as data structure is concerned?

This doesn't seem logically like a hard problem to solve but for me its been a real head scratcher. Any help is greatly appreciated!!

HTML

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

JavaScript

//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]+'" />');      
    });
});

//onLoad Randomize 
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]+'" />');
    });
});

回答1:

Here is working pen http://codepen.io/easingthemes/pen/PwWRdx

<a> tag will break on some browsers around block elements. You don't need <a>.

You need videos[number][index].src because videos[number] is an object. Also you need to reload video when you change src

$('video').load();
$('video').play();

HTML

<section>

  <div>
    <video loop autoplay>

      <source src="http://html5demos.com/assets/dizzy.mp4" type="video/mp4">
      <source src="http://techslides.com/demos/sample-videos/small.webm" type="video/ogg">
      Your browser does not support the <code>video</code> element.
    </video>
  </div> 

</section>

var videos = [
    [{type:'mp4', 'src':'http://techslides.com/demos/sample-videos/small.mp4'}, {type:'webm', 'src':'http://techslides.com/demos/sample-videos/small.webm'}],
    [{type:'mp4', 'src':'http://html5demos.com/assets/dizzy.mp4'}, {type:'webm', 'src':'http://html5demos.com/assets/dizzy.webm'}],  
];


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

回答2:

Ok this is an array of array of objects this is a function to change the 1st and second src and type

function getRandomVideo(videos) { 
var number = Math.floor(Math.random()*videos.length);
$('.click video source').eq(0).attr('type',videos[number][0].type).attr('src',videos[number][0].src);
$('.click video source').eq(1).attr('type',videos[number][1].type).attr('src',videos[number][1].src);
$('.click video').load();
$('.click video').play();
    }

DEMO use this function in any event you want

来源：https://stackoverflow.com/questions/27871537/how-to-randomize-video-on-click-and-on-page-load

标签

javascript

jquery

html

video