HTML5 Slideshow Maker

How to Add Music and Video to HTML5 Slideshow

HTML5 Slideshow Maker can easily turn your steady digital photos into stunning HTML5 slideshows. To make your HTML5 photo slideshow more entertaining, you may also like adding some music and videos to it. It's a pity that the current version of HTML5 Slideshow Maker cannot help you to add music and video to HTML5 slideshow. The developers are working on this function, so you may be able to add music and videos to HTML5 slideshow not long. But before that time, you can refer the steps below to know how to add music and videos to HTML5 slideshow manually.

First, let's watch an HTML5 slideshow with music and videos. You can download the output files of this HTML5 slideshow. The following steps will take this HTML5 slideshow as the example.

Download

The Sample Slideshow

View

YouTube Video Tutorial

Tips: The YouTube video is a high definition video, you can view the 720p mode in full screen.

Preparation for Adding Music and Videos to HTML5 Slideshow

Part One: Add music to HTML5 slideshow

Step 1. Open the output folder of the HTML5 photo slideshow.

If you use HTML5 Slideshow Maker to make your HTML5 photo slideshows, HTML5 Slideshow Maker will saved your slideshow project in one folder. This first step is to open that folder.

Step 2. Open the folder named "res".

There is a folder named "res" in the slideshow project folder. Open this folder.

Step 3. Put the music files into the folder "res".

Find your music files, and then put them into the folder "res". As mentioned in the preparation above, all music files must be prepared in two formats: mp3 and ogg. For example, the music your plan the add is named "Baby", then you must prepare two files. They are: Baby.mp3 and Baby.ogg.

Here recommend you use Any Audio Converter to help you convert audio between MP3, WMA, WAVE, AAC, M4A and OGG formats as well as convert other unprotected audio formats.

Step 4. Edit the XML file.

There is an XML file in the output file of your HTML5 slideshow. Open this file, and find the codes refers to music.

HTML5 Codes of the HTML5 Photo Slideshow

Add the music file path to the codes.

HTML5 Codes of the HTML5 Photo Slideshow

Part Two: Add video to HTML5 slideshow

Step 1. Open the output folder of the HTML5 photo slideshow.

This step is same with the Step 1 above.

Step 2. Create a new folder, name it "videos".

This new folder "videos" will be used for saving video files.

Step 3. Put the video files into the folder "videos".

Also mentioned in the preparation above, all video files must be prepared in two formats: mp4 and ogg. For example, the video your plan to add is named "Party", and then you must prepare two files. They are: Party.mp4 and Party.ogg.

If you need a video converter, please use Any Video Converter. Any Video Conver is a professional video converter. To convert your video file to ogg format video file, first, use Any Video Converter convert your video file to OGV first, then rename the ogv file to ogg file.

Step 4. Edit the XML file.

Open the XML file, find the codes which refers to the slides.  If you want to play the video after the second slide finish playing, then find the slide refers to the second slide.

HTML5 Codes of the HTML5 Photo Slideshow

Add the video file path to the codes.

HTML5 Codes of the HTML5 Photo Slideshow