使用XML创建配置文件并在HTML5中读取XML

时间:2015-06-22 08:39:03

标签: javascript css xml html5

我正在创建一个视频监控墙。我想尝试使用HTML5在1个网页上同时运行10个视频。但我很难编码。因此,我想使用XML创建配置文件以使用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>

现在,我需要使用xml创建配置文件以使用html5。所以在未来,如果我想改变一些元素,我不必去改变html5,只需更改xml文件中的元素。

<?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>

因此,我将此元素(例如相机ID)链接到HTML5中,以便我不必对其进行硬编码。我只需要在HTML5中输入“CameraID”,然后它会立即显示视频名称。请帮忙!!!      谢谢!!

2 个答案:

答案 0 :(得分:0)

您可以创建XSTL document。简而言之,这允许您通过定义XHTML的转换来创建自己的基于XML的文档标准。

问题(或不方便)可能如下:$link = mysql_connect('localhost', 'mysql_user', 'mysql_password'); if (!$link) { die('Could not connect: ' . mysql_error()); } $db_selected = mysql_select_db('foo', $link); if (!$db_selected) { die ('Can\'t use foo : ' . mysql_error()); } //$from_date = $_POST['from_date']; //$to_date = $_POST['to_date']; $from_date = date("Y-m-d",strtotime('06/10/2015')); $to_date = date("Y-m-d",strtotime('06/16/2015'));//$_POST['to_date']; $query = "SELECT * FROM table WHERE from_date >= '".$from_date."' AND to_date <= '".$to_date."'"; // Perform Query $result = mysql_query($query); if (!$result) { $message = 'Invalid query: ' . mysql_error() . "\n"; $message .= 'Whole query: ' . $query; die($message); } while ($row = mysql_fetch_assoc($result)) { print_r($row); } 标记不是XHMTL标准的一部分,而只是HTML 5的一部分。我仍然假设大多数浏览器在使用时仍应显示您的视频XSTL。

答案 1 :(得分:0)

你的XML文件不清楚,是的。我会创建类似的东西:

<?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>

然后,您可以使用DOMDocument解析器,使用load()函数加载XML文件,然后getElementsByTagName()选择并将其打印为HTML。

参考:

  1. 这是包含您可以使用的所有功能的类:http://php.net/manual/en/class.domdocument.php
  2. 一些示例代码:simplexml_load_file does not recognize <dc:title> tags
  3. 更多示例代码:XML: setting values of namespace elements