martes, marzo 06, 2012

MULTIMEDIA GALLERY FOR IMAGES, VIDEO AND AUDIO

MULTIMEDIA GALLERY FOR IMAGES, VIDEO AND AUDIO

This multimedia gallery for images, video and audio is a progression of our previous galleries. The idea for this new gallery is to integrate video and audio as exhibit pieces along images. We use an XML file for defining the items in the gallery and a PHP class with an XSL Stylesheet ...

This multimedia gallery for images, video and audio is a progression of our previous galleries. The idea for this new gallery is to integrate video and audio as exhibit pieces along images.

We use an XML file for defining the items in the gallery and a PHP class with an XSL Stylesheet to transform the data. The XML file defines the locations of the items and their thumbnails. For video files, we can add more than one source or define a link to a YouTube video.

The structure of the XML file looks as follows:

1

2

3

4

5

6

7

8

9

10

11

12

13

14

15

16

17

18

19

20

21

22

23

24

25

26

xmlversion="1.0"?>

<MultimediaGallery>

<filetype="photo">

<thumb>media/photos/thumbs/3.jpgthumb>

<source>media/photos/3.jpgsource>

<description>this is a descriptiondescription>

file>

<filetype="video">

<thumb>media/videos/thumbs/html5.pngthumb>

<source>http://www.youtube.com/watch?v=siOHh0uzcuYsource>

<description>Youtube Video: Introduction to HTML5description>

file>

<filetype="video">

<thumb>media/videos/thumbs/bbbtrailer.pngthumb>

<source>media/videos/video1.oggsource>

<source>media/videos/video1.m4vsource>

<description>Video Integration Example: BBB Trailerdescription>

file>

<filetype="audio">

<thumb>media/audio/thumbs/audio1.jpgthumb>

<source>media/audio/audio1.oggsource>

<source>media/audio/audio1.mp3source>

<description>Audio Exampledescription>

file>

...

MultimediaGallery>

Once a thumbnail is clicked, we can navigate through the previews and see the descriptions (that can optionally be added to the configuration XML file). Images get resized automatically to the size of the user’s viewport. We also resize the thumbnails to fit into the grid elements.

For displaying video and audio we are using jMediaElementwhich is an HTML5 audio and video development kit with Flash and VLC Fallback.Please be aware that for non-embedded videos and audio files to be played in every browser, each necessary format needs to be added.

If you want to read more about HTML5 and video, we recommend the following resources: