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.

By 2022, online videos will make up more than 82% of all consumer internet traffic — 15 times higher than it was in 2017 ( Cisco)

More video content is uploaded in 30 days than the major U.S. television networks have created in 30 years ( Invisia)

According to Forbes, 90% of customers say video helps them make buying decisions and 64% of customers say that seeing a video makes them more likely to buy.

Whether you’re B2B or B2C, selling to enterprises or consumers, one thing is clear: digital video is here to stay.

How does your organization take advantage of this growing trend and own the monetization, distribution, and management of your expanding digital video strategy?

It all starts with taking back control of your video infrastructure. If you’re relying on Youtube or other simplistic, one- or two-dimensional video platforms, your opportunities are limited.

You need infrastructure that can expand as quickly as the business team can ink deals.

So, what are the core components of a modern digital video infrastructure?

Origin/Source - Location of digital video content

Video Content Management System (VCMS) - Manage metadata, organization, and distribution of your digital video

Content Delivery Network (CDN) - a CDN is a system of distributed servers (networks) that deliver video and other content as quickly as possible to end-users and consumers

Encoding Pipeline - A video encoding (sometimes called “transcoding”) pipeline comprises of systems, hardware or software that compresses and optimizes digital video for distribution.

Clients/Players - A client or player is a software application that allows your viewers to actually watch your video content.

Now let’s dive deeper into each of these.

A video origin or source is where a video file is stored by an organization. For small companies, this might only be Youtube. For larger organizations, they often have custom-built or SaaS solutions to store and manage all of their video content.

Highly scalable - Enough to handle a large volume of origin requests.  This is particularly true for live streaming events

Multi-regional -   Localizing an origin as close to the majority of the users that consume the content as possible.

Efficiently Optimized for Costs - All cloud providers charge fees for data leaving their networks.  As such, optimising efficiency in terms of cost, between origin and CDNs, is paramount to maintaining a healthy margin.

Located Near CDN - An origin and CDN should be close to each other.  In terms of geographic proximity to each other, this reduces latency and overall quality of service for content distribution. We’ll talk more about this in a moment.

A video encoding (sometimes called “transcoding”) pipeline comprises of systems, hardware or software that compresses and optimizes digital video for distribution.  It is an essential piece of video preparation and delivery that ensures proper formatting for end-user experiences. For example, it is a best practice to ensure that video is encoding into various bitrates so that users on varying qualities of connection can watch without interruption.

Encoding pipelines should have the ability to:

Encode content using widely supported industry standard codecs

Encode to different bitrates and formats to support streaming to viewers with varying quality of connection and bandwidth

Encode to multiple file formats for delivery to multiple end players and/or download use cases

Encrypt content for digital rights management

Detect  and preserve advertising signaling metadata so that ads can be stitched in later on advertising breaks

Before your videos can be streamed, you need to ensure metadata has been set and is available to end viewers to provide sufficient context when showcasing your content. Beyond this, you need to be able to organize your content, whether that’s on your site, an OTT channel, or an MRSS feed to your partners.

Video content management systems should feature the ability to edit:

According to Akamai, a  CDN is “a highly-distributed platform of servers optimized to deliver content including web applications and streaming media. This network of servers is dispersed across many physical and network locations, in order to respond directly to end user requests for web content and fast, secure media delivery. It acts as an intermediary between a content server, also known as the origin, and its end users or clients.

Without a CDN, content origin servers must respond to every single end user request. This results in significant traffic to the origin and subsequent load, thereby increasing the chances for origin failure if the traffic spikes are exceedingly high or if the load is persistent.”

CDNs are typically priced in a way that allows for high-scale so organizations do not have to incur prohibitive network and computing costs to deliver content to end-users at scale. The goal of a CDN is to provide end-users with the same quality viewing experience regardless of where they are in the world.

Global - Make sure your CDN partner(s) can deliver high-quality video playback to where your users are with as many edge nodes geographically near your consumer base as possible.

Able to Optimize for Different Types of Content - A CDN should have different options for types of content like VOD, progressive media, and live streams along with a high cache hit ratio

Scalable - As your audience and overall success grows, your CDN partner(s) should be able to expand service alongside your organization.

A client or player is a software application that allows your viewers to actually watch your video content.

Every web-based video client or player should support:

The latest video codecs for both audio and video

Support adaptive bitrate playback for different bandwidth scenarios

Casting to Chromecast and , Apple Airplay, etc

Multiple language closed captioning and subtitles

An Open Javascript API framework so clients can manipulate the player surface for their own implementations

Advertising support through industry standard VAST tags

Supported across multiple devices and/or browsers; HTML5 web player as a standard for desktop and mobile web, as well as native applications for playback on mobile and OTT/Connected TV apps and marketplaces

Video players are constantly evolving and changing, and a video player on a closed-system like Apple TV is a completely different animal than an open HTML5 browser optimized for desktop browsing.  Managing the variety of players in the wild can become daunting once a publisher moves beyond their website. Dynamic Player Technology (DPT) allows teams to scale their video without investing in various video players based on the end-point.

 Deciding How to Build the Core Components of Your Digital Video Infrastructure 

When it comes to expanding your digital video infrastructure to distribute your content anywhere and anytime, there is one critical question...how? Do you piece together your CDN, utilize AWS’ suite of media-specific products, and develop your own analytics? Do you utilize video SaaS providers like Zype to facilitate the entire management, distribution, and monetization of your digital video? Or, do you utilize a hybrid model where you might bring your own CDN but rely on SaaS providers for specific pieces?

However you decide to build your core digital video infrastructure, having the power to control your future without huge investments is critical to the ever-evolving digital video landscape.

Want to dive even deeper into these core components? Download Zype's Digital Video Infrastructure: The Complete Guide to learn more.

The 5 Core Components of Every Digital Video Infrastructure

In the past couple of months, Zype has added several new CRM and Connectors features that can help video teams improve viewer experience and extend audience reach.  

Offer Promotional Access to Viewers With Redemption Code Paywalls

Offering redemption codes to viewers can be an excellent way to provide one-time promotional or lifetime access to video content without requiring a credit card transaction or manual configuration. Zype has supported the use of redemption codes for quite some time, however the method of redemption was limited to a redemption code widget that had to be specifically embedded into a website. 

Now, with redemption code paywalls, videos can be embedded on a website with “redemption code required” enabled, which will allows for utilization of redemption codes without the need to embed a separate redemption code widget. Viewers can access the redeem flow and enter the code entirely from the video player - and are never redirected to an alternative widget or page - all as part of the typical authentication flow. To understand more about how to enable redemption code paywalls and what the viewer experience is, read more here.

Increase Distribution Reach with The Roku Channel Connector

Gain access to The Roku Channel audience by publishing content directly to The Roku Channel. Zype has made improvements to this connector to simplify distribution to The Roku Channel by following a frictionless workflow, available right in the Zype Admin. Once vetted and distributed by Roku, you’ll stream alongside popular shows, 24/7 live news, and hundreds of movies available on The Roku Channel today. Learn more about distributing to vMVPDs with Zype here.

Leverage Self-service “Restart from Beginning” Feature for Playout Channel Scheduling

Zype Playout allows you to easily program 24/7 linear live channels using playlists of videos already available in your library. Now you can schedule your own predictable programming updates when trying to broadcast playlists at specific start times. Using the "Restart from beginning" feature toggle, enable a restart of the broadcast from the beginning of the source playlist at any given time. You can learn more about Zype Playout here.

Zype Rolls Out New CRM and Connector Features to Simplify vMVPD Distribution and Improve Viewer Experience

Zype is excited to announce the next step in our partnership with Google Cloud: full availability via the Google Cloud Marketplace.

Google Cloud customers will now have access to Zype’s award-winning OTT Video Platform; including Video CMS, Video CRM, Encoding, Playout, Content Delivery, and Video Connectors.

At Zype, we’ve recognized that companies are increasingly searching for a flexible, scalable, and future-proof video platform in the cloud. As the need for more agile, integrated products tailored to enterprise and media & entertainment ecosystems grow, we want to make it as seamless and turnkey as possible for clients to leverage the power of Zype.

Google Cloud customers now have access to the following benefits through the Zype platform:

Build marketplace-ready OTT apps, distributing to mMVPD and FAST platforms across all major platforms including Roku and Apple TV

Program, schedule, and deliver VOD to Live Linear HLS or RTMP, using Zype Playout

Experiment with monetization models, with full support for SVOD, TVOD, and AVOD

Optimize and automate workflows from content ingestion all the way through publishing

Create customized metadata structures using zObjects

Easily manage native marketplace transactions with Zype Marketplace Connect

Generate MRSS feeds ready for third party syndication 

Leverage robust analytics dashboards for insight across revenue and engagement 

“At Google Cloud, we strive to make it as easy as possible for customers to deploy, purchase and manage leading solutions in the cloud,” said Amy Bray, Head of GTM Strategy, Google Cloud Marketplace, Google. “With availability on Marketplace, Zype brings its expertise in enterprise video content management, allowing customers to easily deploy solutions and to focus efforts on building a successful business."

Organizations that want to try out the Zype platform can take advantage of the On Demand Plan that enables users to quickly and easily deploy on-demand transcoding with no commitment. 

“We’re excited to build this partnership with Google Cloud and to provide Google Cloud customers with immediate access to our award-winning video infrastructure,” said Ed Laczynski, Zype CEO. “Our goal is to empower them to  focus on innovation and delivering high-performance, high-quality video products to their own viewers.” 

Zype, Now Available via Google Cloud Marketplace

Retain customers by allowing them to pause their subscriptions in Stripe

Zype has expanded its existing Stripe integration to accommodate subscription pauses. With this feature, video product managers can more effectively retain customers they might otherwise lose to subscription cancellations by allowing subscribers to put a temporary hold on their subscription.

Leveraging Zype’s APIs, teams can create simple workflows to allow customers to pause and resume their subscriptions by integrating the “pause subscription” functionality into your web and native apps. 

As shown in our flow diagram, when consumers initiate a pause on their subscription, Zype pauses access to all prepaid subscription content and Zype’s API interacts with Stripe to ensure that the subscription payment is paused as well.

Learn more about pausing subscriptions in Stripe here.

Zype customers can now update playlist keywords via API, enabling faster, more automated metadata management. Additionally, if a customer has  a large playlist library, there is  improved performance when using our Playlist API. Learn more about Zype’s APIs and access our Playlist API  here.

Zype now supports series-based episodic content in XUMO distribution. Video content publishers can publish videos to XUMO in episodic order without having to configure feeds manually. Facilitated feed generation saves time and allows for distribution of content to XUMO in a more organized fashion. Learn more here.

Zype adds new features to help customers save time and retain subscribers

Leveraging Zype’s APIs, teams can create simple workflows to allow customers to pause and resume their subscriptions by integrating the “pause subscription” functionality into your web and native apps.

Video-centric publishers, broadcasters, and enterprises typically have an outsized focus on content programming and distribution decisions: “ What content am I publishing, where am I publishing it, and how many viewers can I reach? ”

While these decisions are incredibly important to focus on, a challenge that may not always be top of mind is thinking about the Content Management Lifecycle, with a specific eye towards digital asset preservation.

How do you make sure the video content you own and manage digitally is secure, highly available, and will be formatted and distributed in the right protocols as new distribution opportunities emerge?

A snapshot of the contemporary Content Management Lifecycle:

In this diagram you can see what a sample content import, storage, transcoding, delivery, and publishing/distribution lifecycle might look like for video enterprises.

Increasingly important is ensuring your video content storage and management solution ensures support for both the present and the future.

Evaluating digital asset preservation needs:

Video enterprises should evaluate format portability, security, availability, and redundancy as important factors in their content management lifecycle. This way you can ensure your evergreen content will not only be distributed efficiently today, but available for future distribution opportunities as well!

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

The 5 Core Components of Every Digital Video Infrastructure

Zype Rolls Out New CRM and Connector Features to Simplify vMVPD Distribution and Improve Viewer Experience

Zype, Now Available via Google Cloud Marketplace

Zype adds new features to help customers save time and retain subscribers

Thinking About the Content Management Lifecycle

PRODUCTS

SIGN UP FOR NEWSLETTER

SERVICES

DEVELOPER HUB

COMPANY

RESOURCES