这个多媒体画廊的图像，视频和音频是我们以前的画廊的一个进步。这个新画廊的想法是将视频和音频整合成图片。
我们使用一个XML文件来定义图库中的项目和一个带有XSL样式表的PHP类来转换数据。XML文件定义了项目和它们的缩略图的位置。对于视频文件，我们可以添加多个源或定义一个链接到YouTube视频。
XML文件的结构如下:
<?xml version="1.0"?><MultimediaGallery> <file type="photo"> <thumb>media/photos/thumbs/3.jpg</thumb> <source>media/photos/3.jpg</source> <description>this is a description</description> </file> <file type="video"> <thumb>media/videos/thumbs/html5.png</thumb> <source>http://www.youtube.com/watch?v=siOHh0uzcuY</source> <description>Youtube Video: Introduction to HTML5</description> </file> <file type="video"> <thumb>media/videos/thumbs/bbbtrailer.png</thumb> <source>media/videos/video1.ogg</source> <source>media/videos/video1.m4v</source> <description>Video Integration Example: BBB Trailer</description> </file> <file type="audio"> <thumb>media/audio/thumbs/audio1.jpg</thumb> <source>media/audio/audio1.ogg</source> <source>media/audio/audio1.mp3</source> <description>Audio Example</description> </file> ...</MultimediaGallery>一旦单击了缩略图，我们就可以浏览预览并查看描述(可以随意添加到配置XML文件中)。图像会自动调整大小到用户的视口大小。我们还调整缩略图以适应网格元素。
为了显示视频和音频，我们使用jMediaElement，这是一个HTML5音频和视频开发工具包，Flash和VLC的后退。
请注意，对于在每个浏览器中播放的非嵌入视频和音频文件，需要添加每种必要的格式。
如果你想阅读更多关于HTML5和视频的内容，我们推荐以下资源:
网络视频(深入HTML 5)
HTML5视频(维基百科)
5个工具，整合HTML5视频在你的网站(Mashable)
在Firefox中使用音频和视频(Mozilla开发中心)
我们希望您喜欢这个画廊并发现它有用!请继续关注更新!
