�ݺ�ߣ

1Driving E-Commerce with Video • May 13, 2014
DRIVING
COMMERCE WITH
VIDEO
May 13, 2014
Charles Hudson
chuckahudson+smw@gmail.com

STATS
VIDEO IN COMMERCE
YOUTUBE APIs
IFRAME PLAYER EMBEDDING
AND CONTROL
MOBILE
MERGING THE PHYSICAL AND
VIRTUAL / SHOPPING
ANYWHERE
<VIDEO>
REFRESH ONVIDEO IN HTML5
ANALYTICS
HOME GROWN &YOUTUBE
CONCLUSION
RECOMMENDATIONS AND
THOUGHTS

POWER OFVIDEO
•  1,014 U.S. adults from December 26 to December 30, 2013
•  73% of U.S. adults are more likely to purchase a product or service after watching a related
video.
•  79% said it was helpful to watch a video before making a purchase
•  68% found it helpful to watch a video more than once before making a purchase
•  77% think brands who create online videos are more engaged with their customers
•  73% think brands who create online videos are also more likely to gain repeat customers
•  71% feel that they’re left with a positive impression after watching a brand’s video
•  65% who watched brand videos viewed the company as an expert, and 58 percent believe
brands who create their own videos are more trustworthy.
•  96% of consumers ﬁnd videos helpful when making purchase decisions online
Reference – Animoto.com - March 13, 2014 - http://animoto.com/blog/business/small-
business-video-infographic/
BY THE NUMBERS – RECENT ANIMOTO SURVEY

PRODUCTVIDEO
•  Traditional Video Types
–  Brand Awareness (yours or manufacturers)
–  Inline Product Features
–  Instructional / How To
–  Testimonial / Experience
PUT OUT BYYOUR MARKETING TEAM
Internet Retailer reports that
shoppers who viewed video on Stacks
and Stacks product pages were 144%
more likely to add to cart than other
shoppers. -
http://www.internetretailer.com/
2011/03/07/product-videos-raise-
purchase-likelihood-stacks-and-
stacks

PRODUCTVIDEO CLASSIFICATION
•  In terms of product videos we have seen an explosion.
•  Multiple categories stemming from categories used years ago.
Unboxing Empties How To’s & Tutorials
Torture Tests Tours Vs. / Versus
Haul Giveaways TAGs
Pickup Favorites Parodies
•  These are the types of videos inﬂuencing customers.
•  http://www.reelseo.com/12-types-product-videos/
CATEGORIES INFLUENCING CUSTOMERS

HIGHLY INFORMATIVE
•  Provides methods for better association of customers with vendors.
»  https://www.youtube.com/watch?v=L2RjEcAodjw
•  Also provides an easy method for customers to review. Product Fail Videos!
CAN WORK BOTH WAYS

<VIDEO> TAG
EMBEDDED WITH HTML AND JS
“Online retailer Bizchair.com told STORES Magazine that video viewing had a
powerful impact on sales, citing data showing that 33% of online sales came from
the 13% of site visitors who viewed video.”
STORES MAGAZINE, JULY 2012

HTML5 <VIDEO> ELEMENT
•  Added in HTML5 to mainstream media video playback with out plugins.
•  Built in controls available.
•  Multiple sources to provide various browser support.
•  Fallback messaging allowed for unsupported browsers.
•  Still varied support in breadth and depth across browsers.
REFRESH
<video controls>!
<source src=/slideshow/selling-with-video-hudson/34857592/"/video/big_buck_bunny_480p_surround.avi" type='video/mp4’>!
<source src="/video/big_buck_bunny_480p_stereo.ogg" type='video/ogg’>!
<p>HTML5 Video is not supported by this browser.</p>!
</video>!

VIDEO API EVENTS & PROPERTIES
•  Key events
•  Properties Include
–  currentTime – read/write of the playing pointer on the video media.
SMALL BUT KEY SUBSET
play Video is played.
pause Video playback is paused.
ended Video playback has ended.
timeupdate Video currentTime is updated.

Get currentTime
Returns the current pointer time
TIMELINE METHOD / EVENTS
A SAMPLE FLOW
00:00:00:000
pause()
Pause event fired
autoplay
Play event fired
Ended event fired
•  Methods and current time fired automatically or manually.
Set currentTime
Moves the play pointer
play()
Play event fired

OVERLAYING HTML ELEMENTS
•  Leverage CSS position to place elements.
•  Canvas an option as well.
•  Provides for interactions
–  While video loading.
–  During playback or timeline navigation.
–  When play ends.
•  Can overlay entire video element or partial.
BASIC ELEMENTS
<video>
<div>

EXAMPLE – 360 DEGREEVIEW
Overloading the VIDEO tag with a slider to control video
currentTime position and overlaying a canvas viewpoint.
Video Credit - http://vimeo.com/29384844
IMAGIN WORKSHOP
Website: imagin.hk

VIDEO OVERLAY USES
•  Inline Purchasing
–  Place Add to Cart or Buy Now buttons inline with speciﬁc product.
•  Social Sharing and Returns
–  Place social sharing buttons overlaid at end of video.
•  Pop Bubbles
–  Draw attention to speciﬁc products or information in an experience.
•  For more information see HTML5 Video presentation from Streaming
Media West 2013 online.
SOME WAYS TO ENHANCE FOR COMMERCE

VIDEO ELEMENT SUPPORT
•  Sample using flash as first but don’t need to include flash.
FALL THROUGH
<div>
<video width="642" height="361" src=/slideshow/selling-with-video-hudson/34857592/"http:/www.totalec…?eclipid=e124798">
<object width="642" height="361" type="application/x-shockwave-flash" data="http://
misc.bbyst…mediael7578a9ee9e158.swf">
<param name="movie" value="http://misc.bbyst…7578a9ee9e158.swf">
<param name="flashvars" value="controls=true">

</object>
<source src="http://www.totalec…=e124798" type="video/mp4">
</video>
</div>

VIDEO TAG FALL THROUGH
1.  In Chrome – go to chrome://plugins
2.  Disable Adobe Flash Player
This does not require a restart of chrome.
3.  Verify ﬂash player is disabled – go to
http://helpx.adobe.com/ﬂash-player.html
HOW TO VALIDATE – FOR THE ABOVE CODE

3RD PARTY INTEGRATION
•  Shopping Cart Incorporation
–  Typically support inline video with extensions from 3rd party developers.
–  Inline, thumbnails, pop ups, galleries, YouTube player control, etc.
–  For example Magento has several extensions available including pulling in video from
social sites.
SHOPPING CARTS HAVE BEEN TENTATIVE

YOUTUBE APIS
AVAILABLE APIS & USAGE
“YouTube videos have inﬂuenced a purchase at least once for 53 percent of
consumers.” Walker Sands’ 2014 Future of Retail Study

SIMPLE EMBEDDING
1.  Take the YouTube video id from the query string. In this case 6A99O-mCZSM
2.  Add onto embedded URL for YouTube.
//www.youtube.com/embed/6A99O-mCZXM
3.  Place in iframe
EASY SHARING AND RETURN REFERENCE
<iframe width="600" height="338" src=/slideshow/selling-with-video-hudson/34857592/”http:/www.youtube.com/embed/
6A99O-mCZSM" frameborder="0" allowfullscreen>
</iframe>

•  Documentation at https://developers.google.com/youtube
•  APIs Available
YOUTUBE LIBRARIES
EXTENSIBLE SET FOR DEVELOPERS
Analytics For retrieving metrics on your channels or videos.
Data Working with videos and playlists in your app.
Live Streaming For creating, updating, and managing live events on YouTube.
Player Includes Android, Iframe, JavaScript, and Flash Player APIs.

•  Player loaded into element id
passed in as ﬁrst variable.
•  Provide:
–  Size
–  Video id to load
–  Events to register for
•  Optional playerVars provides
customization of player
YOUTUBE IFRAME API
PLAYER IFRAME INSERTION
var player;
function onYouTubeIframeAPIReady() {
player = new YT.Player('player', {
height: '390',
width: '640',
videoId: ’<youtube video id>',
events: {
'onReady': onPlayerReady,
'onStateChange': onPlayerStateChange
}
});
}

•  A sampling:
–  Load and play a speciﬁc video
loadVideoById( videoId, start seconds, suggested quality )
–  Control a video
playVideo()
pauseVideo()
stopVideo()
seekTo( seconds, allow seek ahead)
clearVideo()
•  Others include volume, playlist, and playback rate control.
YOUTUBE IFRAME API
IFRAME PLAYER FUNCTIONS

EXAMPLE – IFRAME PLAYER
Load and control the YouTube Iframe player.

MOBILE AUTO PLAY
Note that the auto play functionality is prevented from
running by mobile platforms to be friendly to users and
their cell plan data usage.

•  Events
–  onReady – player is ready.
–  onStateChange – play state has changed.
–  onPlaybackQualityChange – quality has changed.
–  onPlaybackRateChange – play rate has changed.
–  onError – player error has occurred.
–  onApiChange
•  Event object passed with events with potentially a “target” and a “data”
element.
YOUTUBE IFRAME API
PLAYER EVENTS
Note that the target usage may create a cross domain error. The player
reference may be used instead.

EXAMPLE – CUEING VIDEOS
Using the YouTube Iframe API loading the player based on
user’s thumbnail selections.

•  Leverage YouTube Data API version 3.
•  Thumbnails object available on the video
resource.
•  “key” is either default, medium, high.
•  See
https://developers.google.com/youtube/
v3/docs/videos
EXAMPLE EXTENSION
CAN PULL THUMBNAILS DYNAMICALLY
{
"kind": "youtube#video",
"etag": etag,
"id": string,
"snippet": {
"publishedAt": datetime,
"channelId": string,
"title": string,
"description": string,
"thumbnails": {
(key): {
"url": string,
"width": unsigned integer,
"height": unsigned integer
}
},
"channelTitle": string,
…

•  MediaElement.js - http://www.mediaelementjs.com/
•  Wraps the APIs to act like the HTML5 video element.
WRAPPERS FOR 3RD PARTIES
FORYOUTUBE AND VIMEO
HTML -
<video id="youtube1" width="640" height="360">
<source src=/slideshow/selling-with-video-hudson/34857592/"http:/www.youtube.com/watch?v=nOEw9iiopwI" type="video/youtube" >
</video>
Javascript -
jQuery(document).ready(function($) {
$('#youtube1').mediaelementplayer();
});

ANALYTICS
INSIGHT & ANALYSIS

•  Some Metrics of Interest
–  CVR – conversion rates
–  Play rate per product
–  Views total and views per user
–  Number of times played per user
–  Number of completion plays
–  Distribution of play lengths
–  Estimated minutes watched
–  Average view duration
•  Click through rates on overlay buttons
•  Able to leverage the HTML5 video and YouTube functions such as player status and current time.
ANALYTICS
MEASURING RETURN
Sample YouTube Analytics

YOUTUBE ANALYTICS
•  The whole picture if YouTube hosted.
•  20+ metrics available including;
–  View Metrics – views, uniques
–  Watch Time Metrics - estimatedMinutesWatched
–  Engagement Metrics
–  Annotations Metrics
–  Earning Metrics
–  Ad Performance Metrics
•  Requires registration of your application and Oauth authentication.
•  https://developers.google.com/youtube/analytics/
YOUTUBE ANALYTICS API

MOBILE
INTEGRATION & INTERACTION
“Online media inﬂuences more than 50% of in-store sales, making cross-channel
campaigns for the omnichannel shopper more critical than ever. Than number is
expected to rise to 60% by 2017. “ MediaPost – Web Media Inﬂuences Half of Store
Sales

MOBILE PRODUCTVIDEO USAGE
•  Mobile leveraged for:
–  Casual Browsing / Product Research
–  In store research using a mobile device
•  Two types internet supported research in store:
–  Unguided / Self-guided
•  Keyword Searching
–  Directed from product packaging / signage
•  Vendor website
•  Speciﬁc product information launch point

MERGING OF PHYSICAL ANDVIRTUAL
•  More and more people using mobile seamlessly in
physical locations.
•  From CMB - 41% say the information they got was
useful.
•  Launched from product packaging or signage.
•  Less about the technology and more of how to get
the information to the user in the decision window.

EQUIVALENCY ACROSS PLATFORMS
•  BestBuy uses shelf tags with QR Codes for the online product experience.
•  However
–  3 Videos available on desktop while no video is available on the iPhone for Destiny.
BESTBUY DIFFERENCE ON IPHONE

QR CODE ON SITE LAUNCHING
•  Make sure the code can be scanned.
Image credit – mobile marketer Image credit – Tag It Up, LLC
OTHER FAILS

PUSHVIDEO
•  Whether in-store or online.
•  Make it easy to ﬁnd and view.
•  Can we get to one click or tap information?
BRING VIDEO CONTENT TO THE FRONT

CONCLUSION
RECOMMENDATIONS & THOUGHTS

PRODUCTVIDEO TOOLS
•  Quickly growing area of commerce services
–  Animoto – online video creation service
–  Treepodia – www.treepodia.com - ecommerce video platform
–  Invodo – invodo.com
•  Provide various features:
–  Creation
–  Analytics
–  Distribution
–  Social sharing
–  Video advertising (banners and like)
SIMPLIFYING THE PROCESS

RECOMMENDATIONS
•  Use video links on product pages,
not just brand pages.
•  Keep videos short – 1-2 minutes
(small opportunity window).
•  Stay away from photo montages
videos.
•  If unable to create own videos link
to manufacturers video.
•  Keep content up to date.
SOME GATHERED EXPERIENCES

RECOMMENDATIONS
•  Put video above the fold either linked
or embedded.
•  Use a combination of video types.
•  Use A/B testing for length, subject
material, style.
•  Test on a variety of viewing platforms.
•  Verify ROI with analytics. A
combination of in-house and third
party.
TESTING AND METRICS

From ONLINEVIDEO.NET, 2013
-17% of consumers have discovered a product through Pinterest.
- Consumers also use social media to discover the latest news and
products from brands (65 percent of consumers), receive customer
support (24 percent), and to see what others are buying (19
percent).
- Mobile shoppers are 3x as likely to view a video than desktop
shoppers.
Increasingly seamless experience with mobile/social and product videos will be
key.
Not only is it now easy to view videos anywhere but it is also easy for
customers to create and share.
FOCUS MOBILE & SOCIAL

•  Test on a variety of viewing platforms.
•  Plan on an omni channel strategy.
•  Understand location and usage paradigms.

FUTURES
•  Continued “experimentation” of augmented
reality interactive product packaging – without 2D
codes.
•  Increased virtual physical experiences.
•  Wearable interaction and video triggering based
on location – beacons, geofencing, NFC, etc.
•  More contextual click through video elements.
•  Video customer reviews posting in real time right
to product pages.
•  Increased business costs of video safeguards.
WHAT MAY BE

Q&A
Chuckahudson+smw@gmail.com
linkedin.com/in/chuckhudson
Code samples
https://github.com/cahudson/vcommerce

REFERENCES
•  Animoto – The Power of Video for Small Business Infographic, March 13,
2014.
•  Invodo
–  Invodo Statistics
–  Invodo Q1 2014 Video Commerce Benchmarks
•  ReelSEO - http://www.reelseo.com/12-types-product-videos/
•  Walker Sands Communications –
Reinventing Retail: What Businesses Need To Know for 2014
•  Making the VIDEO tag interactive -
http://www.slideshare.net/charlesahudson/html5-video-
interactive-28467810
SUGGESTED READING MATERIAL

IFYOU LIKE THIS TALK
•  Check out
–  Making the HTML5 VIDEO tag interactive
•  http://www.slideshare.net/charlesahudson/html5-video-interactive-28467810

CHARLES HUDSON
•  Google+ https://plus.google.com/u/0/+CharlesHudsonA
•  http://www.slideshare.net/charlesahudson/
linkedin.com/in/chuckhudson

�ݺ�ߣ

Driving Commerce Through Streaming Video

More Related Content

Driving Commerce Through Streaming Video