CODEWITHSUNDEEP
javascriptjqueryiosarrays
user1204493
user1204493

Reputation: 184

Adding and Displaying Video from a random array of objects in javascript

I have an iOS app that currently allows the user to tap on an image. A random image from an array, along with a description of the image is then shown to the user. I’d like to add a random video that is an example of the image.

So: 1. User taps image of a photo. 2. A new random photo along with a description is displayed. 3. Specific video about the photo is displayed.

The first two parts (image and description) are working, but I don’t know how to get the video file to display. My tries below:

Html element to hold the video display: 

<video id="video_holder">

</video>

<!-- This script creates random photos along with descriptions when clicked. I want to add random videos too.  -->
<!-- Begin-->

< script type = "text/javascript" >
  var rand1 = 0;
var useRand = 0;

var descriptions = [];
var videos = [];


var descriptionHolder = document.getElementById('description_holder');//image description
var videoHolder = document.getElementById('video_holder');//add video var



//Starter
function swapPic() { //call a random image when image clicked

  var imgnum = images.length = 37; //Get first 38 of array starts at 0 so subtract 1 to get all elements or number to designate num elements.

  do {
    var randnum = Math.random();

    rand1 = Math.round((imgnum - 1) * randnum) + 1;
  } while (rand1 == useRand);
  useRand = rand1;
  document.randimg.src = images[useRand].src;
  descriptionHolder.innerHTML = descriptions[useRand]; //photo description for first 38 photos
 videoHolder.innerHTML = videos[useRand]; //here is where I'm lost!
}

   

   

images = new Array;
images[1] = new Image();
images[1].src = "images/Photo1.png";
descriptions[1] = “A lovely photo about….”;


images[2] = new Image();
images[2].src = "images/Photo2.png";
descriptions[2] = “Another photo description here…”;;

I’ve tried adding another category to my array, but it doesn’t work. Like this:

images[1] = new Image();
images[1].src = "images/Photo4.png";
descriptions[1] = “More words of description here…“;
videos[1] = “videos / myvideo1.mp4”;

I’ve also tried this:

images = new Array;
images[1] = new Image();
images[1].src = "images/Photo1.png";
descriptions[1] = “photo description here…”;
videos[1].src = "images/videos/myVideo.mp4";

I'm sure those of you who know this stuff are wondering,"What the heck is she doing?" I appreciate your patience. Thank you in advance for your help. I am swimming in the deep end of the pool and need lifepreserver. -Rachel

Upvotes: 0

Views: 1371

Answers (1)

mc01
mc01

Reputation: 3770

I can add a more detailed answer later, but using innerHTML of videoHolder will only put the video filename as text inside the <video> tag. 

<video>
   images/videos/myvideo.mp4
</video>

As you've discovered, this doesn't work :)

You need to change the src attribute of the videoHolder element: 

<video id="video_holder" src="images/videos/myvideo.mp4">

OR add a <source> node w/the filename instead (this route allows multiple file types: mp4, ogv, webm, etc):

<video id="video_holder">
   <source src="images/videos/myvideo.mp4" type="video/mp4">
   <source src="images/videos/myvideo.webm" type="video/webm>
</video>

The easiest approach in your JS would be:

videoHolder.src = videos[useRand];

or 

videoHolder.innerHTML = "<source src='" + videos[useRand] + "' type='video/mp4'>";

(Note, haven't tested this, but should hopefully point you in the right direction)

Upvotes: 1

Related Questions