HTML5 How To
HTML5 Video Basic Setup
HTML5 Video Stack
When you drag the HTML5 Video stack out to the page, you will see the above stack appear on your page.
Now you can set your link for your mp4 or mv4 file by clicking on the Set Link button in the stack settings.
The HTML5 Video Thumb stack is made so you can create a Thumbnail image that you can use as a link to either another page which might have the video on it, or to a Lightbox stack, like Joe's Expose stack. The instructions on how to use it are below.
To use the built in Rapidweaver resources area to host your video file, it is very simple. You add the stack like you would normally (see HTML5 Video - Basic Setup for more help). Then before you click on the Set Link button, you need to drop the video files (.mp4, .ogv and .webm) onto the resources are below the pages.
When you drop the videos in the resources area, it should look like this (notice the blue dots next to each file, this is telling you that you have not published that file to your server yet):
Once your files are in the resources area, you can start linking them. Now you can continue with the basic setup, except this time instead of typing in a URL, you will link to the appropriate file in the resource area. See the example below:
Now that your files are all linked, your stacks setting should look like this:
Now we need to publish the page. When you do this, the blue dots by the files in the resources area will disappear. Then you can view your page and preview your page. Enjoy!
HTML5 Video Stack
When you drag the HTML5 Video stack out to the page, you will see the above stack appear on your page.
Now you can set your link for your mp4 or mv4 file by clicking on the Set Link button in the stack settings.
- 2.
If you want a custom poster image, you can add it in the Poster Image section. - 3. Most if not all modern browsers will support the MP4 file, but if you want your video to work in older browsers, you should also include OGV and WEBM files. You can use your mp4 or mv4 file to convert the files to these formats. We suggest you use the Free Miro Video Converter (MAS Download or Direct Download) to convert your files. Once the files are converted, then click on the Set Link buttons for the files you want to add.
- 4. If you would like a demo link to a MP4 video file, you can try this URL:
http://www.html5videoplayer.net/videos/toystory.mp4 - 5. You can also use Rapidweaver's Resources (see the HTML5 Video - Using Rapidweaver's Resources Area FAQ to learn how to do this.) to link to your video file if you do not have it already on your server.
- 6. Now preview and enjoy! For an overview of the remaining settings please refer to the HTML5 Video Settings section.
The HTML5 Video Thumb stack is made so you can create a Thumbnail image that you can use as a link to either another page which might have the video on it, or to a Lightbox stack, like Joe's Expose stack. The instructions on how to use it are below.
- 1. When you drag the HTML5 Video Thumb stack out to the page, you will see the above stack appear on your page.
- 2. You will need to set a default image. The best way to do this is to open your MP4 file in Quicktime (if possible) and take a screenshot of the image you want to use (pause the video and take use command-shift-4 to start taking the screenshot. Then push the spacebar and select the quicktime window, it will turn blue).
- 3. Drag and drop the screenshot (it will be on the desktop unless you have switched that location). Your -rw
To use the built in Rapidweaver resources area to host your video file, it is very simple. You add the stack like you would normally (see HTML5 Video - Basic Setup for more help). Then before you click on the Set Link button, you need to drop the video files (.mp4, .ogv and .webm) onto the resources are below the pages.
When you drop the videos in the resources area, it should look like this (notice the blue dots next to each file, this is telling you that you have not published that file to your server yet):
Once your files are in the resources area, you can start linking them. Now you can continue with the basic setup, except this time instead of typing in a URL, you will link to the appropriate file in the resource area. See the example below:
Now that your files are all linked, your stacks setting should look like this:
Now we need to publish the page. When you do this, the blue dots by the files in the resources area will disappear. Then you can view your page and preview your page. Enjoy!