HTML5 Video Basic Setup


HTML5 Video Stack

HTML5 Video Stack in RapidWeaver

  1. When you drag the HTML5 Video stack out to the page, you will see the above stack appear on your page.
  2. Now you can set your link for your mp4 or mv4 file by clicking on the Set Link button in the stack settings.
    HTML5 Video Stack Settings
    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.

HTML5 Video Thumb Stack

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.

HTML5 Video Thumb Stack

  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

Now go forth and make your websites great!

HTML5 Video - Basic Setup Video Coming Soon

Deal of the Week

Latest Updates

Latest Live Stream

Latest Design

HANGOUTS

Next Hangout Session
Friday, November 15

Subscribe

For product releases and updates by email, please subscribe below.

© 2024 Weavers Space | Terms of Service | Privacy Policy