Diego Pino: MULTIMEDIA GALLERY FOR IMAGES, VIDEO AND AUDIO

martes, marzo 06, 2012

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

VIEW DEMO DOWNLOAD SOURCE

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:

xml version="1.0"?>

<MultimediaGallery>

    <file type="photo">

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

        <source>media/photos/3.jpgsource>

        <description>this is a descriptiondescription>

    file>

    <file type="video">

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

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

        <description>Youtube Video: Introduction to HTML5description>

    file>

    <file type="video">

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

        <source>media/videos/video1.oggsource>

        <source>media/videos/video1.m4vsource>

        <description>Video Integration Example: BBB Trailerdescription>

    file>

    <file type="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:

Video on the Web (Dive Into HTML 5)
HTML5 video (Wikipedia)
5 Tools For Integrating HTML5 Video in Your Website (Mashable)
Using audio and video in Firefox (Mozilla Developer Center)

We hope you enjoy this gallery and find it useful! Stay tuned for updates!

VIEW DEMO DOWNLOAD SOURCE