The Best Way To Offer Video Content on your Freeway site

Over the years there have been many different file formats for offering video on the web, but there has never been a universal method that will work on all browsers and all devices. Although we previously mentioned on our KnowledgeBase that uploading video content to YouTube or Vimeo was possibly the most reliable way to offer video for all web visitors, this has now changed with HTML5 video in Freeway 6.

The most popular methods of offering video for Freeway users were QuickTime or Flash - but both of them have their disadvantages. QuickTime works fine on Mac computers and iOS devices (such as the iPad or iPhone), but PC users will only be able to see QuickTime movies if they download and install the QT Plug-in - which many are reluctant to do due to security concerns (or maybe because their IT department will not allow them to install plug-ins manually). Flash movies were previously very popular because they played on most devices, but with the advent of mobile devices this has changed. Apple has dropped support for Flash which means that the movies will simply display as unsupported plug-in content on those devices (or perhaps not display at all).

The future of movie on the web is HTML5 video - and Freeway has made this very simple to do. By using HTML5 video, it is now possible to offer movie content that will play on just about any browser and device out there. There is a brief movie tutorial on using HTML5 video with Freeway at http://www.softpress.com/help/tutorials/ (called “Working with HTML5 video), but below are full instructions on how to make your movies universally supported.

First thing you need is a movie file that is encoded in H.264 (which is the current standard) and saved as either an .mp4 or .m4v file. If you are not sure your movie is in one of those file formats you can check by opening the movie file in QuickTime Player and then going to Window>Show Movie Inspector to see if it states that it is H.264 in the Format info. QuickTime Player itself will let you convert the file to an H.264 encoded .m4v file by going to File>Export then choosing iPad, iPhone, iPad touch, Apple TV then choosing one of the options in the next window.

If you want to have more control over the export of the file, you might want to look at the free Miro Video Converter from http://mirovideoconverter.com/ which gives far more options, such as the size of the movie. This will let you save the file as an H.264 .mp4 file.

Once you have your H.264 encoded .m4v or .mp4 file, all you need to do is to drag and drop the file onto your Freeway page. With the item selected, look in the Inspector to see the options in the Output Settings tab.

Before setting up the options in the Inspector, you will need to convert your .m4v or .mp4 file into either an OGG video file or a WebM video file (or both if you wish, though just one should suffice). To do this you can either use Miro Video Converter again or use the free online service at http://video.online-convert.com/. The OGG/WebM file will be used later.

With the movie item selected on your page you will see the following options in the Inspector’s Output Settings tab:



Type: By default this is set to Video - and you should leave it set to that if you want to use HTML5 video. We have given Freeway users the choice of using QuickTime if they wish by clicking on that popup and choosing QuickTime (but because of the advantages offered by HTML5 video, we recommend you leave it as it is by default).

Source 2 and Source 3: Click on one or both of these popups to choose the OGG and/or WebM versions you converted earlier.

Poster: By default, Freeway will display the first frame of the movie in the movie player window on your page. However, if you prefer to choose a specific frame to use as the poster frame, you can take a screenshot of it and then select that graphic file in the Poster popup.

Preload: This is more of an advanced feature, and unless you have a specific reason to choose otherwise, we recommend you leave this to Default.

Controls: Lets you decide whether to display the controller bar below the movie. By default this is switched on, as most people prefer to let the visitor see the controls so they can play, pause, adjust the volume, etc., as they choose.

Autoplay: As the name suggests you can make the movie play automatically on page load (or rather as soon as the movie is able to play - because you need to be aware that the movie needs to be loaded into the browser before it will start to play).

Loop: Checking this option will make the movie play over and over.

Muted: If the page if viewed on a browser which supports this attribute you can choose to have the volume turned right down when the page loads.

Finally, there are still some visitors out there who are using very old browsers (perhaps IE6 or IE7 for PC), so there is something that you can do to let even those visitors see your movie. To do this, make sure the movie item is selected on your page and go to Item>Actions and choose Video Extras. Look in the Actions palette to see the options:



Click Video to Play/Pause (if no controls): This is switched on by default, and it means that the visitor can simply click on the movie itself to toggle between play and pause if the Controls option in the Output Settings tab of the Inspector was switched off when playing the movie in Flash.

Flash Fallback: Again, this is switched on by default and it will mean that if no other movie format is supported on the visitor’s browser, then Flash will be used instead. Because Flash was once one of the industry standards for playing video on the web, this will be supported by all older browsers.

Image Fallback: Just in case the visitor is using an ancient browser (or has perhaps switched off many movie options in their browser prefs) you can choose to offer an image so it can be displayed instead of the movie.

Text Fallback: This works the same as the Image Fallback options, but this will simply use text if the visitor’s browser cannot play any of the other formats due to the age of the browser or because options for playing movies have been disabled in their browser.