Loading an HTML5 video player from Array

Question

I have an array of videos and I would like to load them into the set video player that is currently on the page. Here's what I have:

var current = 0;

var videos = ["01", "02", "03", "04"];

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;

}

function shuffleAll(){
    shuffle(videos);
}

function loadVideo(){
    var video = document.getElementById('video');
    var mp4 = document.getElementById('mp4');
    d = new Date();

    mp4.src = "videos/" + videos[current] + '.mp4';
    alert(mp4.src);
    video.load();
    video.play();

}

And my HTML:

<body onLoad="shuffleAll()">

<a href="" onClick="javascript:loadVideo();">Load Video</a><br>
<video id="video" controls width="560">
     <source id="mp4" type="video/mp4" />
</video>
</body>

But I click my Load Video Button, and it doesn't do anything. What am I missing?

EasyBB · Accepted Answer · 2014-09-23 18:31:50Z

1

You need to pause the video then load the video then play it. It's a tricky son o bitch really. You'll need to add the listener to a videobutton (changing source via randomizing or something)

videobutton.addEventListener("click", function(event) {
   video.pause();
   mp4.setAttribute('src', 'videos/' + videos[current] + '.mp4');
   video.load();
   video.play();
},false);

This will work.

var current = 0;

var videos = ["01", "02", "03", "04"];

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;

}

function shuffleAll(){
   shuffle(videos);
} 

function loadVideo(){
   var video = document.getElementById('video');
   var mp4 = document.getElementById('mp4');
   d = new Date();
   video.pause();
   mp4.setAttribute('src', 'videos/' + videos[current] + '.mp4');
   video.load();
   video.play();
 }

edited Sep 23, 2014 at 18:31

answered Sep 23, 2014 at 18:04

EasyBB

6,62210 gold badges51 silver badges82 bronze badges

Sign up to request clarification or add additional context in comments.

3 Comments

EasyBB Over a year ago

No it's a cached object. so say your button is <div id="next">NEXT</div> so our videobutton would be `var videobutton = document.getElementById('next'); I'll fix it to work with yours

Murphy1976 Over a year ago

I'm going to need jQuery for this, huh.

EasyBB Over a year ago

No never -_- if jQuery can do it, JavaScript can do it.

Collectives™ on Stack Overflow

Loading an HTML5 video player from Array

1 Answer 1

3 Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

3 Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related