How to Embed HTML5 Slideshow with Flash Fallback
Most websites replaced the flash slideshows with HTML5 slideshows for the advantages of HTML5. However, though the latest versions of the main browsers (IE, Chrome, Firefox, Safari, and Opera) are all support HTML5, some people still want to find a way for letting the HTML5 incompatible browsers' (mainly refers to IE6, IE7, IE8) users have access to their photo slideshows. They are unsatisfied with HTML5 slideshows and want a more perfect solution for their photo slideshows. This request is similar to the HTML5 video users. Flash fallback is the hot solution for HTML5 video users. And it is the solution for HTML5 slideshows too.
Note: The future versions of HTML5 Slideshow Maker will help users to make HTML5 photo slideshows with flash fallback automatically.
YouTube Video Tutorial
In order to let you see the steps, we uploaded a tutorial video to YouTube.
View the video: How to embed HTML5 Slideshow with Flash Fallback.
Download Sample Photo Slideshow
Here you can download an sample photo slideshow and video tutorials. After downloading, please unzip the files.
Steps for Embedding an HTML5 Photo Slideshow with a Flash Slideshow
In our HTML5 tutorial How to Embed an HTML5 Photo Slideshow to Website, we detailed shared the way of how to embed an HTML5 photo slideshow to website. Embedding an HTML5 photo slideshow with flash slideshow fallback is based on that HTML5 tutorial. You should know how to embed an HTML5 photo slideshow to website first, and then learn how to edit the codes to let HTML5 slideshows and flash slideshow freely converts between HTML5 compatible browsers and HTML5 incompatible browsers.
Step 1. Preparation
Because photo slideshow in HTML5 supportable browsers is an HTML5 photo slideshow and it turns into flash slideshow in HTML5 incompetible browsers, so you need to make two slideshows.
- An HTML5 photo slideshow - Download HTML5 Slideshow Maker to make HTML5 slideshows;
- A flash slideshow - Download Photo Slideshow Maker to make flash slideshows.
Step 2. Open the output folder of the HTML5 photo slideshow.
After you publish an HTML5 photo slideshow with HTML5 Slideshow Maker or Photo Slideshow Maker, you will get the output folder for your HTML5 slideshow. This step is to open that output folder. In the sample photo slideshow project, the output folder of the HTML5 slideshow is named "html5".
Step 3. Put the output folder of the flash slideshow into the output folder of the HTML5 slideshow.
This step is to put the output folder of your flash slideshow into the output folder of your HTML5 photo slideshow. In the sample photo slideshow project, the output folder of the flash slideshow is named "flash". You can see it is in folder "html5".
Step 4. Edit codes to embed the HTML5 slideshow with flash fallback.
Get the HTML5 codes of the HTML5 slideshow: The HTML5 tutorial How to Embed an HTML5 Photo Slideshow to Website tells you that you need to open the html file which is not named "fs_aux" to get the HTML5 codes of your HTML5 photo slideshow. In the sample photo slideshow, the "slides.html" in folder "html5" is the file which offers the HTML5 slideshow codes. Open this file, we get the following HTML5 codes.
Get the codes of the flash slideshow: Like getting the HTML5 codes of the HTML5 photo slideshow, you just need to open the html file which is not named 'fs_aus" in the folder "flash". The codes of the example flash slideshow are below. You can see these codes by open folder "html5" >folder "flash">html5 file "slides".
Edit the codes: Below are the edited codes for the sample slideshow. By referring to these codes, you can to know how to make your own HTML5 photo slideshow with flash fallback.