On successful checkout , you will receive an email link to download the symVideo5 Stack, go ahead and download the stack.

On opening the disk image you will find
1. Link to the User Guide
2. Link to our Online Help Desk
3. The Installer - Just double click to start installation

Once the Installer has completed you will need to Restart RapidWeaver to enable the new Stack to be visible in the Stacks Library.

We will run through these steps to create a page that has a HTML 5 video stack included in your Stack page. You can then repeat the steps necessary to get your desired finished page.

1. Select the Stacks Page Style
2. Click on Choose to complete this action

The numbers may be different for Stacks 1.3 - nothing to worry about :)
Right hand side of your Stacks Page you will find the Stacks library (and depending on how many stacks add ons you have installed) you will see our two new stacks.
1. Add media - All Video Formats (H.264) Desktop, iPhone, Web M, OGG Video
2. Add media H.264 Only , the majority of you will use this if you do not want to serve HTML5 to Opera and Firefox and be bothered about creating WebM or OGG Video files
3. Add Media- LightBox Slice (H.264 only)
4. The Core symVideo stack , you add this one time only into your Stacks Page

1. Open your Page Inspector
2. Use default: Using any other output format will force symVideo5 to play in Flash mode and we don't want that do we :)

1. The core stack only needs to be added once only into a stacks page

2. The Add Media Stack - Depending on how many videos you have you can add more of these.(in this example I am adding the H.264 media only , this means any browser other than Sfari and Chromw will receive Flash playback)

We like to keep things very simple and easy for you here in using our Products. However, please pay close attention to the steps in this lesson..

We encourage you to use HTML 5 media playback whilst we take care of the messy business of setting up the FlowPlayer Flash player for the browsers that do not support HTML 5 . Just a side note IE9 will support HTML 5 video in the near future with the H.264 codec so Flash will only be used on older browser versions.

Every time you hear folks talking about the Stacks inspector, yes it that cute little button there. Here you will find the custom settings that can be applied to each custom stack add-on you have.

The Core Stack is added once only into your page but it does have a few options you play with that control the look of the video players globally in the Stacks page
1. Adjust the CSS3 Blur Shadow Color ( okay this is officially called Box Shadow, but for keeping it simple Blur is easier :) )
2. Adjust the size of the Blur Shadow - to turn off the Blur Shadow just set this slider value to zero
3. revert to your default browser HTML 5 player controls. Use this for LightBox operation too
Some themes may have problems with our CSS or you may just like the default controls !
4. LightBox Mode only : Background color of Overlay
5. LightBox Mode Only: Transparency of Background Overlay
Note: The CSS3 blur effect will only work in modern browsers IE9 (hopefully) , Safari, Chrome , Opera and FireFox

There are quite a few options giving you flexibility in using symVideo5

1. Player Width in pixels
2. Player height in pixels
Dimension for 1 & 2 are automatically used for the Flash player width and height, this is media specific and not a global setting.

NOTE: We use the term warehousing (or you may come across it in the RapidWeaver forums too) for basically storing our images and videos on a folder on our web server, it is nothing complicated. It saves you time publishing your project and reduces the size of your RapidWeaver project especially when we are talking about video!
a) Create a folder on your web server for example media
b) Add/Upload your videos and images there
c) Just take a note of the full URL (absolute url) to these e.g. - http://myserver.com/media/video1.mp4
Please don't include any other paths like ftp or public_html , you will get a file not found . In other words if you get a Video not playing or returning an error, check that you have the right URL to it ! 
Most FTP clients have options for you to set the correct URL to your media, to save you time and make you less error prone.

3. Poster Image URL: You have a poster image you want to show whilst the video is pre-loading , add the absolute URL to this It is recommended that you set the poster image to the size of your player dimensions but you have complete control over this process. This poster image URL is also used in the Flash player as a Splash Image -cool!

NOTE: Webkit (Safari /Chrome) browsers will only show the poster image until it has retrieved enough data from your movie file to enable playback

4. Desktop/iPad H.264 Movie: The absolute URL to the H.264 encoded movie. This movie file will used in the Flash Player , this is mandatory!.
5. iPad/iPhone H.264 Movie url: If you have one add the URL to it other wise just use the same URL that you had in the Desktop/iPad URL. Max resolution in our tests is 640x360 pixels

See our resources chapter on some tips for encoding Video correctly for each. In particular if you want to enable HTML 5 Video on FireFox and Opera you will need to encode your video to a different format. This is purely the browser manufacturers choice on what video format they support for HTML 5.

6. OGG Theora Video file : Used in FireFox and Opera, Chrome
7. WebM Video file: Currently as of Dec 2010 only supported in the latest builds of FireFox 4, Chrome

Really Important: If you do not want to encode to these formats (OGG WebM) just leave items 6 and 7 as they are , we automatically default back to the Flash Player for these. You must have a Video source for items 4 and 5 this is the only mandatory requirement we make here.

Without adding the mime types - Firefox or Opera do not understand what file you want to play inside the HTML 5 Video Tag, there is an additional FAQ article on Mime Types.

8. AutoBuffer: by default this is set to none, if you enable this we enable to buffer to retrieve meta data. Only applicable to HTML5 media playback.

9. AutoPlay HTML5: by default this is off and it is only for HTML 5 media (this is dosabled in the Lightbox Slice)
10. Loop: by default this is off and is only used for HTML 5 media playback,
If you enable loop and/or Autoplay the custom controller is not updated . This will be fixed at a later date

11. AutoPlay Flash : Emable AutoPLay in Flash Playback
12: Use Flash Scaling
13: Enable Flash opaque mode, this is useful if you have any css or html overlapping the player, by default the player is transparent

14. Video Player Style , enter the following (highlighted bold) in the input box to change the style of the HTML 5 Player...
vim-css for the Vimeo Styled Player
tube-css for a YouTube Styled Player
hu-css for a Hulu Styed Player
You can of course use Default controls which is configured in the Core Stack to revert back to the browsers default vidoe playback controls.

How your new symVideo 5 looks in RapidWeaver Preview and some important points to consider
Go ahead let's see what this looks like in the Theme that you have chosen for your project

Awesome here is our Video Poster Image

1. Toggle between play and pause
2. Progress Bar, Yes the timers are quite self explanatory
3. Volume Control
4. Full Window this will enlarge the video to the size of your browser window. Playback on iPad will use the default control in iPad so you can have full screen without this custom look . (Full Screen is only applicable to Safari on the desktop)

Important Stuff:
1. If you press play on a movie ensure you stop it before going back to RapidWeaver Edit mode. The movie file keeps playing and the only way to stop this is to quit RapidWeaver. It is not a fault of the Stack just RapidWeaver cannot understand the media control for HTML 5.
2. Playback on an iPad defaults to the iPad controls as this already has real full screen capability .

The baisc layout of using Lightbox in symVideo5 is as follows :
1. symVideo5 Ligfhtbox Slice - you can enter your Video and Poster image location just like all the other stacks via the Stacks Inspector
2. symVideo5 Core (one only) Make sure you have 'default controls' selected in the Stacks Inspector options
3. A Text stack where we will make the link , it can be an image based stack too akthough I will discuss text in this example.

Please note that creating a lightbox link for symVideo5 requires two sets of information
the Lightbox ID ( this is set in the Stacks inspector Options) , it needs to be unique and in this case it is video1.
Additionall we also need the link class for the Lightbox thisis always symvidbox

1. Add the Lightbox id in this case #video1 , it is case sensitive and make sure you enter it correctly to match the right Video you want displayed
2. add a new custom attribute
3. Enter exactly what you see on the screen the class always equals symvidbox
A title is optional for the Lightbox .
4. Complete the step

1. Really important , default controls needs to be checked.
2 and 3 are optional for you to adjust the look of the lightbox color

Click your text or Image you have created the link on and there you have Video in the lightbox
You can then add more Lightbox enabled video slices to your page , just make sure you follow the add links steps correctly ( lightbox ID and link class)

Fall back to Flash is automatic if the web visitors browser cannot support the HTML 5 Video tags. All that we need the Desktop H.264 to be present and the Image poster, this is mandatory. Your web visitor will then see your poster image inside the flash player - cool !
Best results in the FlowPlayer always use H.264 mp4 , fast start encoded Video files
Note: IE9 say they will support H.264 HTML 5 video, so you will be future proofed for all eventualities ;)

A free utility I use quite often is Permute a paid app but its is very fast and exports to all video formats. A simple and fool proof way of generating a H.264 file. Furthermore it also supports exports to Theora (OGG Video) and WebM amongst others.
You can of course use QuickTime , VideoMonkey, Miro Video Cobverter Handbrake, Stomp, Final Cut and an assortment of other tools to encode to these formats.

Update: handbrake 0.9.5 is now available and this is a great free alternative to generate the H.264 videos for Iphone and Desktop.

WebM is a new HTML 5 Video codec open sourced by Google. At the moment only Opera and FireFox nightly lab builds support this

You can force Apache to serve WebM files correctly by adding the following line(s) to your server configuration or .htaccess file:

AddType video/webm .webm

Your web-hosting control panel may allow you to add these mime-type settings too.

Aside from the obvious that the URL to your video must be correct! FireFox will only be able to play OGG Theora files if they are served using the correct content type of 'video/ogg'.

Not all web servers recognise Theora files, and serve them as binary files.

You can force Apache to serve Theora files correctly by adding the following line(s) to your server configuration or .htaccess file:

AddType video/ogg .ogv

While you are at it just add , also :)

AddType audio/ogg .ogg .oga
Your web-hosting control panel may allow you to add these mime-type settings too.

Make sure that the URL to your video file is correct, first of all !
If you are still having playback problems ensure that the movie file is encoded as H.264 both audio and video channels
This is easy to check in QuickTime, Movie Inspector

Main problem: file downloads before playing back
Common scenario you have created the movie, but the whole video has trouble playing in the flash player or you have to wait for it to download before playing in the flash player.

This is due to a problem with the ‘moov’ atom at the end of the video file ,Renaun Erickson wrote this small AIR app that moves the atom to the start of the file so it can be played out as soon as the player has buffered enough data. http://renaun.com/air/QTIndexSwapper.air

If you use the Permute App to encode the video ensure you pass this through the 'Web optimisation' filter.

If you use Handbrake to create the H.264 video .. again use the Web optimised setting checkbox..

As long as you keep to the key points we have highlighted in this document , you will have no issues. However, to help you better and to avoid any time-wasting we do require the following information from you:

- URL to your Page
- Links to your videos
- Theme Used

We will not accept any support requests about problems in Preview Mode (that is unpublished), on many of our other stacks many support type questions relate to Preview mode have been directed at us. Most of these are based on the end users in-experience with RapidWeaver.

As such any questions related to RapidWeaver and RapidWeaver preview mode should be directed towards the RapidWeaver community forums, we do visit these regularly.

You can get in touch with us if you require any adhoc support , consultancy either web or video content delivery services, this is charged at an hourly rate.

Current Support release V2, released 04-Jan-2011