EverWeb Codebox

Video

HTML5 Video

Playing movies in the browser using plugins like QuickTime Player and Adobe® Flash is dinosaur stuff nowadays. All modern browsers support HTML5 playback using the <video> tag.

If all this sounds way to complicated, click the Easy Button to go to the Widgetbox and grab a widget that will do all this for you.

<video controls width="xxx" height="yyy">

<source src="{!-ASSETSPATH-!}External%20Files/video.mp4" type="video/mp4">

</video>

Of course it's not that simple. Firefox doesn't support MP4 so we need to add WebM (and OGG or flash for older versions).

<video controls style="height:640px;width:480px" preload="none" poster="{!-ASSETSPATH-!}Images/poster.jpg">

     <source src="{!-ASSETSPATH-!}External%20Files/video.mp4" type="video/mp4">

     <source src="{!-ASSETSPATH-!}External%20Files/video.webm" type="video/webm">

     <source src="{!-ASSETSPATH-!}External%20Files/video.ogg" type="video/ogg">

        Your browser doesn't support HTML5 video.

  <!-- You can embed a Flash player here, to play your mp4 video in older browsers such as IE V6,7,8 -->

</video>

In the above code the video has been prevented from loading with the web page by adding preload="none" and a poster image has been included to fill the otherwise blank space.

Start with an MP4 file and use the freeware Miro Video Converter to create the WebM and OGG files. The app will output .theora.ogv so change it to .ogg. Make sure that the movie and image files have no spaces and/or special characters in them!

Drag all three files, plus a poster image with the same dimensions as the movie, into the Assets column of EverWeb. Control click each one to copy the relative path and then paste it into the above code where marked in green.

Do the same with the poster image - marked in brown - and also enter the video width and height - marked in blue.

HTML5 Video Tag

Autoplay

Autoplay should be avoided at all costs. If you really must have this feature, replace preload="none" with autoplay.

Easy