Tag: Video

video-conferencing-tools-zoom5-windows10-settings-general
15 Jun

Which Video Conferencing Tools Are Most Accessible?

by TBSCategories: News

Which Video Conferencing Tools Are Most Accessible?

Which Video Conferencing Tools Are Most Accessible?

Claudio Luis Vera

With us all suddenly working from home in the COVID era, most of us have had to make some quick choices from a huge variety of video conferencing and collaboration tools. But do all of these apps work well for everyone? If you have a co-worker or a student with a disability, would they be able to participate as well?

If you’ve had a disability yourself — or if you work in government or higher education — you’ve probably faced this question already. If not, pay attention, because the wrong choice could leave your organization vulnerable to a discrimination lawsuit.

With the right apps, working from home is a blessing for those with a disability. If you can’t drive, you no longer have to rely on poor transportation like paratransit or expensive ride-share services. Working from home allows you to attend to your medical needs in ways that might be disruptive in an office, like running a nebulizer or using an IV. Or you may avoid the hassle of navigating a building that’s not truly accessible.

With the wrong tools, a person with a severe disability may actually experience new barriers. They could be left out of meetings and other types of collaboration, and that can create significant liability for the employer.

“When people with disabilities are excluded because a product is inaccessible, it’s not only frustrating, but it [also] affects our colleagues and clients that work with us.”

— Lynette Frison, screen reader user

Most of us make a common mistake when we set up large meetings or online events: we assume that everyone who attends will be fully able to participate. Unless you know everyone’s ability level — like with your immediate co-workers — you should ask if someone needs accommodations or assume that someone attending may have difficulty seeing, hearing, or working a mouse.

Zoom: The Favorite For Accessibility

Ask anyone in the disability community about video conferencing tools, and they will almost certainly point you to Zoom. There’s no shortage of favorable opinions and anecdotal support for Zoom in the disability community, as the app has a reputation for providing a consistently high level of access. In fact, 92% listed Zoom as their tool of choice in a survey conducted by Fable, an accessibility testing firm that draws testers from a variety of different disabilities.

An app’s accessibility comes from ensuring that the app’s functionality works for everyone, including those using assistive technologies like screen readers, magnification, and captions. Most software developers don’t test their apps thoroughly for compatibility with assistive technologies or for usability with people with disabilities.

Even the simple task of joining a meeting can present a roadblock if the app hasn’t been developed with accessibility in mind. For example, unnecessary preference dialogs when entering a meeting can block a blind person that’s using a screen reader from attending. Zoom offers the convenience of clicking on an email link and allowing the participant to join a meeting immediately. “You follow the link and that’s it”, says Eric Barrette, director of technology for the Lighthouse of Broward, an organization for the blind and visually impaired.

The simplicity of Zoom’s one-click sign-on belies the depth of the application behind it. Zoom’s product philosophy favors universal design over separate applications for different user types. The result is an app that is easy to learn for first-time use, but has layers of additional features for those who invest the time in becoming power users.

Advanced Roles And Features

Almost all video conferencing apps have three different roles that a user can play: host, presenter, and participant. The names of these roles may vary with the app, but the functions are fairly standard: A host works as the master of ceremonies and manages the permissions; a presenter is a speaker or panelist and often uses screen sharing. Naturally, playing host has the greatest functionality and requires the greatest knowledge of an app. For that reason, it’s the most difficult role to support accessibly, and Zoom supports it quite well.

Jonathan Mosen, a blind podcaster from New Zealand, has created an in-depth audiobook titled Meet me Accessibly with tutorials that teach easy to advanced tasks to fellow blind Zoom users. These include hosting Zoom meetings, conducting screen sharing, as well as doing installations, and optimizing the settings.

Settings And Security

Zoom allows users to tailor the app to their needs through the app’s extensive settings menus. If anything, Zoom is the Swiss Army knife of video conferencing tools with a setting for every conceivable aspect of the application. At the Lighthouse of Broward, the IT team has taken advantage of this by creating one account with settings aimed at the blind, and another account with different settings for low-vision users.

In fact, there are 70 settings within the desktop client, and another 95 available through Zoom’s advanced settings web user interface. With 165 settings, it’s easy for any product to stumble, especially when it comes to getting the default settings right. Many of the security issues came from overly lax defaults, like meetings not requiring passwords, or re-using personal meeting room IDs for convenience.

A screenshot of Zoom’s desktop settings menu
Zoom’s desktop settings menu (Large preview)

Zoom doesn’t allow settings to be saved offline or shared — yet. In an ideal world, power users in the disability community could create settings profiles that are tailored for specific disabilities and share them with others who are less experienced with Zoom.

Different Use Cases For Accessible Conferencing

Video With Work Chat

With stay-at-home orders in place, many teams are finding themselves making more use of threaded work chat throughout the day. Like an email client, this type of application is one that you’d leave on all the time, so your interactions aren’t limited to the duration of an online meeting.

A screenshot of a chat window in Slack showing theprofile picture of the person calling along with their user name, company name, and two large bold buttons with the telephone icon on both: red button to decline call and green one to accept the call via Slack
Slack video conferencing (Image source) (Large preview)

Slack is a hugely popular app for threaded work chat that offers the ability to call another member in a video call. It’s great for spontaneous video conversations, and its large bold buttons and resizable text are helpful for users with moderately low vision. However, the Slack interface presents challenges to screen reader users and those with serious vision impairments, like keeping track of which Slack community that you’re in when the UI is magnified.

Still image from a video chat including four people divided into four boxes across the screen with a little window in the bottom right corner
Microsoft Teams website (Large preview)

If you work in an organization with an Office 365 Enterprise license, Microsoft Teams is an alternative to Slack, with its integration into other Office apps for calendaring and file sharing. The video calls on Teams can include hundreds of participants, and they’re the app of choice inside Microsoft. Teams is also favored over Slack by many blind and low-vision users.

One-To-One Video

People use video conferencing tools in a variety of different ways, depending on the situation and the physical abilities of the participants. If you’re conducting a job interview though, it’s crucial to know beforehand if the job candidate needs accommodations or if they can’t work with your platform of choice. Failure to provide a viable alternative could land you in a discrimination lawsuit.

One-to-one video calls with apps like FaceTime are well-suited for therapists and other independent healthcare providers. They’re also an excellent vehicle for those who communicate using sign language, as illustrated on the Apple accessibility website.

A still image of a video call between two people using sign language
FaceTime is a great way for people who use sign language to communicate easily. (Image source: Apple Accessibility) (Large preview)

Using Captions

But what if one of the participants doesn’t know sign language? In that case, a hard-of-hearing user would benefit from the automatic captions that are available in Google Meet. Using captions as simple as clicking on the menu in the bottom right corner and clicking on the “Turn on captions” menu item. Captions appear — but only on the devices that have them turned on — so they don’t present a distraction to attendees that don’t want them.

A still image of a video call in Google Meet with the Turn On Captions setting zoomed in to see where it can be found in the interface
Captions can be turned both on or off during a Google Meet call. (Image source: 9to5google) (Large preview)

Captions are a lifeline for the deaf and the hard of hearing, and are helpful to those participants who need to keep their audio turned off or who are in a noisy situation. They’re also useful for those who aren’t native speakers of the language that’s being spoken. Auto-captions may be satisfactory for a native speaker of American or Australian English — and if you’re OK with homonyms like “meat” or “meet” being mixed up occasionally. But if the speaker has a strong accent or a speech impairment, then the accuracy of the captions drops significantly.

There’s much debate over how much accuracy is needed for captions to be viable. According to Kristina England, an accessibility expert at the University of Massachusetts, “[in] higher ed institutions we need 99% accurate captions for accommodation requests.”

When auto-generated captions get below 90% accuracy, they can be a serious annoyance, which has won them the nickname of “craptions” in the disability community. For that reason, it’s important to always choose a product that allows users to turn the captions off on their end.

Avoid this easy mistake: don’t use auto-captions in PowerPoint or Google Slides if you’re presenting remotely. Limit their use to live, in-person meetings instead. By having the captions on the presenter end, they become part of the meeting’s video stream and can’t be turned off by the other attendees. If you’re recording the presentation, then the inaccurate captions become an indelible part of your recording. Also, PowerPoint and Google Slides only transcribe the presenter’s audio, leaving anything spoken by the other participants out of the captions.

Before the COVID pandemic hit, Zoom was preparing to include Live Transcription, an automatic captioning feature, in its Enterprise plan. The feature is powered by Otter.ai, an artificial intelligence service that provides real-time automated captioning and identifies the speaker like Google Meet. With the 30-fold growth of new accounts, though, Zoom was compelled to delay the launch of Live Transcription so as not to overtax its infrastructure. In the meantime, you can still get the same functionality by running Otter.ai through Zoom’s API for third-party captioning services. but that requires an Otter for Teams account for a minimum of 3 users at $ 30/month each.

One important piece of advice, though: If you’re looking to host a conference or a large public event over the internet, you should not rely on auto-captions, but consider hiring a live human captioner instead. If you use Zoom, there’s another benefit, too: your meeting participants will be able to scroll back through the captions and read any parts they may have missed.

A Word About Webex

Webex has gained a lot of market share in the large enterprise market, particularly with its integration with Cisco’s on-site video conferencing equipment. Webex is also tightly bound with Microsoft Outlook through the Webex Productivity Tools package. When considering these combinations, Webex offers mixed levels of accessibility for users of different abilities.

For sighted and low-vision users who can use a mouse, Webex’s integrations are quite useful. However, when a participant enters a meeting, Webex often throws pop-up dialogs to confirm their audio and video choices, which can’t be operated without a pointing device. Outlook’s Calendar and Meeting interfaces also fail to provide keyboard access, further blocking someone who can’t work a mouse from accessing a meeting.

If your enterprise has deaf and hard-of-hearing members, Webex doesn’t offer automatic captions but it does offer a media viewer window where a human captioner can type what is spoken by a presenter during a meeting. Webex also provides transcription services for recorded meetings for customers who have Network Based Recordings enabled.

Webex’s bold visual design works well for people who have low vision but are not blind. “The text in Webex is easy to see visually and works well when utilizing screen magnification software. The settings in Webex are intuitive and easy to figure out,” says Elizabeth Novak, a tester with Fable.

For those users who are blind and rely on screen readers, though, Webex presents numerous barriers. Many of its interface elements have missing or confusing labels. Others can’t be reached with a keyboard.

Webex’s spotty support for screen readers has led to a lawsuit against one of its customers: in October 2019, a blind plaintiff in Massachusetts sued her employer for not providing accessible alternatives like Zoom for Webex meetings. Beacon Health Options, the employer, was using Webex for virtual conferences and mandatory employee training in which Amy Ruell, the plaintiff, was unable to participate. The case is still ongoing at the time of this writing.

One of the quirks of digital accessibility lawsuits is that they are rarely filed against software makers or implementers. Instead, they are almost always filed against the organization that purchases the software and makes it available to its customers, employees, and other constituents. The courts’ reasoning is that the organization should be conducting due diligence in vetting the products that it uses.

Judging Apps By Their Accessibility Pages

If you’re the one deciding which video conferencing platform to use in your organization, the lack of formal studies and the constant change will pose challenges. One good way to gauge a company’s commitment to accessibility is to look for an accessibility page on their website. Usually, it’s posted as a link in the footer of every page. A company that is at least aware of accessibility will have a posted accessibility policy.

There are a handful of companies that need to meet accessibility standards quite strictly and take their documentation much further. These companies will post Voluntary Product Accessibility Template (VPAT) statements to meet Section 508 requirements for selling to the government or higher education. VPAT statements can be a goldmine of accessibility compliance information, and should be reviewed by anyone in charge of making a purchasing decision.

Zoom and Webex both provide extensive VPAT statements on their websites with detailed information on accessibility. These disclosure statements classify the level of support for users with disabilities and assistive technologies into four categories:

Supports Supports With Exceptions Does Not Support Not Applicable

From these options, anything other than “Supports” should be looked at carefully or treated as a potential problem area.

A real red flag is when a company does not have a posted policy, and where a search for “accessibility” yields results that are unrelated to disabilities or assistive technologies. This is the case with Crowdcast, where the results for “access” are related to connectivity and security. With Jitsi, developers contribute their efforts to building and refining the application as an open-source project. However, accessibility at Jitsi is sparsely resourced:

Community post that says “Maybe after few months or more when things slow down, we will be able to take a look, but for now our hands are full and any help is welcome.”
(Large preview)

While this doesn’t help a person with a disability who may want to use Jitsi, it does present opportunities to developers looking to contribute where they can make a large social impact.

If an app has advanced features or functionality that’s not directly connected to video conferencing, then support can be spotty as well. This often the case with polling, Q&A and other ancillary features, even with Zoom. For those products that do post VPATs on their websites, you can see which features are problematic. A good rule of thumb would be to avoid these features when accessibility is a concern.

Building Accessible Products

How do the makers of video conferencing platforms create a product that’s truly accessible for all? At Zoom accessibility is treated as a core value, beginning with CEO Eric Yuan. According to Alex Mooc, Zoom’s accessibility lead, “that executive buy-in trickles down to every team leader, every platform. Every platform owner is accountable for these accessibility issues.” The product teams are organized so that accessibility experts are embedded into every development team, unlike most other companies where accessibility comes in as oversight from a separate entity.

Zoom has fast release cycles, where the product is tested for accessibility as it’s built. Zoom’s engineers aren’t necessarily well-versed in accessibility when they’re hired, but they’re expected to learn quickly from the company’s extensive internal knowledge.

Most companies design and build their product for their abled users, and might consider disabled users as an afterthought, if at all. The opposite is true at Zoom: accessibility is treated as part of the product’s usability for all users, abled and otherwise. “Someone who is disabled is like a canary in a coal mine,” says Mooc, because resolving issues that they encounter helps with usability for all other users. In other words, accessibility is a means to deliver the frictionless, easy-to-use experience that Zoom strives for.

Zoom also seeks out feedback from people in the disability community, leaning heavily on its relationships with educational institutions like the University of Washington. Some of Mooc’s research involves going to disabled users’ homes and observing how they work. With stay-at-home orders and social distancing, though, this type of research has been put on hold.

Of all the ways to gain insight into a product’s accessibility, the best is to have live user testing by people with disabilities. Fable Tech Labs uses Zoom almost exclusively to conduct functional testing remotely with participants who are blind, have low vision, or have mobility impairments and rely on assistive technologies like switch systems and voice navigation. But doing this type of testing remotely presents its own technical challenges and requires a lot of skill and knowledge of hardware to conduct successfully. This can lead to elaborate workarounds with multiple devices and video feeds. Ideally, there would be a mixing-board-style product to handle multiple feeds in a remote connection, but that’s not in Zoom’s roadmap.

Growth And Change

Over the past few months, both Zoom and Google Meet have grown from 10 million users to over 300 million daily participants each. The sudden explosion in popularity has attracted malicious users who found ways to hijack insecure meetings in Zoom in a practice called “zoom-bombing”. The few incidents generated news stories that became ubiquitous in the news media, raising concerns about Zoom’s security. Some organizations like Google and the New York City school system have gone as far as banning Zoom from their computers.

For many in the disability community, this turn of events has had an unfortunate impact on access. If organizations ban Zoom from their computers, then meetings need to be conducted and classes need to be taught online using less accessible products, which can mean trading a usable-but-insecure platform for one that simply can’t be used.

“Security is very important, but there’s no point trying to use an inaccessible tool no matter how secure it is.”

— Erik Burggraaf, screen reader user

Fortunately, Zoom has been quick to respond with a series of security fixes within a couple of weeks. The overly lax defaults in the app’s 165 settings were tightened up, and a variety of changes were made to the user experience. Now it’s mostly up to users to update their Zoom apps, settings, and desktop clients.

Since the beginning of the COVID pandemic, the rate of development in video conferencing has accelerated in a business that already had frequent releases. Major product announcements are happening weekly, and Zoom is releasing patches nearly daily, along with a major upgrade to Zoom 5.

The net: if you use any video conferencing software, you should be diligent about updating your software as frequently as you can — or enabling auto-updates on your device. You may even find that a serious accessibility issue may be resolved with a simple software update.

The future is looking promising though, according to accessibility tester Shane: “Accessibility is getting better each day within online communication tools. However, some still need work to be completely inclusive to all people.”

Further Reading

Smashing Editorial (ra, il)


Articles on Smashing Magazine — For Web Designers And Developers

logo-red-11
18 Feb

How A Screen Reader User Accesses The Web: A Smashing Video

by TBSCategories: News

How A Screen Reader User Accesses The Web: A Smashing Video

How A Screen Reader User Accesses The Web: A Smashing Video

Bruce Lawson

Two weeks ago, I had the pleasure of hosting a Smashing TV webinar with Léonie Watson on how a screen reader user accesses the web. In the talk, Léonie showed some big-name sites, such as BBC, sites nominated by Members (including my own!), Smashing Magazine itself, and the popular third-party service Typeform, because so many of us (including us at Smashing) just assume that the popular services have been checked for accessibility. Throughout, Léonie explained how the sites’ HTML was helping (or hindering) her use of the sites.

We felt that the webinar was so valuable that we would open it up so that it’s free for everybody to use. Hopefully, it will serve as a resource for the whole web development community to understand how — and why — semantic markup matters.

What We Learned

I was pleased that my personal site’s use of HTML5 landmark regions (main, nav, header, footer, etc) helped Léonie form a mental model of the structure of the page. Although I’ve always been scrupulous to avoid link text like “click here” because WCAG guidelines require “The purpose of each link can be determined from the link text alone”, it hadn’t occurred to me before that because I have hundreds of weekly “Reading List” articles, it’s impossible for a screen reader user to tell one from the other when navigating by headings. Since the webinar, I’ve made each new reading list’s heading unique by including its number in the heading (“Reading List 222”).

We also learned that being technically accessible is good, but even better is to be usably accessible. The Smashing Team learned that before Léonie can read her own article on our site, there’s loads of preamble (author bio, email sign-up form) that she can’t easily skip over. We’re correcting this at the moment. There’s also an issue with our quick summaries; Léonie gets no indication when the summary has finished and the article proper has begun. Sighted users get a dividing line, but what can we do for non-sighted users?

After the webinar, Léonie suggested using a semantic HTML element and a sprinkling of ARIA:

<section aria-label="Summary"> </section>

This is announced as “Summary region start” and “Summary region end”, and can be skipped over if desired.

Thank You!

We’d like to thank Léonie for giving the webinar, and also our magnificant Smashing Magazine members whose support allows us to commission such content, pay our contributors fairly, and reduce advertising on the site.

Shameless plug: if you enjoyed this webinar, why not consider becoming a Member yourself? There are around three webinars a month free, Smashing eBooks and discounts galore. It costs around two cups of coffee a month, and you can cancel anytime.

Smashing Editorial (ra, il)


Articles on Smashing Magazine — For Web Designers And Developers


Deprecated: Function create_function() is deprecated in /home2/thebrand/public_html/wp-content/plugins/wp-spamshield/wp-spamshield.php on line 1884
caniuse-mp4-1
05 Nov

Improve Animated GIF Performance With HTML5 video

by TBSCategories: News

Improve Animated GIF Performance With HTML5 video

Improve Animated GIF Performance With HTML5 video

Ayo Isaiah

Animated GIFs have a lot going for them; they’re easy to make and work well enough in literally all browsers. But the GIF format was not originally intended for animation. The original design of the GIF format was to provide a way to compress multiple images inside a single file using a lossless compression algorithm (called LZW compression) which meant they could be downloaded in a reasonably short space of time, even on slow connections.

Later, basic animation capabilities were added which allowed the various images (frames) in the file to be painted with time delays. By default, the series of frames that constitute the animation was displayed only once, stopping after the last frame was shown. Netscape Navigator 2.0 was the first browser to added the ability for animated GIFs to loop, which lead to the rise of animated GIFs as we know them today.

As an animation platform, the GIF format is incredibly limited. Each frame in the animation is restricted to a palette of just 256 colors, and over the years, advances in compression technology has made leading to several improvements the way animations and video files are compressed and used. Unlike proper video formats, the GIF format does not take advantage of any of the new technology meaning that even a few seconds of content can lead to tremendously large file sizes since a lot of repetitive information is stored.

Even if you try to tweak the quality and length of a GIF with a tool like Gifsicle, it can be difficult to cut it down to a reasonable file size. This is the reason why GIF heavy websites like Giphy, Imgur and the likes do not use the actual GIF format, but rather convert it to HTML5 video and serve those to users instead. As the Pinterest Engineering team found, converting animated GIFs to video can decrease load times and improve playback smoothness leading to a more pleasant user experience.

Hence, we’re going to look at some techniques that enable us use HTML5 video as a drop in replacement for animated GIFs. We’ll learn how to convert animated GIFs to video files and examine how to properly embed these video files on the web so that they act just like a GIF would. Finally, we’ll consider a few potential drawbacks that you need to ponder before using this solution.

Convert Animated GIFs To Video

The first step is to convert GIF files to a video format. MP4 is the most widely supported format in browsers with almost 94% of all browsers enjoying support, so that’s a safe default.

Support table on caniuse.com showing browser support for the MP4 video format
94% of all browsers support the MP4 format (Large preview)

Another option is the WebM format which offers high quality videos, often comparable to an MP4, but usually at a reduced file size. However, at this time, browser support is not as widespread so you can’t just go replacing MP4 files with their WebM equivalents.

Support table on caniuse.com showing browser support for the WebM video format
Internet Explorer and Safari are notable browsers without WebM support (Large preview)

However, because the <video> tag supports multiple <source> files, we can serve WebM videos to browsers that support them while falling back to MP4 everywhere else.

Let’s go ahead and convert an animated GIF to both MP4 and WebM. There are several online tools that can help you do this, but many of them use ffmpeg under the hood so we’ll skip the middle man and just use that instead. ffmpeg is a free and open source command line tool that is designed for the processing of video and audio files. It can also be used to convert an animated GIF to video formats.

To find out if you have ffmpeg on your machine, fire up a terminal and run the ffmpeg command. This should display some diagnostic information, otherwise, you’ll need to install it. Installation instructions for Windows, macOS and Linux can be found on this page. Since we’ll be converting to is WebM, you need to make sure that whatever ffmpeg build you install is compiled with libvpx.

To follow along with the commands that are included in this article, you can use any animated GIF file lying around on your computer or grab this one which is just over 28MB. Let’s begin by converting a GIF to MP4 in the next section.

Convert GIF To MP4

Open up a terminal instance and navigate to the directory where the test gif is located then run the command below to convert it to an MP4 video file:

ffmpeg -i animated.gif video.mp4

This should output a new video file in the current directory after a few seconds depending on the size of the GIF file you’re converting. The -i flag specifies the path to the input GIF file and the output file is specified afterwards (video.mp4 in this instance). Running this command on my 28MB GIF produces an MP4 file that is just 536KB in size, a 98% reduction in file size with roughly the same visual quality.

But we can go even further than that. ffmpeg has so many options that you can use to regulate the video output even further. One way is to employ an encoding method known as Constant Rate Factor (CRF) to trim the size of the MP4 output even further. Here’s the command you need to run:

ffmpeg -i animated.gif -b:v 0 -crf 25 video.mp4

As you can see, there are a couple of new flags in above command compared to the previous one. -b:v is normally used to limit the output bitrate, but when using CRF mode, it must be set to 0. The -crf flag controls the quality of the video output. It accepts a value between 0 and 51; the lower the value, the higher the video quality and file size.

Running the above command on the test GIF, trims down the video output to just 386KB with no discernable difference in quality. If you want to trim the size even further, you could increase the CRF value. Just keep in mind that higher values will lower the quality of the video file.

Convert GIF To WebM

You can convert your GIF file to WebM by running the command below in the terminal:

ffmpeg -i animated.gif -c vp9 -b:v 0 -crf 41 video.webm

This command is almost the same as the previous one, with the exception of a new -c flag which is used to specify the codec that should be used for this conversion. We are using the vp9 codec which succeeds the vp8 codec.

In addition, I’ve adjusted the CRF value to 41 in this case since CRF values don’t necessarily yield the same quality across video formats. This particular value results in a WebM file that is 16KB smaller than the MP4 with roughly the same visual quality.

Now that we know how to convert animated GIFs to video files, let’s look at how we can imitate their behavior in the browser with the HTML5 <video> tag.

Replace Animated GIFs With Video In The Browser

Making a video act like a GIF on a webpage is not as easy as dropping the file in an <img> tag, but it’s not so difficult either. The major qualities of animated GIFs to keep in mind are as follows:

  • They play automatically
  • They loop continuously
  • They are silent

While you get these qualities by default with GIF files, we can cause a video file to act the exact same way using a handful of attributes. Here’s how you’ll embed a video file to behave like a GIF:

<video autoplay loop muted playsinline src="video.mp4"></video>

This markup instructs the browser to automatically start the video, loop it continuously, play no sound, and play inline without displaying any video controls. This gives the same experience as an animated GIF but with better performance.

To specify more that once source for a video, you can use the <source> element within the <video> tag like this:

<video autoplay loop muted playsinline>     <source src="video.webm" type="video/webm">     <source src="video.mp4" type="video/mp4"> </video>

This tells the browser to choose from the provided video files depending on format support. In this case, the WebM video will be downloaded and played if it’s supported, otherwise the MP4 file is used instead.

To make this more robust for older browsers which do not support HTML5 video, you could add some HTML content linking to the original GIF file as a fallback.

<video autoplay loop muted playsinline>     <source src="video.webm" type="video/webm">     <source src="video.mp4" type="video/mp4">            Your browser does not support HTML5 video.            <a href="/animated.gif">Click here to view original GIF</a> </video>

Or you could just add the GIF file directly in an <img> tag:

<video autoplay loop muted playsinline>     <source src="video.webm" type="video/webm">     <source src="video.mp4" type="video/mp4">     <img src="animated.gif"> </video>

Now that we’ve examined how to emulate animated GIFs in the browser with HTML5 video, let’s consider a few potential drawbacks to doing so in the next section.

Potential Drawbacks

There are a couple of drawbacks you need to consider before adopting HTML5 video as a GIF replacement. It’s clearly not as convenient as simply uploading a GIF to a page and watch is just work everywhere. You need to encode it first, and it may be difficult to implement an automated solution that works well in all scenarios.

The safest thing would be to convert each GIF manually and check the result of the output to ensure a good balance between visual quality and file size. But on large projects, this may not be practical. In that case, it may be better to look to a service like Cloudinary to do the heavy lifting for you.

Another problem is that unlike images, browsers do not preload video content. Because video files can be of any length, they’re often skipped until the main thread is ready to parse their content. This could delay the loading of a video file by several hundreds of milliseconds.

Additionally, there are quite a few restrictions on autoplaying videos especially on mobile. The muted attribute is actually required for videos to autoplay in Chrome for Android and iOS Safari even if the video does not contain an audio track, and where autoplay is disallowed, the user will only see a blank space where the video should have been. An example is Data Saver mode in Chrome for Android where autoplaying videos will not work even if you set up everything correctly.

To account for any of these scenarios, you should consider setting a placeholder image for the video using the poster attribute so that the video area is still populated with meaningful content if the video does not autoplay for some reason. Also consider using the controls attribute which allows the user to initiate playback even if video autoplay is disallowed.

Wrap Up

By replacing animated GIFs with HTML5 video, we can provide awesome GIF-like experiences without the performance and quality drawbacks associated with GIF files. Doing away with animated GIFs is worth serious consideration especially if your site is GIF-heavy.

There are websites already doing this:

Taking the time to convert the GIF files on your site to video can lead to a massive improvement in page load times. Provided your website is not too complex, it is fairly easy to implement and you can be up and running within a very short amount of time.

Smashing Editorial (ra,dm)


Articles on Smashing Magazine — For Web Designers And Developers

video-playback-web-image-17
25 Oct

Video Playback On The Web: Video Delivery Best Practices (Part 2)

by TBSCategories: News

Video Playback On The Web: Video Delivery Best Practices (Part 2)

Video Playback On The Web: Video Delivery Best Practices (Part 2)

Doug Sillars

In my previous post, I examined video trends on the web today, using data from the HTTP Archive. I found that many websites serve the same video content on mobile and desktop, and that many video streams are being delivered at bitrates that are too high to playback on 3G speed connections. We also discovered that may websites automatically download video to mobile devices — damaging customer’s data plans, battery life, for videos that might not ever be played.

TL;DR: In this post, we look at techniques to optimize the speed and delivery of video to your customers, and provide a list of 9 best practices to help you deliver your video assets.

Video Playback Metrics

There are 3 principal video playback metrics in use today:

  1. Video Startup Time
  2. Video Stalling
  3. Video Quality

Since video files are large, optimizing the video to be as small as possible will lead to faster video delivery, speeding up video start, lowering the number of stalls, and minimizing the effect of the quality of the video delivered. Of course, we need to balance startup speed and stalling with the third metric of quality (and higher quality videos generally use more data).

Video Startup

When a user presses play on a video, they expect to be able to watch the video quickly. According to Conviva (a leader in video metric analysis), in Q1 of 2018, 14% of videos never started playing (that’s 2.4 Billion video plays) after the user pressed play.

Pie chart showing that nearly 15% of all videos fail to play
Video Start Breakdown (Large preview)

2.3% of videos (400M video requests) failed to play after the user pressed the play button. 11.54% (2B plays) were abandoned by the user after pressing play. Let’s try to break down what might be causing these issues.

Video Playback Failure

Video playback failure accounted for 2.3% of all video plays. What could lead to this? In the HTTP Archive data, we see 0.3% of all video requests resulting in a 4xx or 5xx HTTP response — so some percentage fail to bad URLs or server misconfigurations. Another potential issue (that is not observed in the HTTP Archive data) are videos that are blocked by Geolocation (blocked based on the location of the viewer and the licensing of the provider to display the video in that locale).

Video Playback Abandonment

The Conviva report states that 11.5% of all video plays would play, but that the customer abandoned the playback before the video started playing. The issue here is that the video is not being delivered to the customer fast enough, and they give up. There are many studies on the mobile web where long delays cause abandonment of web pages, and it appears that the same effect occurs with video playback as well.

Research from Akamai shows that viewers will wait for 2 seconds, but for each subsequent second, 5.8% of viewers abandon the video.

Chart displaying the abandonment rate as startup time is longer.
Rate of abandonment over time (Large preview)

So what leads to video playback issues? In general, larger files take longer to download, so will delay playback. Let’s look at a few ways that one can speed up the playback of videos. To reduce the number of videos abandoned at startup, we should ‘slim’ down these files as best as possible, so they download (and begin playback) quickly.

MP4: Video Preload

To ensure fast playback on the web, one option is to preload the video onto the device in advance. That way, when your customer clicks ‘play’ the video is already downloaded, and playback will be fast. HTML offers a preload attribute with 3 possible options: auto, metadata and none.

preload = auto

When your video is delivered with preload="auto", the browser downloads the entire video file and stores it locally. This permits a large performance improvement for video startup, since the video is available locally on the device, and no network interference will slow the startup.

However, preload="auto" should only be used if there is a high probability that the video will be viewed. If the video is simply resident on your webpage, and it is downloaded each time, this will add a large data penalty to your mobile users, as well as increase your server/CDN costs for delivering the entire video to all of your users.

This website has a section entitled “Video Gallery” with several videos. Each video in this section has preload set to auto, and we can visualize their download in the WebPageTest waterfall as green horizontal lines:

A WebPageTEst Waterfall chart
Waterfall of video preload (Large preview)

There is a section called “Video Gallery”, and the files for this small section of the website account for 14.6M (83%) of the page download. The odds that one (of many) videos will be played is probably pretty low, and so utilizing preload="auto" only generates a lot of data traffic for the site.

Pie Chart showing the high percentage (83%) of video usage.
Webpage data breakdown (Large preview)

In this case, it is unlikely that even one of these videos will be viewed, yet all of them are downloaded completely, adding 14.8MB of content to the mobile site (83% of the content on the page). For videos that are have a high probability of playback (perhaps >90% of page views result in video play) — preloading the entire video is a very good idea. But for videos that are unlikely to be played, preload="auto" will only cause extra tonnage of content through your servers and to your customer’s mobile (and desktop) devices.

preload="metadata"

When the preload="metadata" attribute is used, an initial segment of the video is downloaded. This allows the player to know the size of the video window, and to perhaps have a second or 2 of video downloaded for immediate playback. The browser simply makes a 206 (partial request) of the video content. By storing a small bit of video data on the device, video startup time is decreased, without a large impact to the amount of data transferred.

On Chrome, metadata is the default choice if no attribute is chosen.

Note: This can still lead to a large amount of video to be downloaded, if the video is large.

For example, on a mobile website with a video set at preload="metadata", we see just one request for video:

Webpage Test Waterfall chart
(Large preview)

And the request is a partial download, but it still results in 2.7 MB of video to be downloaded because the full video is 1080p, 150s long and 97 MB (we’ll talk about optimizing video size in the next sections).

Pie chart showing that 2.7 MB or 42% of data is still vide with preload=metadata.
KB usage with video metadata (Large preview)

So, I would recommend that preload="metadata" still only be used when there is a fairly high probability that the video will be viewed by your users, or if the video is small.

preload="none"

The most economical download option for videos, as no video files are downloaded when the page is loaded. This will potentially add a delay in playback, but will result in faster initial page load For sites with many videos on a single page, it may make sense to add a poster to the video window, and not download any of the video until it is expressly requested by the end user. All YouTube videos that are embedded on websites never download any video content until the play button is pressed, essentially behaving as if preload="none".

Preload Best Practice: Only use preload="auto" if there is a high probability that the video will be watched. In general, the use of preload="metadata" provides a good balance in data usage vs. startup time, but should be monitored for excessive data usage.

MP4 Video Playback Tips

Now that the video has started, how can we ensure that the video playback can be optimized to not stall and continue playing. Again, the trick is to make sure the video is as small as possible.

Let’s look at some tricks to optimize the size of video downloads. There are several dimensions of video that can be optimized to reduce the size of the video:

Audio

Video files are split into different “streams” — the most common being the video stream. The second most common stream is the audio track that syncs to the video. In some video playback applications, the audio stream is delivered separately; this allows for different languages to be delivered in s seamless manner.

If your video is played back in a silent manner (like a looping GIF, or a background video), removing the audio stream from the video is a quick and easy way to reduce the file size. In one example of a background video, the full file was 5.3 MB, but the audio track (which is never heard) was nearly 300 KB (5% of the file) By simple eliminating the audio, the file will be delivered quickly without wasting bytes.

42% of the MP4 files found on the HTTP Archive have no audio stream.

Best Practice: Remove the audio tracks from videos that are played silently.

Video Encoding

When encoding a video, there are options to reduce the video quality (number of pixels per frame, or the frames per second). Reducing a high-quality video to be suitable for the web is easy to do, and generally does not affect the quality delivered to your end users. This article is not long enough for an in depth discussion of all the various compression techniques available for video. In x264 and x265 encoders, there is a term called the Constant Rate Factor (CRF). Using a CRF of 23-28 will generally give a good compression/quality trade off, and is a great first start into the realm of video compression

Video Size

Video size can be affected by many dimensions: length, width, and height (you could probably include audio here as well).

Video Duration

The length of the video is generally not a feature that a web developer can adjust. If the video is going to playback for three minutes, it is going to playback for three minutes. In cases in which the video is exceptionally long, tools like preload="none" or streaming the video can allow for a smaller amount of data to be downloaded initially to reduce page load time.

Video Dimensions

18% of all video found in the HTTP Archive is identical on mobile and desktop. Those who have worked with responsive web design know how optimizing images for different viewports can drastically reduce load times since the size of the images is much smaller for smaller screens.

The same holds for video. A website with a 30 MB 2560×1226 background video will have a hard time downloading the video on mobile (probably on desktop, too!). Resizing the video drastically decreases the files size, and might even allow for three or four different background videos to be served:

Width Video (MB)
1226 30
1080 8.1
720 43
608 3.3
405 1.76

Now, unfortunately, browsers do not support media queries for video in HTML, meaning that this just does not work:

<video preload="auto" autoplay muted controls     source sizes="(max-width:1400px 100vw, 1400px"     srcset="small.mp4 200w,             medium.mp4 800w,             large.mp4 1400w"     src="large.mp4"  </video>

Therefore, we’ll need to create a small JS wrapper to deliver the videos we want to different screen sizes. But before we go there…

Downloading Video, But Hiding It From View

Another throwback to the early responsive web is to download full-size images, but to hide them on mobile devices. Your customers get all the delay for downloading the large images (and hit to mobile data plan, and extra battery drain, etc.), and none of the benefit of actually seeing the image. This occurs quite frequently with video on mobile. So, as we write our script, we can ensure that smaller screens never request the video that will not appear in the first place.

Retina Quality Videos

You may have different videos for different device screen densities. This can lead to added time to download the videos to your mobile customers. You may wish to prevent retina videos on smaller screen devices, or on devices with a limited network bandwidth, falling to back to standard quality videos for these devices. Tools like the Network Information API can provide you with the network throughput, and help you decide which video quality you’d like to serve to your customer.

Downloading Different Video Types Based On Device Size And Network Quality

We’ve just covered a few ways to optimize the delivery of movies to smaller screens, and also noted the inability of the video tag to choose between video types, so here is a quick JS snippet that will use the screen width to:

  • Not deliver video on screens below 500px;
  • Deliver small videos for screens 500-1400;
  • Deliver a larger sized video to all other devices.
<html><body> <div id="video"> </div> <div id="text"></div> <script>     //get screen width and pixel ratio     var width = screen.width;     var dpr = window.devicePixelRatio; //initialise 2 videos —  //“small” is 960 pixels wide (2.6 MB), large is 1920 pixels wide (10 MB)     var smallVideo="http://res.cloudinary.com/dougsillars/video/upload/w_960/v1534228645/30s4kbbb_oblsgc.mp4";     var bigVideo = "http://res.cloudinary.com/dougsillars/video/upload/w_1920/v1534228645/30s4kbbb_oblsgc.mp4";     //TODO add logic on adding retina videos         if (width<500){         console.log("this is a very small screen, no video will be requested");         }              else if (width< 1400){             console.log("let’s call this mobile sized");             var videoTag = "<video preload="auto" width="100%" autoplay muted controls src="" +smallVideo +""/>";             console.log(videoTag);             document.getElementById('video').innerHTML = videoTag;             document.getElementById('text').innerHTML = "This is a small video.";             }     else{             var videoTag = "<video preload="auto" width="100%" autoplay muted controls src="" +bigVideo +""/>";             document.getElementById('video').innerHTML = videoTag;             document.getElementById('text').innerHTML = "This is a big video.";                  }      </script> </html></body>

This script divides user’s screens into three options:

  1. Under 500 pixels, no video is shown.
  2. Between 500 and 1400, we have a smaller video.
  3. For larger than 1400 pixel wide screens, we have a larger video.

Our page has a responsive video with two different sizes: one for mobile, and another for desktop-sized screens. Mobile users get great video quality, but the file is only 2.6 MB, compared to the 10MB video for desktop.

Animated GIFs

Animated GIFs are big files. While both aGIFs and video files compress the data through width and height dimensions, only video files have compression (on the often larger) time axis. aGIFs are essentially “flipping through” static GIF images quickly. This lack of compression adds a significant amount of data. Thankfully, it is possible to replace aGIFs with a looping video, potentially saving MBs of data for each request.

<video loop autoplay muted src="pseudoGif.mp4">

In Safari, there is an even fancier approach: You can place a looping mp4 in the picture tag, like so:

<picture>   <source type="video/mp4" loop autoplay srcset="loopingmp4.mp4">   <source type="image/webp"  srcset="animated.webp">   <src="animated.gif"> </picture>

In this case, Safari will play the animated GIF, while Chrome (and other browsers that support WebP) will play the animated WebP, with a fallback to the animated GIF. You can read more about this approach in Colin Bendell’s great post.

Third-Party Videos

One of the easiest ways to add video to your website is to simply copy/paste the code from a video sharing service and put it on your site. However, just like adding any third party to your site, you need to be vigilant about what kind of content is added to your page, and how that will affect page load. Many of these “simply paste this into your HTML” widgets add 100s of KB of JavaScript. Others will download the entire movie (think preload="auto"), and some will do both.

Third-Party Video Best Practice: Trust but verify. Examine how much content is added, and how much it affects your page load time. Also, the behavior might change, so track with your analytics regularly.

Streaming Startup

When a video stream is requested, the server supplies a manifest file to the player, listing every available stream (with dimensions and bitrate information). In HLS streaming, the player generally chooses the first stream in the list to begin playback. Therefore, the stream positioned first in the manifest file should be optimized for video startup on both mobile and desktop (or perhaps alternative manifest files should be delivered to mobile vs. desktop).

In most cases, the startup is optimized by using a lower quality stream to begin playback. Once the player downloads a few segments, it has a better idea of available throughput and can select a higher quality stream for later segments. As a user, you have likely seen this — where the first few seconds of a video looks very pixelated, but a few seconds into playback the video sharpens.

In examining 1,065 manifest files delivered to mobile devices from the HTTP Archive, we find that 59% of videos have an initial bitrate under 1.2 MBPS — and are likely to start streaming without any much delay at 1.6 MBPS 3G data rates. 11% use a bitrate between 1.2 and 1.6 MBPS — which may slow the startup on 3G, and 30% have a bitrate above 1.6 MBPS — and are unable to playback at this bitrate on a 3G connection. Based on this data, it appears that ~41% of all videos will not be able to sustain the initial bitrate on mobile — adding to startup delay, and possibly increased number of stalls during playback.

Column chart showing initial bitrates in streaming videos. Many videos have too high an initial bitrate to stream on mobile.
Initial bitrate for video streams (Large preview)

Streaming Startup Best Practice: Ensure your initial bitrate in the manifest file is one that will work for most of your customers. If the player has to change streams during startup, playback will be delayed and you will lose video views.

So, what happens when the video’s bitrate is near (or above) the available throughput? After a few seconds of download without a completed video segment ready for playback, the player stops the download and chooses a lower quality bitrate video, and begins the process again. The action of downloading a video segment and then abandoning leads to additional startup delay, which will lead to video abandonment.

We can visualize this by building video manifests with different initial bitrates. We test 3 different scenarios: starting with the lowest (215 KBPS), middle (600 KBPS), and highest bitrate (2.6 MBPS).

When beginning with the lowest quality video, playback begins at 11s. After a few seconds, the player begins requesting a higher quality stream, and the picture sharpens.

When starting with the highest bitrate (testing on a 3G connection at 1.6 MBPS), the player quickly realizes that playback cannot occur, and switches to the lowest bitrate video (215 KBPS). The video starts playing at 17s. There is a 6-second delay, and the video quality is the same low quality delivered to in the first test.

Using the middle-quality video allows for a bit of a tradeoff, the video begins playing at 13s (2 seconds slower), but is high quality from the start -and there is no jump from pixelated to higher quality video.

Best Practice for Video Startup: For fastest playback, start with the lowest quality stream. For longer videos, you might consider using a ‘middle quality’ stream at start to deliver sharp video at startup (with a slightly longer delay).

Thumbnails of 3 pages with video loading.
WebPage Test Thumbnails (Large preview)

WebPageTest results: Initial video stream is low, middle and high (from top to bottom). The video starts the fastest with the lowest quality video. It is important to note that the high quality start video at 17s is the same quality as the low quality start at 11s.

Streaming: Continuing Playback

When the video player can determine the optimal video stream for playback and the stream is lower than the available network speed, the video will playback with no issues. There are tricks that can help ensure that the video will deliver in an optimal manner. If we examine the following manifest entry:

#EXT-X-STREAM-INF:BANDWIDTH=912912,PROGRAM-ID=1,CODECS="avc1.42c01e,mp4a.40.2",RESOLUTION=640x360,SUBTITLES="subs" video/600k.m3u8

The information line reports that this stream has a 913 KBPS bitrate, and 640×360 resolution. If we look at the URL that this line points to, we see that it references a 600k video. Examining the video files shows that the video is 600 KBPS, and the manifest is overstating the bitrate.

Overstating The Video Bitrate

  • PRO
    Overstating the bitrate will ensure that when the player chooses a stream, the video will download faster than expected, and the buffer will fill up faster than expected, reducing the possibility of a stall.
  • CON
    By overstating the bitrate, the video delivered will be a lower quality stream. If we look at the entire list of reported vs. actual bitrates:
Reported (KBS) Actual Resolution
913 600 640×360
142 64 320×180
297 180 512×288
506 320 512×288
689 450 412×288
1410 950 853×480
2090 1500 1280×720

For users on a 1.6 MBPS connection, the player will choose the 913 KBPS bitrate, serving the customer 600 KBPS video. However, if the bitrates had been reported accurately, the 950 KBPS bitrate would be used, and would likely have streamed with no issues. While the choices here prevent stalls, they also lower the quality of the delivered video to the consumer.

Best Practice: A small overstatement of video bitrate may be useful to reduce the number of stalls in playback. However, too large a value can lead to reduced quality playback.

Test the Neilsen video in the browser, and see if you can make it jump back and forth.

Conclusion

In this post, we’ve walked through a number of ways to optimize the videos that you present on your websites. By following the best practices illustrated in this post:

  1. preload="auto"
    Only use if there is a high probability that this video will be watched by your customers.
  2. preload="metadata"
    Default in Chrome, but can still lead to large video file downloads. Use with caution.
  3. Silent Videos (looping GIFs or background videos)
    Strip out the audio channel
  4. Video Dimensions
    Consider delivering differently sized video to mobile over desktop. The videos will be smaller, download faster, and your users are unlikely to see the difference (your server load will go down too!)
  5. Video Compression
    Don’t forget to compress the videos to ensure that they are delivered
  6. Don’t ‘hide’ videos
    If the video will not be displayed — don’t download it.
  7. Audit your third-party videos regularly
  8. Streaming
    Start with a lower quality stream to ensure fast startup. (For longer play videos, consider a medium bitrate for better quality at startup)
  9. Streaming
    It’s OK to be conservative on bitrate to prevent stalling, but go too far, and the streams will deliver a lower quality video.

You will find that the video on your page is streamlined for optimal delivery and that your customers will not only delight in the video you present but also enjoy a faster page load time overall.

Smashing Editorial (dm, ra, il)


Articles on Smashing Magazine — For Web Designers And Developers

video-playback-web-image-0
24 Oct

Video Playback On The Web: The Current State Of Video (Part 1)

by TBSCategories: News

Video Playback On The Web: The Current State Of Video (Part 1)

Video Playback On The Web: The Current State Of Video (Part 1)

Doug Sillars

Usage of video on the web is increasing as devices and networks become faster and more capable of handling video content. Research shows that sites with video increase engagement by 80%. E-Commerce sites with video have higher conversions than sites without video.

But adding video can come at a cost. Videos (being larger files) add to the page load time, and performance research shows that slower pages have the opposite effect of lower customer engagement and conversions. In this aticle, I’ll examine the important metrics to balance performance and video playback on the web, look at how video is being used today, and provide best practices on delivering video on the web.

One of the first steps to improve customer satisfaction is to speed up the load time of a page. Google has shown that mobile pages that take over three seconds to load lose 53% of their audience to abandonment. Other studies find that on improving site performance, usage and sales increase.

Adding video to a website will increase engagement, but it can also dramatically slow down the load time, so it is clear that a balance must be found between adding videos to your site and not impacting the load time too greatly.

Recommended reading: Front-End Performance Checklist 2018 [PDF, Apple Pages]

Video On The Web Today

To examine the state of video on the web today, I’ll use data from the HTTP Archive. The HTTP Archive uses WebPageTest to scan the performance of 1.2 million mobile and desktop websites every two weeks, and then stores the data in Google BigQuery.

Typically just the main page of each domain is checked (meaning www.cnn.com is run, but www.cnn.com/politics is not). This data can help us understand how the usage of video on the web affects the performance of websites. Mobile tests are run on an emulated Motorola G4 with a 3G internet connection (1.6 MBPS down, 768 KBPS up, 300 ms RTT), and desktop tests run Chrome on a cable connection (5 MBPS down, 1 MBPS up, 28ms RTT). I’ll be using the data set from 1 August 2018.

Sites That Download Video

As a first step to study sites with video, we should look at sites that download video files when the page loads. There are 35k mobile sites and 55k desktop sites with video file downloads in the HTTP Archive data set (that’s 3% of all mobile sites and 4.5% of all desktop sites). Comparing desktop to mobile, we find that 30k of these sites have video on both mobile and desktop (leaving ~5,800 sites on mobile with no video on the desktop).

Pi chart showing overlap of mobile and desktop video sites
Mobile and Desktop Sites with Video (Large preview)

The median mobile page with video weighs in at a hefty 7 MB (583% larger than 1.2 MB found for the median mobile site). This increase is not fully accounted for by video alone (2.5 MB). As sites with video tend to be more feature rich and visually engaging, they also use more images (the median site has over 1 MB more), CSS, and Javascript. The table below also shows that the median SpeedIndex (a measurement of how quickly content appears on the screen) for sites with video is 3.7s slower than a typical mobile site, taking a whopping 11.5 seconds to load.

SpeedIndex Bytes Total Bytes Video Bytes CSS Bytes Images Bytes JS
Video 11544 6,963,579 2,526,098 80,327 1,596,062 708,978
all sites 7780 1,201,802 0 40,648 449,585 336,973

This clearly shows that sites that are more interactive and have video content take (on average) longer to load that sites without video. But can we speed up video delivery? What else can we learn from the data at hand?

Video Hosting

When examining video delivery, are the files being served from a CDN or video provider, or are developers hosting the videos on their own servers? By examining the domain of the videos delivered on mobile, we find that 12,163 domains are used to deliver video, indicating that ~49% of sites are serving their own video files. If we stack rank the domains by frequency, we are able to determine the most common video hosting solutions:

Video Doman cnt %
fbcdn.net 116788 67%
akamaihd.net 11170 6%
googlevideo.com 10394 6%
cloudinary.com 3170 2%
amazonaws.com 1939 1%
cloudfront.net 1896 1%
pixfs.net 1853 1%
akamaized.net 1573 1%
tedcdn.com 1507 1%
contentabc.com 1507 1%
vimeocdn.ccom 1373 1%
dailymotion.com 1337 1%
teads.tv 1022 1%
youtube.com 1007 1%
adstatic.com 998 1%

Top CDNs and domains Facebook, Akamai, Google, Cloudinary, AWS, and Cloudfront lead the way, which is not surprising. However, it is interesting to see YouTube and Vimeo so far down in the list, as they are two of the most popular video sharing sites.

Let’s look into YouTube, Vimeo and Facebook video delivery:

YouTube Video Counts

By default, pages with a YouTube video embedded do not actually download any video files — just scripts and a placeholder image, so they do not show up in a querly looking for sites with video downloads. One of the Javascript downloads for the YouTube Video player is www-embed-player.js. Searching for this file, we find 69k instances on 66,647 mobile sites. These sites have a median SpeedIndex of 10,700, and data usage of 3.31MB — better than sites with video downloaded, but still slower than sites with no video at all. The increase in data is directly associated with more images and Javascript (as shown below).

Speedindex Bytes Total Bytes Video Bytes CSS Bytes Images Bytes JS
Video 11544 6,963,579 2,526,098 80,327 1,596,062 708,978
All sites 7780 1,201,802 0 40,648 449,585 336,973
YouTube script 10700 3,310,000 0 126,314 1,733,473 1,005,758

Vimeo Video Counts

There are 14,148 requests for Vimeo videos in HTTP Archive for Video playback. I see only 5,848 requests for the player.js file (in the format https://f.vimeocdn.com/p/3.2.0/js/player.js — implying that perhaps there are many videos on one page, or perhaps another location for the video player file. There are 17 different versions of the player present into HTTP Archive, with the most popular being 3.1.5 and 3.1.4:

URL cnt
https://f.vimeocdn.com/p/3.1.5/js/player.js 1832
https://f.vimeocdn.com/p/3.1.4/js/player.js 1057
https://f.vimeocdn.com/p/3.1.17/js/player.js 730
https://f.vimeocdn.com/p/3.1.8/js/player.js 507
https://f.vimeocdn.com/p/3.1.10/js/player.js 432
https://f.vimeocdn.com/p/3.1.15/js/player.js 352
https://f.vimeocdn.com/p/3.1.19/js/player.js 153
https://f.vimeocdn.com/p/3.1.2/js/player.js 117
https://f.vimeocdn.com/p/3.1.13/js/player.js 105

There does not appear to be any performance gain for any Vimeo Library — all of the pages have similar load times.

Note: Using www-embed-player.js for YouTube or https://f.vimeocdn.com/p/*/js/player.js for Vimeo are good fingerprints for browsers with a clean cache, but if the customer has previously browsed a site with an embedded video, this file might already be in the browser cache, and thus will not be re-requested. But, as Andy Davies recently noted, this is not a safe assumption to make.

Facebook Video Counts

It is surprising that in the HTTP Archive data, 67% of all video requests are from Facebook’s CDN. It turns out that on Chrome, 3rd party Facebook widgets download 30% of all videos posted inside the widget (This effect does not occur in Safari or in Firefox.). It turns out that a 3rd party widget added with just a few lines of code is responsible for 57% of all the video seen in the HTTP Archive.

Video File Types

The majority of videos on pages tested are Mp4s. If we look at all the videos downloaded (excluding those from Facebook), we get the following view:

File extension Video count %
.mp4 48,448 53%
.ts 18,026 20%
.webm 3,946 4%
14,926 16%
.m4s 2,017 2%
.mpg 1,431 2%
.mov 441 0%
.m4v 407 0%
.swf 251 0%

Of the files with no extension — 10k are googlevideo.com files.

What can we learn about these files? Let’s look each file type to learn more about the content being delivered.

I used FFPROBE to query the 34k unique MP4 files, and obtained data for 14,700 videos (many of the videos had changed or been removed in the 3 weeks from HTTP Archive capture to analysis).

MP4 Video Data

Of the 14.7k videos in the dataset, 8,564 have audio tracks (58%). Shorter videos that autoplay or videos that play in the background do not require audio, so stripping the audio track is a great way to reduce the file size (and speed the delivery) of your videos.

The next most important aspect to quickly downloading a video are the dimensions. The larger the dimensions (and in the case of video, there are three dimensions to consider: width × height × time), the larger the video file will be.

MP4 Video Duration

Most of the 14k videos studied are short: the median (50th percentile) duration is 21s. However, 10% of the videos surveyed are over 2 minutes in duration. Use cases here will, of course, be divided, but for short video loops, or background videos — shorter videos will use less data, and download faster.

Column Chart breaking down video length in 10 second segments
Distribution of Video Duration (Large preview)

MP4 Video Width And Height

The dimensions of the video on the screen decide how many pixels each frame will have to use. The chart below shows the various video widths that are being served to the mobile device. (As a note, the Moto G4 has a screen size of 1080×1920, and the pages are all viewed in portrait mode).

A column chart displaying the count of each video width observed in the data set
Video Counts by Width (Large preview)

As the data shows, the two most utilized video widths are significantly larger than the G4 screen (when held in portrait mode). A full 49% of all videos are served with a width greater than 1080 pixels wide. The Alcatel 1x, a new Android Go device, has a 480×960-pixel screen. 77% of the videos delivered in the sample set are larger than 480 pixels wide.

As dimensions of videos decrease, so does the files size (and thus time to deliver the video). This is the primary reason to resize videos.

Why are these videos so large? If we correlate the videos served on mobile and desktop, we find that 18% of videos served on mobile are the same videos served on the desktop. This is a ‘problem’ solved for images years ago with responsive images. By serving differently sized videos to different sized devices, we can ensure that beautiful videos are served, but at a size and dimension that makes sense for the device.

MP4 Video Bitrate

The bitrate of the video delivered to the device plays a large effect on how well the video will play back. The HTTP Archive tests are run on a 3G connection at 1.6 MBPS download speed. To playback (without stalling) the download has to be faster than playback. Let’s provide 80% of the available bitrate to video files (1.3 MBPS). 47% of the videos in the sample set have a bitrate over 1.3 MBPS, meaning that when these videos are played on a 3G connection, they are more likely to stall — leading to unhappy customers. 27% of videos have a bitrate higher than 2.5 MBPS, 10% are higher than 5 MBPS, and 35 of videos served to mobile devices have a bitrate > 10 MBPS. These larger videos are unlikely to play without stalling on many connections — fixed or mobile.

Column chart listing video bitrates in 500 KBPS buckets.
Observed Video Bitrates (Large preview)

What Leads To Higher Bitrates

Larger videos tend to carry a larger bitrate, as larger dimensioned videos require a lot more data to populate the additional pixels on the device. Cross referencing the bitrate of each video to the width confirms this: videos with width 1280 (orange) and 1920 (gray) have a much broader distribution of bitrates (more data points to the right in the chart). The column marked in yellow denotes the 136 videos with width 1920, and a bitrate between 10-11 MBPS.

3D Column chart showing how bitrate and video size are related
Bitrate Vs. Video Width (Large preview)

If we visualize only the videos over 1.6 MBPS, it becomes clear that the higher screen resolutions (1280 and 1920) are responsible for the higher bitrate videos.

3D chart showing that larger width videos generally have higher bitrate
High Bitrate and Video Width (Large preview)

MP4: HTTP vs. HTTPS

HTTP2 has redefined content delivery with multiplexed connections — where just one connection per server is required. For large files like video, does HTTP2 provide a meaningful improvement to content delivery? If we look at the stats from the HTTP Archive:

Pie Chart of HTTP1 vs. HTTP2 for video delivery
HTTP1 vs HTTTP2 (Large preview)

Omitting the 116k Facebook videos (all sent via HTTP2), we see that it is about a 50:50 split between HTTP 1.1 and HTTP2. However, HTTP1.1 can utilize HTTPS, and when we filter for HTTPS usage, we find that 81% of video streams are sent via HTTPS, with HTTP2 being used slightly more than HTTPS1.1 (41%:36%)

Pie Chart further showing HTTP1 nonsecure and secure breakdown
HTTP vs. HTTP2 and secure (Large preview)

As you can see, comparing the speed of HTTP and HTTP2 video delivery is a work in progress.

HLS Video Streaming

Video streaming using adaptive bitrate is an ideal way to deliver video to the end user. Multiple versions of each video are built with different dimensions and bitrates. The list of available streams is presented to the playback device, and the video player on the device can choose the most appropriate stream based on the size of the device screen and the available network conditions. There are 1,065 manifest files (and 14k video stream files) in the HTTP Archive data set that I examined.

Video Stream Playback

One key metric in video streaming is to have the video start as quickly as possible. While the manifest file has a list of available streams, the player has no idea the available bandwidth of the network at the beginning of playback. To begin streaming, and because the player has to pick a stream, it typically chooses the first one in the list. In order to facilitate a fast video startup, it is important to place the correct stream at the top of your manifest file.

Note: Utilizing the Chrome Network Info API to generate manifest files on the fly might be a good way to quickly optimize video content at startup.

One way to ensure that the video starts quickly is to start with the lowest quality video segment, as the download will be the fastest. The initial video quality may be pixelated, but as the player better understands the network quality, it can quickly adjust to a more appropriate (hopefully higher quality) video stream. With that in mind, let’s look at the initial stream bitrates in the HTTP Archive.

Column chart showing initial bitrates in streaming videos. Many videos have too high an initial bitrate to stream on mobile.
Initial Bitrate for video streams (Large preview)

The red line in the above chart denotes 1.5 MBPS (recall that mobile tests are run at 1.6 MBPS, and not only video content is being downloaded). We see 30.5% of all of the streams (everything to the left of the line) start with an initial bitrate higher than 1.5 MBPS (and are thus unlikely to playback on a 3G connection) 17% start above 2 MBPS.

So what happens when video download is slower than the actual playback of the video? Initially, the player will attempt to download the (too) large bitrate files, but based on the download speed, will realise the problem. The player will then switch to downloading a lower bitrate video, so that download is faster than playback. The problem is that the initial download attempt takes time, and adding a delay to video playback start leads to customer abandonment.

We can also look at the most common bitrates of .ts files (the files that have the video content), to see what bitrates end up being downloaded on mobile. This data includes the initial bitrates, and any subsequent file downloaded during the WebPageTest run:

Column chart of observed bitrates once streaming begins
Observed Mobile Bitrates (Large preview)

We can see two major groupings of video streaming bitrates (100-300 KBPS, and a broader peak from 300-1,000 MBPS). This is where we would expect streams to appear, given that the network speed is capped at 1.6 MBPS.

Comparing the data to the desktop, Mobile clearly is higher at the lower bitrates, and desktop streams have high peaks in the 500-600 and 800-900 KBPS ranges, that are not seen in mobile.

Column chart comparing observed bitrates on mobile and desktop
Observed mobile and Desktop streaming bitrates (Large preview)
Column chart comparing initial bitrates with the observed bitrates for mobile and desktop.
Observed bitrates, mobile, desktop compared to initial bitrate (Large preview)

When we compare the initial bitrates observed (blue) with the actual files downloaded, it is very clear that for mobile the bitrate generally decreases during stream playback, indicating that lowering the initial bitrate for video streams might improve the performance of video startup and prevent stalls in early playback of the video. Desktop video also appears to decrease, but it is also possible that some video move to higher playback speeds.

Conclusion

Video content on the web increases customer engagement and satisfaction. Pages that load quickly have the same effect. The addition of video to your website will slow down the page rendering time, necessitating a balance between overall page load and video content. To reduce the size of your video content, ensure that you have versions appropriately sized for mobile device dimensions, and use shorter videos when possible.

If playback of your videos is not essential, follow the path of YouTube and Vimeo — download all the required pieces to be ready for playback, but don’t actually download any video segments until the user presses play. Finally — if you are streaming video — start with the lowest quality setting to ensure a fast video playback.

In my next post on video, I will take these general findings, and dig deeper into how to resolve potential issues with examples. Stay tuned!

Smashing Editorial (dm, ra, il)


Articles on Smashing Magazine — For Web Designers And Developers

02-the-future-of-mobile-web-design
09 Mar

The Future Of Mobile Web Design: Video Game Design And Storytelling

by TBSCategories: News

As technologies change and design techniques evolve, it’s inevitable that we’d experience massive growth in terms of design quality. There are similar parallels we can see within video game design as well. For instance:

This was CERN, the very first website back in 1991. Just some basic HTML and ample white space:

CERN was the first website created just with plain text and hyperlinks.
The very first website to appear online back in 1991. (Large preview)

This example from Smashing Magazine is how we design websites and share information online in 2018:

Smashing Magazine demonstrates how much we can do with web design in 2018.
A much more complicated and yet beautiful web design… 27 years after the advent of websites. (Large preview)

Now, if you look at the history of video game design, you’ll note a similar track; one in which early games like Pong were incredibly simplistic and devoid of any real story:

But now there are games like Grand Theft Auto that put players in the actual driver’s seat, allowing them to control the pace, direction, and outcomes of their experience:

As technologies improve and design techniques evolve, improvements in digital design are inevitable. What is truly impressive, however, is how we are now able to use design to tell a story. In other words, we no longer need to use long scrolls to set up plots or describe what a company does. This is especially great when designing for the mobile experience, which already sets pretty strict limits on how much we can “tell” versus “show.”

In this article, I want to look at three ways in which video game designers get the storytelling aspect of design right, and how web designers can use these techniques to provide users with an immersive experience and drive them more quickly and effectively to conversion.

Three Video Game Storytelling Techniques We Need More Of In Web Design

Video games have come a long way since they were introduced in the late ‘70s in terms of graphics, user controls and, of course, story development. With video game design evolving around the same time as web design, there are similar features and trends that can be found between the two. The only thing is, I don’t know if many web designers think to look to video games for design tips.

Granted, the overwhelming use of shocking colors and cheesy dialogue won’t work that well when you’re developing a professional website. However, it’s the way in which video game designers tell a story with design elements — and effectively guide players to the end by using those elements — that we need to pay attention to.

As your visitors’ attention spans shorten and demand grows for more engaging experiences, web designers can greatly benefit from using these storytelling techniques on the web and, more importantly, for mobile.

1. Make Your Visitor the Hero

Ever since the early days of video games, the goal was to put the player in the front seat and to let them be the hero of the story.

Take PAC-MAN, for instance:

The player was always the hero (i.e., PAC-MAN), and his or her mission was to work through the situation (i.e., to fight the ghosts) and get to the end.

The same holds true for modern gaming as well, though many games go the route of giving players the impression they have control over their heroic journey. A good example of this are the Telltale games.

Basically, each of their games is crafted around a well-known story. In the example above, the game is based on the events that unfold in the T.V. show Game of Thrones. Throughout the game, players are called upon to step into the world and make active choices about what happens next. Sometimes this is through dialogue (at 6:00), and sometimes it happens through action (at 11:55).

In the end, every player of the game ends up at the same place regardless of which way they turn or what line they utter. This doesn’t make the experience any less enthralling for the player as they are actively engaged throughout, and there is a reward in the end — even if it’s one they share with every other person who has played this game.

That’s exactly what websites should do for their visitors, right? They allow visitors to take full control over the experience so that they want to get to the end. For the web, this translates to conversion. And the best way to do this, as evidenced by video games, is to give visitors the ability to pick and choose how they traverse through the story.

Here are some ways in which you can do this with web design:

Create User Personas

Develop user personas before you do anything else when strategizing and planning for a website. Your personas should have a key “problem” they face. It’s then your job to establish the user’s journey in a way that helps them discover solutions to that problem.

Enable Avatar Setup

For those of you with websites that allow for users to create profiles, this is a great opportunity to enable them to define their own unique identity. Allow them to upload a photo of themselves and to personalize their profile. You can also give them different access settings which directs what kinds of content they see, what types of offers they receive, and so on.

WordPress membership websites like WPMU DEV are a good example of websites that do this. Users can create their own profiles and earn points and special statuses based on how much work they put into the community.

WPMU DEV enables users to create their own profiles.
A fun community where web design and development professionals can set up individual profiles. (Large preview)
Use Relatable Content

In video game design, there is something known as “ludonarrative dissonance.” Basically, it “is the unpleasant situation where we’re asking players to do something they don’t want to do… or prevent them from doing what they want.”

You’ve likely encountered this sort of resistance as you’ve designed websites in the past.

You review the analytics and discover high bounce rates on certain pages or even right from within the home page. You discover that there’s a visual element or a line of copy that just doesn’t sit right with your audience. That’s because it’s a disruption in what should be an otherwise immersive experience. By using content that resonates with the visitor, that makes them feel like you’re telling their story, they won’t feel disconnected and want to stray from the goal.

Spin a Fantasy

Here’s an interesting fact: people are 22 times more likely to remember data when it’s presented in a narrative form.

Let’s face it; if you’re building a website on behalf of a business or other professional entity, you don’t have some dramatic tale to spin like a video game does. And that’s fine.

Consumers aren’t visiting websites in order to get caught up in hours of epic storytelling. That said, they do still expect to be engaged by what you’re sharing with them.

So, why not depict a fantastic scenario through visual storytelling? The brain digests visual content 60% more quickly than written content, so your web designs and other visuals (like video, animation, and so on) are the keys to doing this.

The Airbnb blog always does a great job of this type of visual storytelling.

Airbnb’s blog uses images that tell a story within themselves.
The Airbnb blog is a master of visual storytelling. (Large preview)

While every story is probably told through 800 to 1,000 words, it’s also accompanied by highly attractive visuals that tell you something about what you’d experience at this specific destination.

2. Minimize Distractions by Using Symbols

Let’s talk specifically about websites viewed from mobile devices for a second, shall we? As of August 2017, 52.64% of all visits to websites were done via a smartphone. And, starting in 2017, the most popular size for a smartphone was between five and six inches and will only continue to grow in popularity as the years go on.

That’s not a lot of space to fill with content for the majority of site visitors, is it? So, how do you effectively tell a story if you have limited real estate? If we’re to take a page out of the video game design handbook, then we should turn to symbols.

Kontra makes a good point about this:

“[O]ne, often overlooked, strong point of game UX is the preference towards symbolism. The ability to transform meaning into symbols was a huge step towards visual decluttering.”

Functional minimalism is already something you’re doing in your own web design efforts, but have you thought about how it can tie into the storytelling aspect as well? When it comes to video games, symbols help clear the way so that players can focus on the story before them. You’ll see this most often in two-dimensional, side-scroller games:

Street Fighter and other fighting games place the health bar at the top:

Sonic the Hedgehog places the life counter at the bottom:

There are even ones like Virtua Racing and other geographic-dependent games that put their navigation off to the side for players to reference:

As you can see, the use of symbols keeps the gamespace clear and easy to follow along with.

Whether you’re designing mostly for desktop or mobile users, your aim is to design a space that encourages users to follow along and not get caught up in distractions. So, while you might think that full-screen, overlay navigation is a creative choice for your website or the ever-present live chat pop-up will get more engagements, you may be doing yourself a great disservice.

By employing the use of easily recognized symbols throughout your site, you can keep the design clean and clear and distraction-free. The story you’re weaving throughout is the most important thing, and you don’t want to stand in the way of visitors being able to get to it.

MSR is a beautiful example of this done well:

MSR minimizes distractions from the main content area by using symbols.
A good example of how to minimize navigation and directional cues so visitors can focus on the main content and story. (Large preview)

The website is for their architecture design firm. Rather than write volumes of text about what they’ve done and how they do it, they allow the images to speak for themselves. They’ve then employed a number of symbols to help visitors continue on to other points of interest in their journey.

Here are some ways in which you might use symbols to declutter your site:

  • Hamburger icon (for the navigation)
  • Profile photo icon (for account details)
  • Pencil icon (for an editing interface)
  • Gear icon (for settings)
  • Shopping cart icon (to checkout)
  • Magnifying glass (to expand the search bar)
  • Connector icon (to open social sharing and RSS feed options)
  • Question mark (to expand live chat, search, or help options)
  • And so on.

One thing to note here is that you don’t want to overdo it with icons. As you can see from the video game examples above, the entire interface isn’t strewn with icons. They’re simply there to hold the place of elements players are already familiar with and will refer to often. That’s the way you should handle icons for your own site. Think about how easy your icons will be to decipher as well as which ones are absolutely necessary. Decluttering doesn’t mean hiding every element under an icon; you simply want to tidy up a bit.

If you’re concerned with the potential for confusion over what your icons mean to users, then use labels, alt text, or tooltips to provide further elaboration to those who need it.

3. Be Smart About How You Use Space

One of the nice things about video games is how they use actual walls and roadblocks to prevent players from navigating into territory where they shouldn’t be. One of my favorite games that does this right now is called LittleBigPlanet. While it is similar to side-scrolling adventures like Super Mario, its design expands beyond the basic two dimensions usually experienced in these kinds of games.

As you can see, the player encounters a number of hard surfaces which then prompt him or her to move back and forth between layers, to climb up various elements, and to find a more ideal route towards the end of the game.

First-person shooter games like Halo also use physical elements to keep players confined to the main gamespace and on track to completing the mission and story.

As a web designer, you don’t have the luxury of crafting walls around the user’s journey on your site. That said, you don’t have to design a website and leave it all to chance. There are ways to steer visitors through a direct path to conversion.

Kill Screen did an interesting write-up about the art of spatial storytelling in video games. In it, writer Sharang Biswas explained the idea that “Spaces can be designed. They can be made to promote certain pathways, encourage specific behaviors, even elicit emotional reactions.”

There are a number of ways in which you can do this with design:

Use a Spotlight

In video games, you can use light and darkness to draw attention to important pathways. On websites, it’s not always easy to employ the use of lightness or darkness as too-dark of a design or too-light of text could lead to a bad user experience. What you want to do instead is create a “spotlight” of sorts. You can do this by infusing a key area of your design with a dramatic color or a boldly stylized font.

In a site that’s otherwise pretty light in color usage, Kappow does a nice job using it to highlight two key areas of the site where it’s clear visitors should visit: its case studies.

Kappow uses bright swatches of color to draw attention.
It’s more than obvious where Kappow wants visitors to focus their attention as they scroll through the home page. (Large preview)
Add Clues

If you’ve ever played a horror video game before, you know how critical the element of sound can be for it. Here’s an example of how Until Dawn uses sound (as well as visual footprints) to try to steer the player in the right direction:

In all honesty, I’m not a big fan of music on websites, even if they’re from auto-play videos that I visited the website for in the first place. I’m sure I’m not the only one who feels this way as there aren’t many websites that employ the use of background music or auto-play audio anymore.

That said, while you might not be able to direct visitors down the page with the sound of something playing down below, you can use other elements to lead them. For one, you can use interactive elements like animation to draw their attention to where it needs to go. Let’s take a game like Angry Birds, for example.

See how the little red birds are hopping up and down while they wait their turn? It’s a subtle gesture, but one that is sure to draw first-time players’ attention to the area of the screen in which they should directly interact if they want to move on to the next level. Animation on a website would work just as effectively if you’re trying to lure visitors’ eyes down to a key element like a contact form or a clickable button.

But it doesn’t just have to be animation. Other video game designers simply plant clues around the landscape to steer players through the journey. I’m not suggesting that your site start hiding Easter eggs all over the place. Instead, you may want to think about using subtle arrows or lines that define the space in which visitors should “play” and then move down through.

Employ a Mascot

For some brands, it might make sense to employ the use of an actual mascot to guide visitors through the story. If it’s an already established mascot and it won’t intrude too heavily on the experience, then why not bring it on the journey to ensure that visitors are checking in at all the right spots?

Or you can do like BarkBox and use a series of related mascots to guide visitors through different parts of the site (especially the signup and subscription process).

Black-and-white illustrated mascots on BarkBox website.
BarkBox uses a series of illustrated black-and-white mascots to guide visitors through the conversion processes. (Large preview)

Summary

As attention spans shorten and visitors just want to get to the good stuff on a website, designers have to get more creative in how they communicate their website’s “story.” Ideally, your web design will do more showing of that story instead of telling, which is how video game design tends to succeed in this matter.

Remember: Storytelling isn’t just relegated to big brands that can weave bright and shiny tales about how consumers’ lives were changed with their products. Nor is it just for video game designers that have hours of gameplay to develop for their audiences. A story simply needs to convey to the end-user how their problem can be fixed by your site’s solution. Through subtle design strategies inspired by video game storytelling techniques, you can effectively share and shape your own story.

Smashing Editorial (da, ra, yk, il)

Articles on Smashing Magazine — For Web Designers And Developers

advertisement-9
12 Jul

How We Built An iOS App To Shoot A 3D Video (Case Study)

by TBSCategories: News

   

It wasn’t long after Hollywood released its first 3D films that the movie format quickly gained huge popularity worldwide. Thanks to developments in video-recording technology, any user can now shoot a video on their own. You can make a stereo record of memorable events in your life or create wonderful material for your business.

How We Built An iOS App To Shoot A 3D Video (Case Study)

Our team was also attracted to 3D filming. We thoroughly studied the features of the human visual apparatus and the technical details of stereoscopic photography. Then, we decided to develop an iOS app to shoot 3D videos and upload the videos to YouTube. The idea behind the app was to facilitate the shooting of 3D video by mounting two iPhones to a special frame — and we did it! That was how the Stereo Video Recorder app appeared.

The post How We Built An iOS App To Shoot A 3D Video (Case Study) appeared first on Smashing Magazine.

Smashing Magazine

18 Dec

How to Streamline a Video Meeting and Improve Productivity

by TBSCategories: News

There are many people who have an aversion to the dreaded business meeting, and honestly, it’s hard to blame them, considering how most of these discussions go on a daily basis. Oftentimes, these get-togethers begin fine, but end up devolving into absolutely unstructured conversations that lead to nowhere fast.

Plus, they cost tons of money: nearly $ 37 billion per year, according to statistics cited by The Muse.

This can happen to any meeting, whether held in-person or online. But if you let things stay the way they are, you may never be able to accomplish anything by the end of the meeting. Do not let this scenario happen to you.

Learn how to create an effective agenda so that all of your professional conversations will be more productive. In this article, we will teach you a few tips and tricks on how to streamline your video meeting.

Write Your Agenda Early

You should write up your meeting agenda at least three days in advance in order to give yourself—and your attendees—enough time to prepare for the actual discussion.

Figure Out the Start Time

No conversation can happen without even knowing this essential information. Make sure to indicate what time you want the conference to begin. If you are meeting with other people from different time zones, you should make sure to indicate what time that would be in their area.

But make sure to pick a time that works for everybody, as nobody appreciates having to stay up at three o’clock in the morning for a business discussion.

Specify Who Should Attend

Do not just send out a general invite expecting anybody and everybody to come to your conference. Odds are high that some people may even ignore your invitation, thinking that they are not essential to the conversation.

In any case, determine who are the most important people who should join the conversation. Usually, these are the people in your organization who have the power to make and finalize decisions. Do not invite the whole department if a single representative is enough to get the job done.

Prepare the Meeting Link

If you are using trusty video meeting software, then you should have the ability to send out invites that already contain the link to the virtual chat room you will be using.

That spares you the inconvenience of having to send out each link to each individual attendee, which can let you save time for more important tasks. Make sure that the link is secured with a password and can only be accessed by the people you have specifically invited. You do not want any eyes or ears prying on your confidential meeting, now, do you?

Set the Meeting Objective

Get at the heart of why you are even gathering people in the first place. What is the main goal that you want to achieve after the meeting is over? Try to write it down on no more than one sentence. If you are really having trouble condensing your objective, then use two sentences at most.

Once you have figured out what you want to accomplish, you can then list down the topics that you want to discuss during the conference. Make sure to list them in order, from the most significant topics to the least important details. To make sure you do not go over time, try to limit your topic list to just five items.

Set a Time Limit Per Topic

As much as you may want to allow people to talk freely about all of the topics at hand, you might end up stuck in a two or three hour meeting if you do so. To prevent this from happening, make sure to allot a specific amount of time to discuss each topic.

At the same time, make sure that you are not just setting your meeting to last 30 minutes or an hour when it can actually be accomplished in just 15 minutes. Check your topic list, and let that guide you as to whether or not you need tons of time or just a few minutes of everybody’s time.

Make Sure to Send Helpful Additional Info

For instance, are you expecting certain people to bring specific data to the conference for everybody’s perusal? Even better, why not have that person send the data three days in advance as well? That should give everybody enough time to read things through.

If you expect somebody to take down minutes of the meeting, make sure to say so in your email. Otherwise, you might be surprised to find that nobody had been taking down any notes at all after the discussion is done.

You can even go one step further and treat it like a script, with each topic assigned to specific people, according to Effective Meetings.

Once you start creating agendas using these tips, you will find that your conferences will start running so much more smoothly and effectively. You will never want to go back to the old ways of conducting meetings ever again.


Onextrapixel – Web Design and Development Online Magazine

advertisement-22
26 Apr

HTML5 Media Source Extensions: Bringing Production Video To The Web

by TBSCategories: News

  

In the last decade, plugins such as Flash and Silverlight have enabled a rich consumption of video in browsers, powering popular services such as YouTube and Netflix. However, this approach has shifted towards HTML5 over the last few years.

Almost two years ago, the W3C published the final recommendation of the HTML5 spec, which came with a new set of HTML elements and APIs, especially for video. Some of them aim for more semantics in web pages but don’t introduce new features. Others extend the possibilities of the web and enhance the possibilities for developers without the need for plugins such as Adobe Flash, Microsoft Silverlight or Java.

The post HTML5 Media Source Extensions: Bringing Production Video To The Web appeared first on Smashing Magazine.

Smashing Magazine

advertisement-8
10 Mar

Building A Real-Time Retrospective Board With Video Chat

by TBSCategories: News

  

If you’ve ever worked in an agile environment, chances are you’ve had your share of “retrospectives” — meetings where people write what made them “glad,” “mad” or “sad” onto different-colored notes, post them onto a board, arrange them in groups and — most importantly — talk about them.

How To Build A Real-Time Retrospective Board With Video Chat

These meetings are straightforward, as long as everyone is in the same room. But if you’re working with a locally distributed team, things can get a bit tricky. Let’s address this by creating a virtual version of our board to allow team members in different locations to hold their retrospective just as if they were in the same room.

The post Building A Real-Time Retrospective Board With Video Chat appeared first on Smashing Magazine.

Smashing Magazine

Newer postsOlder posts
×

Powered by WhatsApp Chat

WhatsApp Chat is free, download and try it now here!

× Chat with Us