Video has become an important tool in the marketers’ tool box. Video storytelling is a useful and increasingly popular way to engage customers. But if your video doesn’t work properly or cripples your website or app performance it will become a major frustration to customers, marketers and techies alike.
In the previous column we learned:
This column will explore how to detect, avoid and remedy issues with videos.
Detecting issues with video, audio or any other web or app issue a) can be straightforward; b) should be everyone’s responsibility, from the CEO down; and c) helps to keep agencies, techies and marketers on their toes.
Blatantly obvious – but when was the last time you checked out your site and videos from a bus, train or bar? Incentivize employees to use the site/app (during beta testing and routinely after goes live) and report issues and suggest improvements.
Recruit customers and monitor their behavior and reactions as they use your web site, using different devices, networks and locations. Score against the above checklist. If this cannot be conducted in person use a remote service such as UserTesting.com. User testing should occur at each stage of the development process. See this column on user testing mobile sites/apps.
There are different types of testing, including:
Following best practices while creating/producing the video or coding the page / website / app that will host it should help avoid many of the common issues i.e.: won’t play, slow to play, broken playback.
Industry guidelines on mobile video are thin on the ground – considering the increasing popularity of the format. What guidance is available tends to be a bit techie and thus a turn off for non-techies.
The following recommendations have been compiled with the help of:
There are many costs involved with video/audio:
This makes it imperative that the video is meeting a known user need, is contains quality content, is right length, optimized in terms of bitrate, segments and compression.
When it comes to bandwidth, standard video is greedy, requiring 0.5 Megabits per second (Mbps); high definition (HD) is five times as greedy as SD; and 4K is 30 times as greedy. Cisco’s Usha Andra explains:
“Mobile video and multimedia applications have higher bandwidth and lower latency requirements than non-video applications. The requirements can range from a low of 0.5Mbps for standard definition (SD) to 2.5Mbps for high definition (HD) and over 15Mbps for 4K/ultra-high definition (UHD) downloads and much higher for virtual reality (VR). Latency requirements can range from 100 milliseconds (ms) to 15ms for UHD VR video applications.”
Even among developed telecoms markets, the capability of mobile networks varies considerably. Check The Cisco GCI Global Cloud Readiness Tool for an averages of each country. The stats suggest that download speeds in the US and UK are 40% lower than Norway and South Korea and 25% lower than Canada.
“Please note that these are average speeds and latencies, which means many users experience higher or lower speeds compared to the average speeds. When the speeds and latencies are lower than what an application warrants, the end user experiences delay in video, garbled audio, etc.”
Few of the most popular sites, including those that have a strong video focus: YouTube, Vimeo, BBC and CNN host videos on the homepage or category pages. These sites promote their videos on the homepage as image links (often with play button icon overlaid) and text links, which when clicked/tapped go to a page dedicated to that video.
Why? Keeping video off the homepage keeps it leaner and faster to load on mobile devices. See the Twitch example below.
Forcing mobile web visitors to view video whether they want to or not, is:
There is a (vaguely plausible) argument that sites such as YouTube are an exception to the no autoplay rule. As the visitor is clicking through to the video on a dedicated page it is implicit that they intend to watch.
Consider Twitch, the surprisingly popular site where fans watch gamers playing video games live, captured in the image below. On the desktop homepage, Twitch.tv has a live game on autoplay, while on m.Twitch.tv, there are no videos hosted on the homepage.
Comparing the download size and page speed of Twitch homepage when downloaded to a mobile and desktop device on HTTP Archive (April 15 2017) delivers dramatic results:
Make sure the video and host page is intuitive. Let the viewer take control. Make it easy to:
To make video/audio accessible for:
The delay to start-up is caused by two essential processes:
Thus a delay is inevitable, but the video should be optimized to ensure delays are kept to a minimum. As can be seen from the 2016 data from Conviva study below, videos tend to take longer to start on mobile devices, both on WIFI and Cellular, than Tablet or Desktop. No coincidence that mobile has the highest proportion of exits per attempt.
While the authentication, downloading and (re) buffering occurs, tell the user what is happening and/or distract them. Watching a spinning wheel icon can be frustrating.
Stalls occur when too few video segments stored in the buffer to allow playback to continue. The video will not continue until sufficient segments have been downloaded (called re-buffering).
The key is to find balance between slow start and stalling, says AT&T’s Doug Sillars:
“The 2 biggest metrics for video are:
- Startup delay (how long from click to stream).
- Stalls (video stops, maybe a spinner).
These are (of course) interrelated. If you startup too quickly – there will not be enough video stored locally on the device… and you might get a stall. Or you can take too much data at the start (long startup delay), but have no stalls later.
There is a magic “Goldilocks” point in the middle – not too hot, not too cold – that balances the two factors.”
Optimize bitrate, compression and segment size for the device and network connection.
Adaptive bitrate streaming creates and stores digital video at a number of different quality/speeds/bitrates. The video player on the client device requests the most appropriate of these based on a) network speed, b) device capability, and c) capacity of the buffer. There are two types of adaptive streaming, DASH and HLS, because one industry standard that worked on all devices would be just too easy (find out more here).
A CDN speeds up how quickly web media, including video loads and plays on a mobile device by reducing the that the video has to travel between the original web server – e.g. your webserver in California, USA and viewer in Timbuktu in Mali – by replicating and storing the video on servers around the world.
According to BuiltWith, 53.8% of the top 10k websites use CDNs.
Akamai Edge, which was one of the original CDNs, founded in 1999, remains one of the most popular. According to BuiltWith, Akamai is used by 11.4% of the top 10,000 sites, followed by Amazon CloudFront at 4% and MaxCDN at 1.3%.
Hosting websites on a third party network, and embedding the file, removes several headaches, including video compression, adaptive bitrates and engaging a CDN. This helps to explain why 15.2% of top 10k websites embed YouTube videos and 3.6% Vimeo, according to BuiltWith.
Regularly check the key pages using a testing tool such as WebPageTest (this is the tool used by HTTP Archive).
If the video performance is an issue.
If video performs better on some devices and over different connections e.g. PC on cable versus smartphone on 3G.
These resources are aimed at developers, but are useful for all (if you ignore the techie bits):
This is Part 44 of the ClickZ ‘DNA of mobile-friendly web’ series.
Here are the recent ones:
How video impacts mobile web performance and UX
Optimizing images for mobile: right format, right size, right place, right device
How to fix your bloated mobile website: fewer, better, smaller images
Average mobile webpage is now 2.2MB, 68% is images: let’s trim the fat
The post Best practices to ensure your video starts and plays well on mobile appeared first on ClickZ.Reblogged 4 months ago from www.clickz.com