EverWeb Codebox logo

EverWeb Widgetbox 3

Touch MP4 Video Player

Touch MP4 Video Widget

Website Video

Now that all the major browsers support the MP4 video format, there is no need to load alternative files such as OGV and WebM. This video player will fallback to flash for older browsers which don't support HTML5 playback and/or MP4 files.
The video widget contains three essential features which are required to control how the video effects page download time and the video file quality.
If the video file is allowed to download along with the rest of the page content, download time will suffer and vistors using touch devices will have to use up a chunk of their data allowance even if they don't play the video.
The video should have preload prevented and display a poster image until such times as the visitor decides to play it.
Unless the video file is a large HD, the fullscreen button should be hidden to prevent it being displayed at fullscreen on computers with large screens since this will result in a loss of quality and a poor visitor experience.
Autoplay should be avoided since this forces the video to load when the page loads. In any case, autoplay won't work on touch devices.

Video & Poster Image Files

Before importing the video into EverWeb, control (right) click the video file in the Finder and select "Get Info". Note the width and height of the file.
Launch the video in QuickTime Player, stop it at a representative frame and take a screenshot. Crop this to the same size as the video file or, at least, to the same aspect ratio.
Aspect ratio is equal to the width divided by the height.
If possible, play the video at fullscreen on a computer with a large monitor to see if the quality is good enough. If not, remove the fullscreen button from the video controls by checking the appropriate box in the widget settings.
Reduce the video and poster image file size appropriately for use on the tablet and smart phone versions of the site.

Touch MP4 Video Widget

Widget Settings

Choose the video and the poster image which should have the same aspect ratio as the video file.
Adjust the widget width and height to suit the aspect ratio.
Adjust the widget overall size by dragging while holding down the shift key.
Check the boxes for the required functions of autoplay, loop and muted,
Adjust the value for start volu,e if required.
Hide the controls if required and check the box to allow fullscreen if the video file's quality is high enough.
Check the box if preload is required.

Touch Widgets Bulk Pack Discount Deal

Buy all 4 Touch Widget packs for $30.00 …

This widget is included in the Touch Audio Video widget pack.