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
– odedta, Commented Jun 22, 2015 at 8: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
– Judith Tan, Commented Jun 22, 2015 at 9:09

Community · Accepted Answer · 2017-05-23 11:44:33Z

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, 2017 at 11:44

CommunityBot

11 silver badge

answered Jun 22, 2015 at 9:36

odedta

2,4785 gold badges26 silver badges57 bronze badges

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

4 Comments

Judith Tan Over a year ago

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 Over a year ago

If i follow your XML file, i would have to rewrite the width and height for 10 times if i have 10 videos. :(

odedta Over a year ago

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.

Judith Tan Over a year ago

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.

Hauke P. · Accepted Answer · 2015-06-22 08:52:54Z

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, 2015 at 8:52

Hauke P.

2,8531 gold badge23 silver badges48 bronze badges

1 Comment

Judith Tan Over a year ago

alright bro! i will try it now and see if it works! Thanks for your prompt response and help~ good day to you

Collectives™ on Stack Overflow

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

2 Answers 2

4 Comments

1 Comment

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

4 Comments

1 Comment

Your Answer

Sign up or log in

Post as a guest

Linked

Related