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

Question

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 hard coded 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 link this element such as camera ID in the HTML5 so that I don't have to hard code it. I just have to type "CameraID" in HTML5 then it will immediately show the video name. Please Help!!! Thank you!!

You would need to use an XML parser to do that, I couldn't understand exactly what it is you're trying to do. Are you looking to create XML file with video information data and then using Javascript to print the XML data into HTML? — odedta, Jun 22 '15 at 08:43
Yes, i am looking to create a XML file with video information data and looking for someway to print the XML data into HTML. At the same time, i think the current xml file i have, it is not written clear yeah? — Judith Tan, Jun 22 '15 at 09:09

score 0 · Answer 1 · answered Jun 22 '15 at 08:52

0

You can create an XSTL document. Simply put, this allows you create your own XML-based document standard by defining transformations for it to XHTML.

A problem (or an inconvenience) could be the following though: The <video> tag is not part of the XHMTL standard but only part of HTML 5. I nevertheless assume that most browsers should still display your videos when using XSTL.

answered Jun 22 '15 at 08:52

Hauke P.

2,695
1
20
43

alright bro! i will try it now and see if it works! Thanks for your prompt response and help~ good day to you – Judith Tan Jun 22 '15 at 09:12

score 0 · Accepted Answer · edited May 23 '17 at 11:44

0

Your XML file is not clear, yes. I would create something like:

<?xml version='1.0' encoding='utf-8'?>
<root>
    <video>
        <name>Lions eating</name>
        <width>400</width>
        <height>300</height>
        <url>https://www.youtube.com/watch?v=VECtHHQjCqg</url>
        <CameraID>0101010</CameraID>
    </video>
    <video>
        <name>Zebras eating</name>
        <width>400</width>
        <height>300</height>
        <url>https://www.youtube.com/watch?v=2y4QByEFw5U</url>
        <CameraID>0202020</CameraID>
    </video>
</root>

Then you can use DOMDocument parser, use load() function to load the XML file and then getElementsByTagName() to select and print them as HTML.

Reference:

This is the class with all the functions you can use: http://php.net/manual/en/class.domdocument.php.
Some example code: simplexml_load_file does not recognize <dc:title> tags
More example code: XML: setting values of namespace elements

edited May 23 '17 at 11:44

Community

1
1

answered Jun 22 '15 at 09:36

odedta

2,430
4
24
51

Hi there bro! would you mind to teach me how would you use a DOMDocument parser such as using load function to load the xml file?? Will greaty appreciate~ – Judith Tan Jun 23 '15 at 02:01
If i follow your XML file, i would have to rewrite the width and height for 10 times if i have 10 videos. :( – Judith Tan Jun 23 '15 at 02:07
Hey, check my revised answer. In addition, if you like it and it answers your question, please accept it as an answer and vote up. – odedta Jun 23 '15 at 07:03
sorry bro! thanks for the useful links! i am fraid i cant't vote. it need 15 reputation and i only join stakoverflow a few days ago. – Judith Tan Jun 23 '15 at 09:46

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

2 Answers2