Media consumption continues to skyrocket. Video streaming is more engaging than ever, with potential customers at your fingertips. 

Surely you want to provide the best video streaming to keep users engaged. To do this, you need to consider how and where your viewers will be consuming your content. In almost all scenarios, HTML5 is your best option when it comes to video streaming. 

But what is HTML5? To better understand how HTML5 can make your life easier, keep reading this handy guide to HTML5 video format! 

Over the years, HTML has had many iterations. The version most people "grew up" with is HTML 4.01. Throughout the 2000s, CSS and Javascript functionalities revolutionized the HTML world. 

Now, since 2011, we have had HTML5. This adds the ability to include audio and video in a webpage with a single tag. 

In the 90s, developers had access to the very first version of HTML (HyperText Mark-up Language) invented by Tim Berners-Lee. While not a coding paradigm, many techies could start their journeys into digital development with HTML.

HTML5 is holding firm in the modern-day world full of constant change. For a more detailed history, learn more here. 

The structure of HTML has always been one of the more simple options for web design. In fact, it is not even considered a coding language. Instead, it is a markup language. 

It defines data through tags, such as <video> or <audio>. A web browser can "read" what the HTML describes and display headers, video, and more accordingly. 

Along with the added audio and video capabilities, HTML5 has brought a whole package of new advantages. Just some of the benefits include:

Cleaner code with the new version of markup language

Improved accessibility through display improvement 

Geolocation - cater content specific to a user based on location

It's clear that HTML has gone through many iterations over the years. But where did it really come from?  

Since 1993 with the first rudimentary HTML, capabilities have consistently improved. Early web creation tools such as Dreamweaver, FrontPage, et al. made web design more accessible. Forward to today, where the design tools most are familiar with are WordPress, Squarespace, Shopify, and Wix.  Website creation need not be a source of consternation.

A PWA, or Progressive Web App, is a way to deliver content in an app-like format via the web. Essentially, it ensures a webpage can be viewed on any platform that uses a common browser, especially desktop and mobile. This is achieved through the now core functionalities of HTML, CSS, and  Javascript. 

HTML5 has far-reaching applications. Due to PWA, it's clearly useful for web apps. But it also has Smart TV app capabilities. 

In particular, it is now possible to use HTML5 in video streaming. Let's look at how that works! 

Streaming a video means that a video will begin to play - and keep playing - while the file downloads. There are three options when it comes to streaming video. One is HTML5, and the others are proprietary formats and intermediate players. 

It's essential to know the differences between these other options, so let's go over them quickly. 

The first of these other methods involves using a proprietary format. This method isn't used often in this day and age as browsers have improved their video-playing capabilities. HTML5 does not natively support .mov, .rm, or .wmv files so if you must play this file format, proprietary formats may still be useful.

The second option is an intermediate player. Intermediate players are like YouTube. It's a middle ground where you can upload videos. You can then view these videos through an embedded player specific to the original uploader.

So, to play a YouTube video, you would need a YouTube-specific embedded player. 

While players like YouTube are still trendy, they aren't necessary for playing videos. HTML5 could be a better option for you now that modern-day browsers already have embedded video players. 

The HTML5 video format player is versatile and native. It allows a scriptwriter to make many adjustments. From autoplay to automatic mute, you can be assured that your video will play as you intend it to. 

The ability to upload secure and high-quality videos even for those not well-versed in the tech world is revolutionary. There are also some distinct advantages over the other video streaming options. You don't need to worry about third-party branding, dedicated players, or sharing difficulties. 

Perhaps most importantly, you now won't have to worry about requiring Flash. Flash is no longer in development by Adobe, nor is it supported by most browsers as of late 2020, and it's best to avoid it if possible. HTML5 already loads faster and is easier to implement than the Flash plugin was. 

For more about building your digital video infrastructure, we offer a complete guide to building and scaling your digital strategy. 

Embedding an HTML5 video tag requires only a few lines of code to create a native video player. Simply using a <video> tag will create the video player. To change the video format, simply change the video/mp4 to video/ogg or video/webm.

To give an example of what your code might look like: 

You should be aware that the <video></video> tags will be displayed if the browser does not support HTML5 video. However, none of the additional lines of code should show. 

Along with embedded videos, you should consider other factors for how to make your webpage more engaging. Consider adding Embedded Code Sharing. 

Some of the most important adaptations you can make to your video plays are listed below. 

Setting the width and height is crucial; otherwise, when the page loads, it may flicker. This results in a less than optimal viewing experience.

HTML5 allows the script-writer to add functionality through the controls attribute. This includes the added capability for users to pause, play, and adjust the volume of the video. 

By changing the "controls" tag of the code to "autoplay," your video will play automatically. To make sure it is also automatically muted to avoid user annoyance, simply add "autoplay muted." However, you should be aware that most Chrome-style browsers do not support autoplay. 

Beyond these main features, the following are also settings you can alter to your liking: 

HTML5 Video Format for Desktop and Mobile Streaming 

The HTML5 video format capabilities include three options to play: MP4, WebM, and Ogg. You should note that the Safari browser does not support Ogg, WebM is supported by only 58% of browsers, and MP4 is disabled by default in Firefox 24. 

Due to the fact that the three options are not always natively supported by every browser, it is a good idea to have a backup. At a minimum, you should include in the source tag an MP4 with H.264 with AAC/MP3. This is currently the most widely supported desktop and mobile HTML5 video format.

By adding in a second video source in Ogg or WebM in your code you can avoid almost all issues. Both options are fairly equally supported in different desktop browsers. 

Similar to the situation on a desktop, not one single video format is universally supported. MP4 is the most supported, supporting Android, Safari, Firefox, and Internet Explorer browsers to recent versions.

Beyond browsers, MP4 is also supported on iOS and Android. 

It’s good to note that you don't generally have to worry about having a second different HTML5 video format for mobile. For most modern mobile devices, the same video file you use for the web. 

Beyond MP4, WebM and Ogg are both supported on Android 2.3+ and most modern Android devices. For older devices, you will have to consider 3GP/MPEG4.

What Else Should I Know About Video Streaming? 

Now you understand how HTML5 works and what the best HTML5 video format is. To add to this knowledge, you should consider learning how video streaming can help you in other areas. 

Zype's HTML5 web player provides a fast, high-quality video playback experience for viewers across desktop and mobile web. If you want to learn more about the Zype player, you can do so here.

The Complete Guide to HTML5 Video Format for Desktop and Mobile Web

The complete guide to HTML5 video format for desktop and mobile web.

Since launching Zype Playout, we've been excited to show an in-depth look at the easiest way for video product teams to create, monetize, and distribute broadcast-quality, linear live IP-delivered streams. Awarded NAB Product of the Year Award for B2B Streaming at NAB Show 2019, Zype Playout boasts channel creation, program management, support for multiple monetization setups, among other exciting features. And we think it's pretty awesome that Zype Playout contributed meaningfully to Zype's full-stack video content management and distribution service, helping Zype secure the title of OTT Exec Company of the Year 2019.

With Zype Playout, you'll be able to build, program, and broadcast linear channels created from playlists of videos that already exist in your Zype library

 What are the key features of Zype Playout? 

Distribute to your Owned and Operated websites and video apps, plus OTT marketplaces

Syndicate to partners like YouTube, Twitch, and any other RTMP or HLS standard-based destination

Monetize O&O by using subscription and purchase paywalls

Gain more audience metadata by adding a registration wall

Keep your channel fresh by adding or editing your Playout channel rundown through your source playlist

For those of you who have configured Zype Live to broadcast a live event in the Zype platform, Zype Playout will be a synch. Even if you don't have familiarity with live events, we doubt you'll have any issues understanding the steps outlined below. Remember that with Zype Playout, you'll be able to build, program, and broadcast linear channels created from playlists of videos that already exist in your Zype library.

Step 1 - Determine where your channel will be distributed - Playout destinations determine where you'll distribute your Playout stream, whether it's to existing owned and operated websites and videos apps, to YouTube and Facebook Live, or to custom destinations.

Step 2 - Review and edit your channel rundown - Because your Playout channel is created from a playlist in your Zype library, you can use an existing playlist for your channel rundown, or build a new source playlist to use when you create your channel.

Step 3 - Create your channel - Once a Zype Playout channel is created, it exists in your Zype library just as a video or live event would. You can add or edit metadata like a custom thumbnail image, and test the broadcast to view your channel rundown (Zype Live customers will be familiar with this) right from the Manage Channels page.

Zype handles all of the complex underlying video packaging, broadcast server management, and infrastructure; we work to normalize video bitrates, renditions, and aspect ratios from different videos in your library to provide a cohesive, high-quality stream experience to successfully broadcast your Playout channel.

Glad you asked! We always recommend our Help Center as a good source of knowledge when trying to dig deeper. We've created a Zype Playout section covering playout destinations, playout channels, monetization, and more.

Visit the Zype Playout product page to for a high-level overview of the product and it's capabilities. If you aren't working with Zype today but would like to learn more, request a demo with our team.

Up Close and Personal with Zype Playout

Netflix serves over 140 million hours of content per day, globally around the world.

Building a system to be able to scale to that many customers, while delivering high definition video, with no lag, requires significant engineering effort. Today we will deep dive into Netflix’s technology stack and cloud infrastructure to examine exactly what tools, processes and architecture they use to deliver their high-quality content streaming services.

Understanding Netflix’s tech stack can help OTT and other digital-video providers get a view into the backend required to support these types of services; or you can just use Zype, and let them handle online video delivery for you.

 The History of Netflix’s Digital Architecture 

First, a lesson in the history of Netflix to set some context. Before the era of “Netflix and chill”, the company physically delivered mail-order DVD’s to your doorstep.

Netflix racked and stacked physical servers in on-premise data centers that they owned. These data centers housed databases and applications Netflix used to track customers, maintain inventory and customer billing.

By the time broadband became commonplace, and everyone owned a smartphone, Netflix needed a way to deliver videos to computers, internet connected tv’s and mobile phones as part of their strategy to evolve the company. This meant moving away from a traditional data center and harnessing the power of the public cloud. Beginning in 2008, Netflix started migrating their on-premise servers & applications into Amazon Web Services (AWS) after experiencing an on-premise data center outage that stopped the business for three days. Startled by the lack of resiliency, over the course of seven years they were able to move 100% of all assets into the cloud and remain one of the pioneers of cloud computing.

Netflix is prominent in the cloud community for sharing their knowledge during the migration to the cloud.

Taking a peek into their architecture, Netflix maintains hundreds of AWS accounts that isolate the various parts of their business from Subscriptions, to Content Delivery, to Personalized Recommendations.

Netflix is able to quickly develop features because all of their engineers are empowered to launch resources in their appropriate accounts, without having to get approvals from various parts of the company. By utilizing AWS Organizations and Account Units, Netflix is able to organize their applications by engineering teams, providing autonomy and speed for engineers.

Within these AWS accounts, engineers use a myriad of technologies to deliver high fidelity video streaming.

Let’s start with how Netflix is able to serve videos. First and foremost, all content is stored in object storage like Amazon S3 and cached by using AWS CloudFront. This enables Netflix to distribute video content all around the world with low latency speeds.

Videos need to be ultimately transcoded into various formats for optimal viewing based on the device you are watching content. Mobile video is transcoded differently from Desktop videos, because of the different screen sizes, resolution, and network availability.

Take for example streaming on a phone. You will go in and out of signal depending on where you live, and in order to continuously deliver video, it needs to dynamically adjust & buffer, so you have a consistent viewing experience. This transcoding is called H.264, and Netflix is able to do this by harnessing the power of AWS Elastic Transcoder, which takes videos and formats them appropriately.

Video streaming is only a small part of the picture.

Customers have a smorgasbord of choices when watching videos on Netflix. In order to keep customer engagement & retention high, Netflix employs a personalization algorithm to help uncover videos that a customer may be interested in based on their previous viewing history. This means that all interactions when watching a video must be recorded. Netflix is able to do this by utilizing data streaming technologies like Kafka, and storing data in NoSQL databases like DynamoDB. Their engineers then write applications that are deployed on AWS EC2 or AWS Lambda that accesses this data to compute personalized videos to show.

Not all data is stored in a database. Some data is better suited to be stored on disks. Netflix is known to employ the usage of Hadoop to aggregate various types of data and move them into data warehouses or other databases across the company. Netflix has data science teams that sift through this data to do business analytics, like determining how many customers are watching a certain movie, or how likely someone is going to unsubscribe from the service.

While it is impossible to analyze every part of Netflix’s business the above describe a few major components for delivering online video.

In order to enable these features, developers need to be able to quickly deploy their code, that is tested and can be rolled back if a bug is introduced. This is no easy feat, and Netflix has developed a very sophisticated Continuous Integration & Continuous Deployment (CI/CD) pipeline for providing a mechanism to deploy cloud applications. Netflix invented and open-sourced their tool, called Spinnaker which allows developers to make small changes, test them with automated tests, and then get them live to a small subset of users, which then automatically rolls out globally over time after the confidence level that a bug has not been introduced increases.

One of the major discussion points when moving to the cloud is security. Netflix has publicly documented their security practices. Content is locked by region so movies in Europe may not be available in the United States. This is done by employing DRM solutions in the cloud.

Internally, Netflix uses AWS IAM to lock permissions for employees, and applications with least permission privilege, so that even if a user becomes compromised the damage they can do is minimal, as they would not have access to the entire set of assets in the cloud.

Being in the cloud, also means using SaaS products internally to improve productivity of the workforce. Netflix uses JIRA for managing engineering tasks, and Confluence for documenting requirements. With a large workforce, managing passwords is difficult, so Netflix employs single-sign-on technologies like OneLogin to allow access to various SaaS products without having to remember hundreds of different passwords. SaaS tools are always changing, and knowing Netflix, they will be adapting to be more efficient.

 Building Netflix’s Tech Stack & Backend...The Easier Way 

That concludes our breakdown of Netflix’s technology stack and cloud architecture. Developing video on demand requires a large engineering staff, hundreds of millions of dollars in cloud computing (if you are going to operate at Netflix scale) and a decoupled architecture that allows applications to scale so that they are resilient in the face of performance issues and outages.

Zype can help offload many of the heavy lifting operations required to deliver OTT video, I encourage you to check us out.

Netflix's Tech Stack: Breaking Down Netflix’s Backend for OTT Providers in 2019

We’re excited to announce the launch of Zype Playout, the easiest way for video product teams to create, monetize, and distribute broadcast-quality, linear live IP-delivered streams.

Zype Playout offers easy-to-use workflows for transforming playlists of videos into IP-delivered linear live streams, including:

Slate and ad timing management, scheduling, and packaging

Distribution to your Owned and Operated websites and video apps, plus OTT marketplaces

Syndication to partners like SlingTV, YouTube, Twitch, and any other RTMP or MPEG-TS standards-based destination.

With Zype Playout, customers have all the tools they need to build, program, and broadcast linear channels using playlists of videos from their Zype library.

Zype provides an easy to use flow for creating and managing Playout Destinations -- the streaming destinations where linear channels are being broadcasted or syndicated out to. Customers can store Playout Destination profiles for popular streaming targets like YouTube, Twitch, Facebook, and Periscope by entering stream URLs and keys for each destination. Or customers can create and manage custom Playout Destinations for any stream target that can accept RTMP, MPEG-TS, or HLS input.

Once Destinations are created, customers can then begin building Playout Channels. Playout Channels are collections of videos programmed in a specific order, which are transformed into linear live IP-delivered broadcasts. Playout Channels inherit ad timings managed within the Zype platform, allowing for easy integrated ad management. After customers have programmed Playout Channels and scheduled a start and end time for broadcast, they can assign which Destinations each channel should be broadcasted to.

Zype handles all of the complex underlying video packaging, broadcast server management, and infrastructure needed to successfully broadcast a Playout Channel. All customers need to do is ensure their Playout Destinations are configured to receive streams!

Schedule a live demo to learn how Zype Playout can help your VidOps team organize, plan, program, and distribute broadcast-quality linear video channels to increase audience engagement, and grow your distribution footprint.

If you’re not attending NAB, or would like to simply learn more today about working with Zype, please request a demo with our team!

Easily Launch IP-Based Linear Channels with Zype Playout

At the center of the VidOps Framework are nine core tenets that ensure success. We’re diving into each to help you empower your video operations teams and implement strategies that will deliver awesome video experiences to viewers.  Today, Steve Lacoff , a strategic advisor at Zype, shares why the VidOps tenet, “Spend less time maintaining your content system with a central system of record,” is a crucial step in the VidOps journey. Steve is an expert in the and has previously served as VP of Product for Comcast Technology Solutions where he led product strategy & execution for comprehensive video platform.

Long gone are the days of creating a simple collection of video-on-demand (VOD) assets at a single price point, available exclusively over an owned-and-operated website.   Video services must now navigate an extremely complex, and ever-growing landscape of media types, web and mobile platforms, app stores and payment methods, monetization models and business rules.   In addition, customers have more control than ever. Consequently, product owners need to understand their customers intimately -- their preferences, behaviors -- not only to deliver a personalized end-user experience but also to drive true, one-to-one marketing across the customer experience.

Taking control of this complexity is one of the central aims of VidOps, which is an open framework that addresses the need to remove functional and technical silos within your organization.  It was introduced at Zype and distilled from partnering deeply with hundreds of customers, partners and collaborators to help video-centric businesses transform and improve their processes and enable technology stacks. In this blog post, we explore Vid Ops Tenet #6:

Establish a system-of-record for content, video subscriber and audience-data management.

Today’s modern over-the-top (OTT) video products and services must maintain an array of modules to store critical information, power end-to-end workflows, and drive business insights and analytics.  Intuitively, we all understand that it’s crucial for these stores of information to be unified and done so in a way that ensures consistent data integrity that scales with the growth of the service. Silos are a non-starter.

While this is not a revolutionary concept, in practice it can often feel like you are walking down uncharted territory.  Creating a linked, unified view of your underlying content, monetization plans, pricing, transactions, end-user engagement across all app platforms, syndication partners and technology stacks often requires expense and complex integration of multiple systems.  It’s hard to establish and even harder to monitor, maintain and scale.

While there is unmistakable value in utilizing platforms with a high degree of modularity and extensibility, there are certain components of your stack which provide inordinate value from being tightly coupled.  We’ve outlined these crucial components below and the role they play in a VidOps framework to provide a unified system-of-record for your video business:

A system to maintain and store all the mezzanine and bit-rate adapted versions of your content.  In addition to underlying video/media, it also stores all your associated metadata, poster art and thumbnails, all of which is linked to the underlying assets.   The CMS also allows you organize your content into playlists or other collections (e.g. subscription plans) which requires integration into your Subscription and Monetization Management platform.   The CMS also serves as the means to publish and present content thumbnails in the appropriate location for all your apps and other viewing experiences.

This system serves as the central database storing all of your customer accounts, contact information, and credentials.  It not only enables authentication into all your apps, but is also a core integration point for entitlements, subscription management, payment processing, marketing automation, and analytics.

The rules around determining which specific content an end-user is able to access based on various criterion including subscription/transactions, geography, device, etc are housed here.   These rules are exposed as APIs which your various web and app endpoints utilize to enable presentation and playback of content.

It is increasingly rare for video businesses to offer a single subscription at a single price.   All of your monetization offerings, price points and associated entitlements (a subscription after all is simply an entitlement for a collection of content) are maintained here as well as the business rules for various promotion plans including discounts, coupons, and trials.

Modern video business utilizes multiple payment processors.  These include not only those used for owned and operated experiences (e.g. Stripe, Adyen, etc.) but also integration with key app stores (e.g. Apple, Google, Amazon, and Roku).   These not only facilitate payments but ideally validate receipts and current account status with integration to End-User Management and Subscription & Monetization Management systems.

By ensuring these systems are tightly integrated, video businesses can maintain a single, coherent view of their customers, content, and monetization and understand how each of these levers interact.   Employing this tenet of the VidOps framework delivers a number of key business outcomes:

Maintain Control of Customer Relationships

For many product owners, scaling their service requires various app and syndication partners.   Enabling in-app purchases on Apple iPhone and iPad, or broadcasting a linear stream to SlingTV requires a unified system-of-record.  For example, while app stores like Apple iTunes or Google Play provide a gateway to millions of potential users with frictionless in-app purchasing, this can result in customer information - and the relationship between your product and the customer - being locked behind the app-store.

Customers are increasingly in control and demand truly tailored experiences.   Delivering personalization requires alignment of a customer’s account information, viewing habits and underlying economics.   For example, a customer’s Favorites, bookmarks, and login credentials should carry over seamlessly across any viewing platform.   This requires consolidating metrics from virtually all components of your VidOps stack with data that is clean, consistent and usable.

Your workflows will often entail utilizing other clouds/SaaS platforms outside of your core VidOps technology stack.   These can include CRM, Marketing Automation or Ticketing use-cases. Today’s platforms should provide built-in hooks that allow you to extend your systems-of-record across the platform ecosystem.   For example, sending a targeted in-app notification to customers who are identified as likely to churn but previously have binge-watched horror movies requires harnessing data which cuts across various parts of your VidOps stack.

Easily Extract Relevant Business Insights

Whether it’s performing customer segmentation, ROI analysis or designing marketing campaigns, all of these insights require to have a holistic view of your business across the customer experience.   In addition, these are built on data stores that can quickly reach massive proportions. Possessing deep data analytics expertise simply isn’t a viable option for many businesses. Consequently, it’s crucial for VidOps team to utilize systems that allow them to easily apply the 80/20 rule for business insights and provide built-in analytics capabilities that routinely surface the analytics that really matter and that eliminate the complexity of scaling or integrating underlying systems-of-record.

As you grow into a VidOps approach to your product, the adoption of a unified system of record is an essential strategy to achieve these powerful business outcomes. Learn more about VidOps here.

Using VidOps to Establish a Central System of Record for Subscriber and Audience Data

We’re excited to announce the launch of video registration paywalls, the easiest way to capture more marketing leads with video. With video registration paywalls, you can ask viewers to sign up for an account before getting access to your video content. This helps you capture their name and email address to maximize marketing outcomes, without requiring additional payment.

Getting Started with Registration Paywalls

Setting up video registration paywalls on your website is incredibly simple using Zype’s embeds. You can quickly enable registration paywalls for any videos in your Zype library, and then add the video embed code to a page on your website.

Convert Viewers Into Marketing Opportunities

Once users sign up for access to the video, their contact information will be stored in your Zype account. You can use Zype’s marketing integrations through Zapier to automatically add these users to email marketing campaigns in tools like MailChimp or Constant Contact.

Drive Lead Generation and Revenue Growth with Video Advertising

You can also mix registration paywalls with video advertising, generating revenue on free to watch videos via ads while also capturing viewer information. You’ll need your own ad server and your Zype account will need to be configured to support ad monetization in order to mix registration paywalls with advertising.

Ready to start setting up your video registration paywalls? Head over to our help center to learn more!

What's New at Zype: Grow Your Marketing Leads with Video Registration Paywalls

Zype Wins Third Stevie Award for Customer Service and Support

[zype-shortcode][getform][newsletter-signup][/zype-shortcode]

Zype Acquires MAZ Systems to Extend Leading Video API and Infrastructure Platform with No-Code TV and Mobile App Publishing Framework

Global Site CTA

Digital Video Infrastructure: The Complete Guide

Webinar - Build and Monetize Linear TV with Playout 2.0

Products

Services

Solutions

Featured Content

Resources

Featured Content

Developers

THE ZYPE BLOG

Categories

The Complete Guide to HTML5 Video Format for Desktop and Mobile Web

Up Close and Personal with Zype Playout

Netflix's Tech Stack: Breaking Down Netflix’s Backend for OTT Providers in 2019

Easily Launch IP-Based Linear Channels with Zype Playout

Using VidOps to Establish a Central System of Record for Subscriber and Audience Data

What's New at Zype: Grow Your Marketing Leads with Video Registration Paywalls

PRODUCTS

SIGN UP FOR NEWSLETTER

SERVICES

DEVELOPER HUB

COMPANY

RESOURCES