Video in Email
•Télécharger en tant que ODP, PDF•
1 j'aime•745 vues
Goolara's presentation on using video in email. A step-by-step guide to to creating video-friendly emails that will work across all email clients and devices. Contains links to useful tools for creating poster images and a link to our white paper on the subject: "Video in Email," for a more in-depth look at the process.
Recommandé
Contenu connexe
En vedette
Dernier
Dernier (20)
Video in Email
- 1. The Secrets to Using Video in Email
- 2. Advantages of Using Video in Email Percentage increase of video vs. non-video email.1 1. Daniels, David, The ROI of Video in Email Marketing (New York: Penguin, 2006), 5–6.
- 3. Things to Consider: Video production is expensive. Video production is time-consuming. It's not for everybody. It won't work everywhere. Requires some HTML5 knowledge and preparation.
- 4. Primary Parts of a Video Tag
- 5. Attributes of a Video Tag
- 6. Basic Format <video poster=”http://yourcompany.com/videos/image.jpg”> <source src=”http://yourcompany.com/videos/video.mp4” type=”video/mp4”> <source src=”http://yourcompany.com/videos/video.ogv” type=”video/ogg”> <a href=”http://yourcompany.com/videos/myvideopage.html”><img width=”420” height=”241” alt=”Click here to play video” src=”http://yourcompany.com/videos/alternative‑image.jpg”></a> </video> Here is an example using two video sources (mp4 and ogg), and a linked image for the alternative (i.e., non-HTML5 clients) source.
- 7. The Video Tag's Procedure
- 8. Controls will not work in most clients The video tag has the option of displaying the controls, but clicking on the play button on the control tab will not begin the video.
- 9. To activate a video you must right click... ...and choose play.
- 10. Make the Poster Image Self-explanatory Combine a screen shot from the video with the right-click information and use this as your poster image.
- 11. Don't forget the alternative image. The alternative link image should look like a playable video file. This should link to the online location of the file.
- 12. Compatibility varies with client or device
- 13. It also varies with the browser. For maximum compatibility, create both an mp4 version of the video and an Ogg or WebM version. Important: Make sure the mp4 file is H.264 encoded. This is the most compatible file format.
- 14. Tips and Tricks Do not use “autoplay” or “loop” in video tags. Do use “autoplay” for the online linked version of the video. Short videos may be replaced with animated gifs. Avoid loud audio. Keep videos short and to the point.
- 15. Resources Goolara Website Video in Email page http://goolara.com/Resources/Video_in_email.aspx Our main landing page on the subject of adding videos to email . Poster Image Toolkit http://goolara.com/Resources/buttons.aspx You can create your poster images here with just a few clicks . Goolara Blog http://blog.goolara.com/2013/08/06/using-html5-in-email-video2/ Our blog post on the use of the video and audio tags . Video in Email White Paper http://goolara.com/Resources/Download.aspx?fileName=Goolara_Video_in_Email_White_Paper.pdf Goolara’s White Paper on using videos in email.
- 16. About Goolara Goolara, LLC is the maker of Symphonie—powerful email marketing software with the advanced features a professional marketer needs, but without the hassle of other systems. For a demonstration, call 1-888-362-4575 toll free, or visit http://goolara.com/RequestDemo.aspx and request a demo.
Notes de l'éditeur
- Welcome to the Video in Email presentation brought to you by Goolara, LLC, the makers of Goolara Symphonie, one of the most powerful yet easy to use email marketing software platforms on the market. My name’s Jim Morton, and I work for Goolara’s marketing department. I do a lot of testing, and recently I had the pleasure of testing the use of HTML5's video tag for marketing purposes. What I found out surprised me, and maybe it will surprise you too. I’ll be discussing techniques for adding video to your mailings so that they are viewable across all platforms. That may sound like a tall order, because not all email clients work with these tags. Nonetheless we have created the following presentation that will explain not only how to use the latest video techniques in your emails, but also how to provide video links for the email clients that won’t accept these commands.
- So why would I want to add videos to my emails? Well, research shows that the use of videos in emails improves nearly every engagement metric you care to name. In a recent survey by the Relevancy Group, they found that the use of video in email marketing improved the click-through rate by 55%, how often the emails were forwarded by 41%, and the conversion rate by 24%. Not bad numbers.
- But before you get too excited about video, there are a few important things to consider. First, videos are expensive. Second, they are time-consuming. Third, videos are ideally suited for businesses that can deliver some appealing visual information. A tax accounting firm, for example, may have to work a little harder to provide something engaging. Even then, since the company’s primary appeal is not based on visual information, they may not see the lift that another, more kinetically-oriented business can achieve. Fourth, they don’t always work. And finally, they require some knowledge of HTML5 (although very little).
- Video instructions in an email primarily use four tags: <video>, <source>, <a>, and <img>. The video tag is, of course, the main one, and everything else falls between the opening and closing video tags. <img>, and <a> tags are not new, and will be familiar to anyone who knows basic HTML. The source tag is used to specify the location of the video file. Video instructions can contain more than one source file for greater compatibility.
- Within these three tags, you can add various attributes. Some attributes, such as width and height have been around since the beginning and don’t really need any explanation here. Others are specific to the individual tags. With the video tag, the most important attribute is “poster.” Even if you never use any of the other attributes, you should use that one, and we will see why in a minute. “Src” is, of course, the main attribute of the Source tag; and “href” is the main attribute of the <a> tag, and the alt attribute is used within the image tag and the video tag to provide some textual information when the images are turned off.
- Here’s what a complete video tag instruction set looks like. The video tag opens and closes the command set. In this example I have two possible source videos. If the client or browser won’t play the first one, the MP4 file, it will play the second one. If it can’t play either of these, or if it isn’t compatible with HTML5, it goes on to the next bit of code that it can understand, which is, in most cases, the alternative link enclosed between the <a> tags. As an aside, you’ll also notice that the source and image tags do not require closing tags, while the <a> and <video> tags do.
- If an email client is compatible with HTML5, it will display the image you’ve created for the poster attribute, if it can’t handle HTML5, it will display the image linked in the image tag under the alternative link.
- If you don’t include any attributes in the video tag, the first frame of the video will appear. The controls will only appear when the mouse hovers over the image, but those controls won’t work. You can click on that play button all day and the video won’t do anything, leaving many people to assume the video is broken.
- To play a video, you first have to right-click on the image and choose “play.” This isn’t exactly intuitive. Fortunately, the video tag has given us an easy way to rectify the situation.
- Remember earlier I said the <poster> attribute is the most important attribute in a video command set? What <poster> does is allow you to add an image to the video that is displayed whenever it encounters an email client or device that recognizes HTML5 and can play the video. Your poster image can be anything. By placing a button on top of the image that says “right click and choose play,” you give the recipient the missing piece of information they need to play your video without leaving the email.
- You can also add an image to the alternative link. This is the image that recipients will see if their email client or device isn’t compatible with the HTML5 video tag. For this image, you just need to add any version of a play button you care to use. Clicking on this image opens a web page with the video on it. The alternative link is the one place where you may want to use autoplay.
- We tested several popular email clients and devices and this is what we found. Outlook.com is way ahead of the curve, accepting nearly every HTML5 command that we tested. Thunderbird came in a close second. As to platforms, everything Apple makes did better than any of the others. Even Outlook on the Mac works better than on the PC. Apple solves the right-click to play problem by throwing its own play button on top of the poster image.
- The big three browsers (IE, Firefox, and Chrome) can play mp4 files as long as they are H.264 encoded. Opera supports Ogg Theora. The PC version of Safari requires a WebM formatted file.
- Here are a few tips and tricks. Some of these qualify as best practices.
- Here are some resources to help you make emails with videos in them. 16. If you want to find out more about our email marketing software, you can do so at our website at goolara.com, or you can email us at info@goolara.com, or call our toll-free number: 1-888-362-4575.
- At Goolara, we work hard to make sure our email marketing solution, Symphonie, has all the features that a professional marketer needs to create actionable emails. Features such as dynamic content and transactional emails are included in every version of Symphonie. Symphonie is available in both on-premise and cloud-based versions. Visit our website at http://goolara.com to learn more and thank you for attending this seminar.