使用XML创建配置文件并在HTML5中读取XML
Creating a config file using XML and reading the XML in HTML5
我正在创建一个视频监控墙。我正在尝试使用HTML5在一个网页上同时运行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>
因此，我在HTML5中链接了这个元素，比如相机ID，这样我就不必硬编码了。我只需要在HTML5键入"CameraID"，它就会立即显示视频名称。请帮忙！！！非常感谢。
您的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。
参考：
- 这是一个包含所有可以使用的函数的类：http://php.net/manual/en/class.domdocument.php.
- 一些示例代码：simplexml_load_file无法识别<dc:title>标记
- 更多示例代码：XML:设置命名空间元素的值
您可以创建一个XSTL文档。简单地说，这允许您通过定义到XHTML的转换来创建自己的基于XML的文档标准。
但问题（或不便）可能如下：<video>标记不是XHMTL标准的一部分，而只是HTML5的一部分。尽管如此，我认为大多数浏览器在使用XSTL时仍然应该显示您的视频。
相关文章：
- Canvas Html5绘图应用程序，移动画布会导致重大问题
- 如何使用phaser使html5游戏在移动设备浏览器上运行
- HTML5音频加载和播放获胜'我不能在iPad上工作
- 我应该如何从xml文件构建一个javascript页面
- HTML5页面底部棒
- Google/html5语音识别JavaScript SDK Chrome网络工具包SpeechRecognition
- Is onfling available for html, html5
- 为什么HTML5拖放的目标是孩子?(可排序列表）
- 安卓平台上的QWebView HTML5地理位置
- 如何在HTML5文档中添加xml
- 将具有控件布局的Xml文件渲染到HTML5页面中
- 从 xml 文件创建 html5 播放列表
- 用上传的XML文件填充HTML5输入字段
- HTML5 localStorage (XML/JSON data)
- 动态HTML5播放器与XML和按钮
- HTML5包含Javascript document.write()不能处理XML文件
- 使用XML创建配置文件并在HTML5中读取XML
- 动态页面与html5+XML+JS
- 用javascript将Xml转换为HTML5
- HTML5文件api，读取xml/文本文件并显示在页面上
