EverWeb Codebox

Mobile Media

Video

Playing movies on mobile devices is quit different than on conventional websites. Videos MUST be set to prevent preload and require a poster image and an MP4 file. No other formats are required.

There's no point in using any of the video player widgets since they are overkill and especially not the default EverWeb video widget since it neither uses a poster image nor prevents preload.

Mobile websites should only have one video per page.

The required code is shown below and is pasted into an HTML Snippet.

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

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

</video>

Create a poster image the same size as the movie file and drag it, along with the MP4, into the EverWeb Assets column.

In the above code, enter the video width and height.

Control click the poster image file in Assets to "Copy Relative File Path" and paste it into the code where marked in green.

Do the same with the video file and paste it where marked in red.

Click the "Apply" button and it's done.

The screenshot to the right shows how the poster image willl appear on page load when using a smart phone or tablet such as iPhone/iPad.

A suitable widget is included in the Mobile Audio/Video Widgets Pack to make this even easier. Click the HERE to find out more.

Audio

Audio players only require an MP3 or MP4 file so the code for HTML5 playback is this...

<audio controls preload="none">

    <source src="{!-ASSETSPATH-!}External%20Files/file-name.mp3" />

</audio>

The default player used in mobile operating systems is kind of funky and doesn't present an easy target for large fingers as can be seen above right.

The audio widget included in the Mobile Widget Pack uses a large button with no other controls to make playing music a lot easier for mobile visitors.

The player is very lighweight and uses CSS to create the Play/Pause buttons rather than images. Click HERE to find out more.

Mobile Audio/Video Widgets Pack

The mobile widgets pack contains the widgets for audio, video and image lightbox popup from a button.

Click HERE to see them in action or click the easy button to get the widgets.

easy
EverWeb Codebox Mobile Website Demo