MULTIMEDIA GALLERY FOR IMAGES, VIDEO AND AUDIO

    Rating: ★★★★☆
    View: 130
    Download: 112
    Từ khóa:

    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:

    
    
        
            media/photos/thumbs/3.jpg
            media/photos/3.jpg
            this is a description
        
        
            media/videos/thumbs/html5.png
            http://www.youtube.com/watch?v=siOHh0uzcuY
            Youtube Video: Introduction to HTML5
        
        
            media/videos/thumbs/bbbtrailer.png
            media/videos/video1.ogg
            media/videos/video1.m4v
            Video Integration Example: BBB Trailer
        
        
            media/audio/thumbs/audio1.jpg
            media/audio/audio1.ogg
            media/audio/audio1.mp3
            Audio Example
        
        ...
    

    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 jMediaElement which 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!

    loading Đang tải...

    template được ưa chuộng