HTML 5 is the new version of HTML and XHTML. It is rising rather quickly and it has been said that it will play a huge part in the world of HTML in years to come. Although the final stages of HTML 5 are still in the works, browsers such as; Safari, Google Chrome and Firefox are all supporting this new technology. The HTML5, <video> tag has been said to stand out particularly well. It has been said that this ‘tag’ was created to allow video support of all formats to work on all browsers without installations of any other plugins etc.

The below code seemed to give the best result, after all the current video options were removed.

<video width=”600″ poster=”fallback-image.png” controls autoplay>
<source src=”http://domain.com/video.mp4″ type=”video/mp4″ />
<source src=”http://domain.com/video.webm” type=”video/webm” />
<source src=”http://domain.com/video.ogv” type=”video/ogg” />

<!– Fallback if HTML5 video is not supported –>
<a href=”http://domain.com”><img border=”0″ src=”fallback-image.png” label=”Fallback Image” width=”600″></a>
</video>

As seen in the example, you have to add in a substitute image (this will be loaded as the image for the video before it is presented to the clients who want to support video for their emails) in the <video> tag. You also have to include the width and the height of the video. While showing reference of your source on your server, the ‘H.264’ encoded video should be called into the <video> tag. This is done by incorporating the <source> tag. After you have incoded all of this, you add in the content which you want displaying in your choosen email clients, ensuring that they don’t support HTML5 (while inside the <video> tag).

HTML5 Video Email Support

If you are a Mac using, your first choice should be Apple Mail. This is because, it has been said that the video will run effectively without problem. It has also showed perfect playback on the iPhone too. After a successful outcome with Apple Mail, you can then try out all the other email clients, like; Hotmail, Yahoo etc. However, with much disappointment, online web clients have chosen to not support HTML5 video playback. Although video playback isn’t supported, backup content will be able to be played. This feature was not supported before, so it will be appreciated now. The same happened on Windows too. The video was not supported however, the option for backup content was allowed.

This is part 2 of a 3 part series on how to create a HTML email. This is based on the email template I released a few weeks ago, Here. This is my first ever screencast series so any kind of feedback would be great. In Part 2 I’ll show you how to convert a PSD into HTML.

Notes

To stay updated on next week’s screencast, please sub­scribe by either using E-Mail, RSS Feed or follow us on Twitter.

Beautiful Emails

Copyrights © 2017 ThemeStall All Rights Reserved.