Creating a config file using XML and reading the XML in html5

i am creating a video monitoring wall. I am trying to run 10 videos simultaneously on 1 webpage using html5. But i am hard coding it. So therefore, i would like to create a config file using xml to work with the html5.

so for example here is my hardcoded html5:
<html> 

<head>
<h1><u> HTML Video Tag Example </u></h1>
<style>
h1 { 
text-align: center;
color: #FFFFFF;
}



#container { 
    background: grey;
    border-radius:8px;
    width:400px;
    border: 5px solid grey;
    padding: 0px;
    margin:0px;
    text-align: center;
    color: white;
}




video {
height: 295px;
width: 400px;
}




</style>


<script "text/javascript">
  window.oncontextmenu = function() {
    return false;
  }



  function changeScreenSize(w,h)
     {
       window.resizeTo( w,h )
     }

 </script>
</head>

<body  style="background-color:#000000" onload="changeScreenSize(1300,940)">
<table border="0">
<tr>

<td>
<div id="container" > Video 1
<video width="400" height="320" controls="controls"  autoplay="autoplay" loop="loop">
  <source src="Sample Videos (52) - Copy.mp4-SD.mp4" type="video/mp4">
   <source src="Sample Videos (52) - Copy.mp4-SD.oggtheora.ogv" type="video/ogg">
    <source src="Sample Videos (52) - Copy.mp4-SD.webmhd.webm" type="video/webm">
</video>
</div>
</td>

<td>
<div id="container" > Video 2
<video width="400" height="320" controls="controls"  autoplay="autoplay" loop="loop">
  <source src="ArchitectVideo.ogv" type="video/ogg">
  <source src="ArchitectVideo.webmhd.webm" type="video/webm">
    <source src="ArchitectVideo.mp4.mp4" type="video/mp4">
</video></div>
</td>

<td>
<div id="container" > Video 3
<video width="400" height="320" controls="controls"  autoplay="autoplay" loop="loop">
  <source src="elephants-dream.webm" type="video/webm">
    <source src="elephants-dream.mp4.mp4" type="video/mp4">
    <source src="elephants-dream.oggtheora.ogv" type="video/ogg">
</video>
</div>
</td>


</tr>
<tr>

<td>
<div id="container" > Video 4
<video width="400" height="320" controls="controls"  autoplay="autoplay" loop="loop">
  <source src="big-buck-bunny_trailer.webm" type="video/webm">
    <source src="big-buck-bunny_trailer.mp4.mp4" type="video/mp4">
    <source src="big-buck-bunny_trailer.oggtheora.ogv" type="video/ogg">

</video>
</div>
</td>


<td>
<div id="container" > Video 5
<video width="400" height="320" controls="controls" autoplay="autoplay" loop="loop">
  <source src="small.webm" type="video/webm">
    <source src="small.mp4.mp4" type="video/mp4">
     <source src="small.oggtheora.ogv" type="video/ogg">

</video></div>
</td>



<td>
<div id="container" > Video 6 
<video width="400" height="320" controls="controls" autoplay="autoplay" loop="loop">
  <source src="clipcanvas_14348_offline.mp4" type="video/mp4">
   <source src="clipcanvas_14348_offline.webmhd.webm" type="video/webm">
      <source src="clipcanvas_14348_offline.oggtheora.ogv" type="video/ogg">


</video>
</div>
</td>

</tr>
<tr>

<td>
<div id="container" > Video 7
<video width="400" height="320" controls="controls" controls poster="Snowball.png" autoplay="autoplay" loop="loop">
<source src="snowball.mp4" type="video/mp4">
<source src="snowball.webm" type="video/webm">
<source src="snowball.ogv" type="video/ogg">
</video>
</div>
</td>

<td>
<div id="container" > Video 8
<video width="400" height="320" poster="html5-video-element-test.png" controls  autoplay loop>
<source src="html5-video-element-test.mp4" type="video/mp4"><!-- Better quality, so use first. -->
<source src="html5-video-element-test.webm" type="video/webm">
<source src="html5-video-element-test.ogg" type="video/ogg">
 </video>
</div>
</td>
 </tr>

</table>

</body> 
</html>
________________________________________________________________________
Now, i need to create a config file using xml to work with the html5. So for instance in future if i want to change some elements, i dont have to go html5 to change but just change the element at the xml file.

<?xml version="1.0" encoding="UTF-8"?>
<xmldata>

    <title><h1><u> HTML Video Tag Example </u></h1></title>

    <video> 
          <height>280</height>
          <width>400</width>
    </video>

    <container>
       <width>400</width>
    </container>  


    <CameraCount>7</CameraCount>
    <CameraDetails>
               <CameraID>Video1</CameraID>
               <CameraID>Video2</CameraID>
               <CameraID>Video3</CameraID>
               <CameraID>Video4</CameraID>
               <CameraID>Video5</CameraID>
               <CameraID>Video6</CameraID>
               <CameraID>Video7</CameraID>
    </CameraDetails>       

</xmldata>


So therefore i do i link this element such as camera ID in the html5 so that i dont have to hard coded it. I just have to type "CameraID" in html5 then it will immediately show the video name. Please Help!!!
 Thank you!!


Source: xml

Leave a Reply