Overview

TwentyThree is a video marketing platform designed for companies and organizations to manage, deliver and track their video content across channels. The platform allows at-scale delivery of video content from redundant core origins through a global content delivery network (CDN).

This articles introduces the infrastructure in place to manage delivery; and it introduces how these methods allow for optimizing live and on-demand video delivery on corporate networks with high concurrency requirements.

This article relates to delivery of videos and streams to viewers, and does not apply to webinar or live broadcasters. For further information on optimizing your network for webinar hosts and speakers, please refer to this article.

TL;DR: TwentyThree delivers video using HTTP and HTTPS. This content can be cached locally in corporate networks. Doing so can scale both internal live streaming capacity and quality significantly, while saving 99% of public bandwidth consumption. This solution is designed to use your existing network optimization strategy instead of relying on new software solutions.

Type of video delivery

TwentyThree delivers all content, including all on-demand and live video using HTTPS. From a platform perspective this makes it possible to deliver all video assets from local CDN nodes close to the user – and it also ensures that high load is spread out and ultimately handled by CDN proxies rather than by core infrastructure.

In general terms, video content is delivered in two different ways: Full videos and HTTP Live streaming.

Full video files with Byte-Range requests

This delivery method is often termed progressive download, because the full video file is made available for the video player for download. Modern browsers will not download the full file however; instead, the URL is accessed as needed for the video player to index meta data – and to buffer the relevant parts of the video for playback by downloading only the necessary parts of the video. This means that seeking and skipping in the video is readily available to the user without any delay.

For older browsers and video players that do not support Byte-Range requests, we allow the client to select remuxed versions of the video on the fly, which means that the player is still able to skip freely in video without delay, and that the content is still delivered through HTTP and is subject to caching.

All content is served in MPEG-4 containers with video/mp4 a mime type. Qualities cover 400 kbps through 8,000 kbps (ranging from 3 MB to 60 MB per minutes in bandwidth requirement).

HTTP Live Streaming (HLS)

The HLS protocol allows the delivery of adaptive quality video content, and despite the name it supports both live video and on-demand video. Originally developed by Apple for iOS, it is now widely adopted: It is handled natively on mobile (including iOS and Android) and by TwentyThree plugins for other HTML5 and Flash players.

With HLS, video content is split into multiple small pieces covering a few seconds of videos – and the video player downloads each individual chunk individually and then stitches together the pieces during playback. Each quality has a manifest/playlist file listing available chunks. Adaptive streaming is achieved by serving a manifest referencing all available qualities, and by the player monitoring buffer state and then selecting the best possible quality level with the available bandwidth.

Specifically, this means that the player will try to play the best quality of the video available. In the case where an upcoming video chunk cannot be downloaded quickly enough to ensure smooth playback, lower quality chunks will be download instead.

All live video content on TwentyThree without exception is streamed using HLS; and on-demand content can optionally be handled using the protocol.

Manifests are delivered with the extension .m3u8 in the mime types application/x-mpegURL or application/vnd.apple.mpegurl, which chunks are accessed as .ts with a video/MP2T mime type.

HTTP, Headers and Caching Policies

As detailed above all content is handled by HTTPS. The content can be delivered from core application servers; from origin cache servers; or from CDN nodes depending on access level and access context – but in every case appropriate HTTP Cache-Control headers are delivered with the content.

The Cache-Control header attached to each manifest, chunk or video file serves two purposes. First, it describes whether and how the content can be cached:


Secondly, the header details the duration of time the content is allow to be cached for. For example, Cache-Control: public, max-age=3600 with ask for content to be cached and served to anyone asking for the same content with the next hour. (This is not intended to be a full introduction to HTTP content caching. There are many more subtleties and ways to optimize cache handling. Generally, those mechanisms lean on the concepts described here though.)

Together these properties are used to handle content distribution in the TwentyThree network: When a video is played back, the client requests it from the CDN, which retrieves it from an origin cache server; which in turn requests it from a core application server.

When a resource is first requested, the core application server will serve it with the correct caching policy attached. From here both the origin cache and every CDN node will honor the cache policy – and deliver cached versions whenever possible.

Local Bandwidth Optimization Through Caching

These policies and methods also allow for significant optimizations of bandwidth consumption on corporate networks shared by many viewers of the same content. In these cases, cache policies and headers can be used to consistently and effectively cache content behind the firewall – which means that content will only be downloaded once, even when 100s or 1,000s of viewers are watching the same content at the same time.

Even better, none of the infrastructure or configuration needed to achieve this is unique to TwentyThree: Any popular web site will deliver the same headers and be subject to behind-the-firewall caching. This means that network optimization with local HTTP proxies will serve to speed up other web services while significantly saving bandwidth consumption in bottlenecks.

Best Practices and Recommendations

Handling video streaming on a corporate network can be a drain on bandwidth and network resources. Especially in live contexts where everyone by definition are watching the same content at the same time.

For example, 200 people watching a 2 mbps live stream at the same time will consume 400-500 mbps. If this bandwidth isn't available the player will switch to worse quality and, at worst, stall entirely.

In the ideal scenario where the same people are sitting behind the same local HTTP proxy, only a single request is made to the origin – and all other requests are handled locally. Put succinctly, load on the internet connection drops by 98-99%.

Our best practice recommendations:


Getting started with native distribution
Learn more
Distributing videos natively to YouTube
Learn more
Importing videos from YouTube
Learn more
Podcasts
Learn more
Customize a theme
Learn more
Organizing your videos in categories
Learn more
Using static pages
Learn more
Enable video comments
Learn more
Letting your users subscribe to your content
Learn more
What is Analytics in TwentyThree?
Learn more
Requesting analytics data from a single video
Learn more
Performance details
Learn more
Tracking the play details of your videos
Learn more
Usage details
Learn more
Analytics for embed sources
Learn more
Real-time Analytics
Learn more
Analytics Metrics
Learn more
Requesting analytics data from a specified time period
Learn more
Getting started with Editor
Learn more
Multiply your videos
Learn more
Cutting videos
Learn more
Logging in to your video website
Learn more
Changing your password and profile information
Learn more
Retrieving your username and password
Learn more
Inviting new users and granting administration rights
Learn more
User levels available in TwentyThree
Learn more
Using SAML for single-sign-on
Learn more
Backing up your design and reusing it
Learn more
Batch editing of videos
Learn more
Build your site using Bootstrap
Learn more
Building customized video players
Learn more
The code editor
Learn more
Configure your video players
Learn more
How to build design themes in TwentyThree
Learn more
Custom designed templates
Learn more
The TwentyThree Design Toolkit
Learn more
Hosting of design files
Learn more
Introduction to Liquid
Learn more
Liquid Tags
Learn more
Liquid Filters
Learn more
Set up new players
Learn more
The standard grid and its markup
Learn more
Styling your site using CSS and Sass
Learn more
Theme Options
Learn more
Video fields
Learn more
Working with custom actions
Learn more
Working with layout blocks
Learn more
Search engine optimization for video
Learn more
Setting the name of your site
Learn more
Setting the language and timezone of your video website
Learn more
Specifying access restrictions for your workspace
Learn more
Use your own domain for your video site
Learn more
Using and controlling cookies with TwentyThree
Learn more
How to get started with webinars
Learn more
Webinar Settings
Learn more
Prepare your webinar draft and invite speakers
Learn more
Set up email notification and follow-up flow
Learn more
How to customize webinar pages
Learn more
Customizing the look of your webinar room
Learn more
Customizing the pre- and post webinar experience
Learn more
Setting the webinar status
Learn more
Hosts, speakers and audience
Learn more
Enter the webinar production room and rehearse
Learn more
Producing your webinar
Learn more
Sharing your screen and slideshows in a webinar
Learn more
Using TvCards in your Webinars
Learn more
Running polls in your webinar
Learn more
How to make your webinar available on demand
Learn more
Understanding webinar analytics and attendance data
Learn more
Evaluate the performance of a webinar
Learn more
Evaluate your webinar engagement
Learn more
Exporting webinar attendee statistics
Learn more
Test if your computer and network are powerful enough to run a webinar
Learn more
Optimising Your Network Settings for Webinars
Learn more
Improve video quality by controlling CPU usage
Learn more
Running webinars in Gear Mode
Learn more
UTM tracking for webinars
Learn more
Webinar registration through HubSpot
Learn more
Native Analytics
Learn more
Uploading a video
Learn more
Preparing uploads for quality playback
Learn more
Supported video formats
Learn more
Uploading videos without user access (Open Upload)
Learn more
TwentyThree Upload iPhone app
Learn more
Navigating the video overview
Learn more
Editing metadata and publishing a video
Learn more
Embedding and linking your videos
Learn more
How to select or upload a thumbnail image
Learn more
Working with actions
Learn more
Uploading subtitles to your video
Learn more
Dividing your video into sections
Learn more
Enable access restricted videos
Learn more
Promoting a video
Learn more
Download your video files
Learn more
Replacing a video
Learn more
Using oEmbed to share and embed videos
Learn more
Embedly embedding content from TwentyThree
Learn more
Playback issues with Internet Explorer and Compatibility Mode
Learn more
Introduction to Live in TwentyThree
Learn more
Go live from anywhere
Learn more
How to get started with your live event
Learn more
Describe and schedule the event
Learn more
How to plan a live event
Learn more
Record the live event
Learn more
Repeat the live event
Learn more
Create the perfect event page
Learn more
Promote your event with Banners
Learn more
Post everything about your event
Learn more
Building an audience
Learn more
Enable chat and questions in your live event
Learn more
Access restrictions for live events
Learn more
Layout blocks for live event pages
Learn more
Streaming methods
Learn more
Streaming settings
Learn more
Production settings
Learn more
Getting to know the Audience overview
Learn more
Convert viewers to leads with Collectors
Learn more
Convert viewers to leads with Connect
Learn more
Using Google Analytics with TwentyThree
Learn more
Using Adobe Analytics with TwentyThree
Learn more
Using HubSpot together with TwentyThree
Learn more
Using Marketo together with TwentyThree
Learn more
Remarketing to Visitors using TwentyThree
Learn more
Using Google Tag Manager with TwentyThree
Learn more
Connect your marketing systems to TwentyThree using Webhooks
Learn more
Using Segment together with TwentyThree
Learn more
Using Clearbit and Clearbit Reveal with TwentyThree
Learn more
Deprecating support for TLS 1.0 and 1.1
Learn more
Custom collector fields
Learn more
Uploading assets to TwentyThree
Learn more
Generating a HAR File for Troubleshooting
Learn more
Connecting TwentyThree with Pardot
Learn more
Navigating TwentyThree Personal
Learn more
Recording a video
Learn more
Editing recordings
Learn more
Creating a thumbnail
Learn more
Using Actions on the landing page
Learn more
Sharing your personal video
Learn more
Using your Video Library
Learn more
Collaborating with TwentyThree Personal
Learn more
Using Channels
Learn more
Branding your video page
Learn more
Administering your users & access levels
Learn more
Inviting new users
Learn more
Integrating with Zapier
Learn more
Enable screen recording permission for macOS Catalina (10.15) and later
Learn more
Reference and overview of data available in HubSpot
Learn more
Segment and score HubSpot contacts based on webinar activity
Learn more
Segment and score HubSpot contacts based on video activity
Learn more
Corporate Network Guide for TwentyThree
Learn more
What's new in Webinars 4.0?
Learn more
Creating your own Template Webinar
Learn more

Can't find what you're looking for?