The ProShow Blog

Tips, tutorials & inspiration for making slideshows

Creating and Embedding HTML 5 Video with ProShow 7

HTML5 Video Output

New in ProShow 7 is the ability to publish your slideshows to HTML5 video and easily embed your videos on your website or blog without any special plug-ins. HTML5 video is a relatively new standard that has really come into its own over the last few years. New to the HTML spec, you can now add a ‘video’ tag that tells the browser to embed a video on your site or blog.

HTML5 is not a video format, but more an extension to HTML, combined with browser support, to allow you to embed a video on a webpage or blog without a special plug-in to play the video.

Lets take a look at some of the facts regarding HTML5:HTML5_Logo_128

  • Works in all current, modern browsers (IE, Firefox, Chrome, Safari, etc.)
  • Supported on almost all mobile devices (Apple, Android, Windows, etc.)
  • Player controls are entirely up to the browser being used (play/pause/etc.)
  • Video files must be uploaded / hosted on a web server
  • HTML code must be added to website or blog

Now lets look at the facts regarding HTML5 and ProShow:

  • Automatically creates the videos you need for wide browser support (H.264 MP4 / WebM)
  • Generates the HTML5 code so you can easily copy and paste to your website or blog
  • Include specific attributes to the HTML5 code (show controls, auto play, loop, mute, etc.)
  • Choose from a wide range of video resolutions including 360p, 480p, 720p, and 1080p
  • Doesn’t support show menus or multiple shows (current working show only)

Publishing to HTML5 in ProShowPublish_HTML5_options

  1. In ProShow, click on Publish > HTML 5 Video
  2. Select the desired Resolution from the drop down menu near the top.
  3. Choose your video player options (i.e. show controls, auto play, loop, etc.)
  4. Click Create to begin the publishing process.
  5. Select the desired location to save your HTML5 files, click Save.
  6. ProShow will begin rendering and save the files when finished. You should have (3) total files when finished.


Embedding the video on your website or blog

  1. Locate the (3) files created by ProShow. You should see an MP4, WebM, and html file.
  2. If adding as a new page on your website – Upload all (3) files to the same directory on your web server.
    • The html file is a complete page that is ready to publish on your website.
    • All three files must be added to the same directory so to the html code can locate the source files.
    • To change the source path, open the html file and make your changes to the <source src=””> line for both videos.
  3. If posting on a blog – Upload both the MP4 and WebM video files to your blog.
  4. Copy the <video> tag HTML that ProShow displays, and paste it into the source code of your blog or article.
    • If using WordPress, make sure you click the ‘Text’ tab and paste the code where you’d like the video to appear on your article.


  1. Adjust the source links if necessary to make sure they point to the video files uploaded to your blog.
  2. Test playback and make sure the video plays on your website / blog.

That’s it!




As head of the technical support team at Photodex, Brandon makes sure customers are 100% happy and helped in a timely matter. He loves mountain biking, sports, and enjoys the Austin music culture!