Working with HTML5 Video in Freeway 6 and 7
20th of May, 2014This KnowledgeBase article adds further information to the workflow shown in the movie tutorial at http://www.softpress.com/help/tutorials/ (called “Working with HTML5 Video”).
Over the years there have been a few different methods for offering video on a website - but it was usually a case of knowing which computer platform (Mac or PC) or which browser/device (desktop computer, iPhone, etc.) your main customer base would be using so you could offer the video in a format they could play it in. Before the advent of the iPhone and iPad it was usually the case that Flash was the most universally acceptable method for offering video, but since iOS devices (and a growing selection of other mobile devices) do not support Flash it has until recently been difficult to choose one format which will suit the vast majority of visitors.
Also, some web designers (especially Mac users) simply presumed that QuickTime movies - which will play on all Mac computers - would work on all other computers. The reality, however, is that PC users will need to have the QuickTime plug-in for their browser installed - and many PC users are reluctant to (or not allowed to by their IT department) download and install third-party plug-ins due to security fears - so using QuickTime movies is not a simple answer as most PC visitors will never get to see the movies.
Prior to HTML5 Video being supported in Freeway 6 we often recommended the uploading of movie files to YouTube or Vimeo so the movies could be hosted on their servers and could take advantage of the various “fallback” methods used by those services to ensure the videos played on most computers and devices. This is still possible to do, and although it has the disadvantage of the movie being subject to various conditions and limitations when hosted on their servers (and also sometimes prone to advertisements placed at points along its controller bar), the advantages are that you only have to upload them once to the YouTube or Vimeo, and as the trends change for playing video on the web, those services will change the way they offer the videos for the web. If you want to look into this as a possibility, have a look at the KnowledgeBase article at http://www.softpress.com/kb/questions/262/.
Hosting the movies yourself will mean that you have full control over how the movie is offered on the web (i.e., advert-free with no branding) and although it will be taking up web space on your server (as well as requiring potentially long upload times each time the video needs to be uploaded), most Freeway users prefer to use the method explained in this article below.
The first thing you need to have is Freeway 6 or 7 (Express or Pro) and a movie file that has been encoded as H.264 and saved as an MP4 or M4V file. You can read more about H.264 - which is simply a “codec” (a form of video compression) that is now the most widely-used in the world at http://en.wikipedia.org/wiki/H.264/MPEG-4_AVC. The chances are that if you have an MP4/M4V file it is already encoded as H.264 - but you quickly check by opening the movie in QuickTime Player (which is installed as part of the MacOS on all Macs) and then going to Window>Show Movie Inspector. In the screenshot below you can see that H.264 is mentioned in the Format info.
We always recommend that you note down the physical dimensions of the movie (in pixels) as displayed in the Movie Inspector panel in QuickTime Player (as this may be useful later on).
If your movie’s Format info in QuickTime Player doesn’t specify H.264, you can convert the movie yourself. One way is to do it in QuickTime Player by going to File>Export, choosing the iPad, iPhone, iPod Touch & Apple TV option and then choosing one of the two options on the left (you can see by the sizes under each option that the middle option is double the size in pixels and twice the file size of the left-hand option. If you choose the left-hand option, it is important to note that this will also reduce the physical size of the movie (in pixels) by half.
The other method (which offers more flexibility and features) is to covert the movie file by using the free Miro Video Converter application (which you can download from http://www.mirovideoconverter.com/). In Miro you simply drag and drop the movie file into the main pane, click and hold on the Format button, choose Video, choose MP4 and then click on the Convert to MP4 button. If you want to reduce the physical size of the movie during its conversion you can click on the “cog” icon and set the height, width or common aspect ratio, which it will do after clicking the “cog” button again and then clicking on the Convert to MP4 button. Once the file has converted (which may take a few minutes if it is a large video file), click on the “Show File” link to reveal the file (which is set by default to save in the dedicated Miro folder) and drag it to your Desktop or into the folder where you store your site project’s assets.
Once you have the H.264 encoded MP4 you can simply drag and drop the file onto your Freeway page.
Important note for Freeway Pro users: The size of the movie item you dragged and dropped onto your page will differ, depending on whether you have the CSS Layout Button switched on or off in Freeway Pro. If the CSS Layout Button is switched on, the movie item will display at its full physical size (so if the movie is 1280px by 720px, then that is the size the item will be on your page) - but if the CSS Layout Button is switched off, the movie item will display at 100px wide and its height will be in proportion to the aspect ratio used for the movie. If you want to make the item the correct size, simply refer back to the proportions noted when you looked in the QuickTime Player’s Movie Inspector and use those dimensions in the Width and Height fields of the Inspector to make the item the correct size. If you drag and drop the movie file onto your page when the CSS Layout Button is switched on then you later want to use the movie at a different size, you will need to select the movie item on the page, go to the Inspector’s Width and Height popups in the Inspector and change Flexible to Fixed (after that you can Shift-Alt-Command-click and drag a corner handle to scale the movie up or down - but be aware that this will not reduce the file size of the movie item used on your page). Rather than scale movie content on the page, we recommend you use Miro Video Converter to make the movie the size you want it to appear before you save the movie as an MP4.
Important note for Express users: When you drag and drop the movie file onto your page, the movie item will display at 100px wide and its height will be in proportion to the aspect ratio used for the movie. If you want to make the item the correct size, simply refer back to the proportions noted when you looked in the QuickTime Player’s Movie Inspector and use those dimensions in the Width and Height fields of the Inspector to make the item the correct size.
The movie item on your page will display the first frame of the movie inside the item as a “poster frame” which will appear on the page until the movie starts to play.
Now the movie item is on the page at the correct size and in the right position, you can now choose some options for the movie so it will play reliably on all modern browsers. Select the movie item on the page and look at the options in the Output Settings tab of the Inspector.
Type: If the movie item is an H.264 movie saved as an MP4 or M4V file, this will be set by default to Video (which tells you that Freeway will output it as an HTML5 video). You only need to change this popup (to QuickTime) if you decide to use a QuickTime movie (such as a .MOV file) - which we don’t recommend as HTML5 has so many advantages.
Source 2 and Source 3: These two popups let you choose alternative movie files which are saved in different formats. It is important to note that although most modern browsers support HTML5, Firefox (for Mac and PC), certain PC browsers or some Window-based mobile devices do not currently support it. Because of this we recommend that you convert your movie file to either OGG Theora and/or WebM formats, by dragging and dropping the original H.264 MP4/M4V file into Miro Video Converter, clicking on the Format button and then choosing OGG Theora or WebM (normally WebM SD). Click on the green button to start the conversion process. Just as before, click on the “Show File” link and then drag it to the Desktop or your web project’s assets folder. Go back to the Freeway Inspector and choose either one or both new file conversions in the Source 2 and Source 3 popups. This will mean that the visitor’s browser will chose the second or third choice of file format automatically if the first and/or second choice is not supported.
Poster (Freeway Pro only): If you want to choose a different poster image to the first frame of the movie, click on this button to import a graphic (sized to the same size as the movie item) so it can be displayed before the movie starts to play.
Preload: Most modern browser will attempt to play the movie from the beginning as the browser is still importing the movie content. This gives you the choice of letting the movie load before it starts to play or if you prefer to leave it set to Default so it will start to play as soon as enough video has loaded for the movie to start.
Controls: This is switched on by default, which means that the HTML5 controller bar will be visible below the movie itself. Remember, however, that unless you have the movie set to Autostart (see below) the visitor will not be able to make the movie play if the controller bar is not set to view (or if you have not applied the Video Extras Action, see later).
Autoplay: Check this option if you want the movie to start playing as soon as enough video content has been downloaded into the browser. If the movie is small, this means that the movie may play immediately on page load.
Loop: As the name suggests, check this option if you want the movie to play over and over. With the option unchecked the movie will play once and will then stop.
Muted: Some browsers will offer the movie with no sound if this option is checked. However, support for this option is mixed, so you may have different results in different browsers. If you don’t want sound to play, it’s best to save the movie with no sound.
The Video Extras ActionSetting up the movie with the workflow mentioned above will mean that the movie will play perfectly on any browser or device which supports HTML5 video, OGG Theora and WebM (which the vast majority of all modern browsers do) - but there may still be some visitors out there who are using much older browsers. Because of this, we recommend that you apply this Action to offer further “fallback” options.
Select the movie item on the 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 offers a method of letting the visitor play or pause the movie by clicking on it if the Controller bar is unchecked in the Output Settings tab of the Inspector. Without this option switched on it will be impossible for the visitor to play or pause the movie if the Controller is not displayed.
Fallback OptionsFlash Fallback: This is switched on by default, which will mean that if none of the other three video formats are supported (which they won’t be on very old PC browsers for example), then the movie will be displayed as a Flash movie. This makes the movie truly universal in being able to be played on all browsers and devices.
Image Fallback: If you have an image you wish to import to cover the same area as the movie on the page, if no movie file format can be found, at least you can display an image instead. You might want to put on the graphic item you choose words such as “This movie is not supported on your browser or device”.
Text Fallback: Just as with the Image Fallback, this can be used to display some HTML text if the movie file formats are not supported.