how to load random html files into a div in my index.html

programming web dev
1

hello,

i had found what i was seeking in one of your tutorials (Loading a Random HTML Page Inline

however, for any number of reasons, it simply will not work for me.

what i need is either

(1) able to show random video (.mp4) clips from my own domain as html background movie (like background picture)

OR

(2) load a random html file (that contain one .mp4 video file each) into a defined

location in my index.html file so one of my vid-01.html, vid-02.html, … vid-10.html files load as background video of my index.html PER refresh.

each vid-xx.html file contains: (vid-xx.html and myvid-xx.html have XX for numbers 01, 02, … etc.)

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>video</title>
<link href="alicss.css" rel="stylesheet" type="text/css" />
</head>
<body style="height:100%">
<video autoplay loop poster="images/vidimg.jpg" id="backvid">
<source src="images/myvid-xx.mp4" type="video/mp4">
</video>
</body>
</html>

CSS file:

/* CSS Document */
@charset "utf-8";

video#backvid {
position: fixed; right: 0; bottom: 0;
min-width: 100%; min-height: 100%;
width: auto; height: auto; z-index: -1000;
background: url(images/vidimg.jpg) no-repeat;
background-size: cover;
}

body,td,th {
	font-family: "Trebuchet MS", Arial, Helvetica, sans-serif;
}
body {
	margin-left: 0px;
	margin-top: 0px;
	margin-right: 0px;
	margin-bottom: 0px;
	background: transparent;
	background-color: transparent;
}

#contentArea {
background-color: transparent;
background:url(images/meh-c.png) no-repeat right bottom;
height: 100vh;
width: 100%;
}

#cf {
  position:relative;
  height:150px;
  width:200px;
  margin:0 auto;
}

#cf img {
	position: absolute;
	left: 0;
	-webkit-transition: opacity .50s ease-in-out;
	-moz-transition: opacity .50s ease-in-out;
	-o-transition: opacity .50s ease-in-out;
	transition: opacity .50s ease-in-out;

}

#cf img.top:hover {
  opacity:0;
}

#retro1_image {
	margin: 0 auto;
	width: 210px;
	height: 200px;
	transition: background-image .5s ease-in-out;
	background-image: url(images/retrolink-1a.png);
}

#retro1_image:hover {
	background-image: url(images/retrolink-1b.png);
}

#retro2_image {
	margin: 0 auto;
	width: 210px;
	height: 200px;
	transition: background-image .5s ease-in-out;
	background-image: url(images/retrolink-2a.png);
}

#retro2_image:hover {
	background-image: url(images/retrolink-2b.png);
}

#retro3_image {
	margin: 0 auto;
	width: 210px;
	height: 200px;
	transition: background-image .5s ease-in-out;
	background-image: url(images/retrolink-3a.png);
}

#retro3_image:hover {
	background-image: url(images/retrolink-3b.png);
}

#retro4_image {
	margin: 0 auto;
	width: 210px;
	height: 200px;
	transition: background-image .5s ease-in-out;
	background-image: url(images/retrolink-4a.png);
}

#retro4_image:hover {
	background-image: url(images/retrolink-4b.png);

}.aliselvi_box {
	background-color: transparent;
}

the index.html file goes like:

<html>
<head>
<title>..:: aliselvi.com ::..</title>
<link href="alicss.css" rel="stylesheet" type="text/css" />
</head>
<script src="inline.js" type="text/javascript"></script>
<body onload="loadExternalHTMLPage()" style="height:100%">
<div id="contentArea">


<!--  this table contains some transparent hover buttons that land on top of the background video, nothing all that fancy -->
<table width="860" height="100%" border="0" align="center" cellpadding="0" cellspacing="0">
    <tr>
      <td valign="bottom">
      <div id="retro1_image" class="shadow">
      <a href="#"><img src="images/dot.png" width="210" height="200" /></a>
      </div>
      </td>
      <td><img src="images/dot.png" width="20" height="150" /></td>
      <td valign="bottom">
      <div id="retro2_image" class="shadow">
      <a href="#"><img src="images/dot.png" width="210" height="200" />
      </div>
      </td>
      <td><img src="images/dot.png" width="20" height="150" /></td>
      <td valign="bottom">
      <div id="retro3_image" class="shadow">
      <a href="#"><img src="images/dot.png" width="210" height="200" />
      </div>
      </td>
      <td><img src="images/dot.png" width="20" height="150" /></td>
      <td valign="bottom">
      <div id="retro4_image" class="shadow">
      <a href="#"><img src="images/dot.png" width="210" height="200" />
      </div>
      </td>
    </tr>
  </table>
  


</div>
</body>
</html>

thats about it… the images and video (.mp4) files are all under “/image”.

would be happy if this worked out.

2

The easiest way would be #1. Place a element on your page and programmatically set its src value to the random mp4 that you want. You can see an example of how to set the video src element at this slightly unrelated tutorial: http://www.kirupa.com/html5/accessing_your_webcam_in_html5.htm

To ensure your video appears behind everything else, you need to set some CSS properties. Here is an example (that I haven’t verified) that should work:

#myVideo {
	position: fixed;
	right: 0;
	top: 0;
	width: 100%;
	height: 100%;
	z-index: -1000;
}

Let me know if you need help with the CSS, and I can take deeper look at it.

Cheers,
Kirupa =)

3

thank you but i already have that code in my CSS file.

what i need is how to make it so my index.html file (upon loading or refresh) chooses one the the 10 video .mp4 files randomly and puts in into the body?

4

as a side note;

i tried the Loading a Random HTML Page Inline tutorial without any modification (just copy pasted) and it didnt work. i even used the good.html and evil.html files made just so i didnt modify ANYthing in the given codes.

and the only thing contained in the good/evil files were different color background and “good” / “evil” words written in the files respectively to see if they actually got loaded.

5

Are you testing locally or on a web server? Using the xhr approach, you need to be running via a web-server. That may explain why the example isn’t working for you when you try it locally.

Loading a random video is going to be similar to what I show here: http://www.kirupa.com/html5/picking_random_item_from_array.htm

Have an array with each item containing the path to a video. The code will allow you to pick a random one that you can then display into your video element.

Cheers,
Kirupa

6

loaded up all the videos and the files in the tutorial to the server and tried online - alas no results. !

7

Can you post a link to your page?

8

nice…code boss