hamburger-nav-icon
region-flag-icon
Search by Category
Audio
Cameras
Cases & Bags
Computers & Software
Conferencing
Content Management
Control
Displays
Furniture
Lighting & Studio
Mounts & Rigging
Networking & Cabling
Power
Presentation
Production & Lighting
Security & Safety
Signal Management
Search by Category
EnglishFrenchGermanItalianPortugueseSpanish
newtek
Request
More Information
Project List
What is HTML5 graphics and why is it creating such a huge buzz among broadcast content creators?
Posted on Monday, March 6, 2023
What is HTML5 graphics and why is it creating such a huge buzz among broadcast content creators?

March 6, 2023 - Broadcast live production is today leaner, more fluid, highly automated, and moving quickly into the cloud. This shift to the cloud was escalated by the pandemic which forced every single one of us to change the way we work. It also drastically changed audience viewing habits, which has had a seismic impact on how content is produced and distributed.

As workflows move to remote, hybrid, and cloud solutions, the need arises for new graphics technologies in broadcast productions. HTML5 Graphics is the answer: graphics that can be created and rendered with just a web browser and an internet connection, from anywhere.

Flowics* CEO Gabriel Baños has been building and refining HTML5 Graphics for more than a decade. He gives us the lowdown on HTML5 graphics and why it's the latest buzz in broadcasting ahead of the 2023 NAB Show.

What is HTML5 graphics in the context of broadcast live production?

HTML5 graphics is the new generation of live broadcast graphics, built for the cloud age. HTML, the standard web language once confined to coding, designing, and publishing webpages, now has vastly extended capabilities with better responsiveness, increased functionality, and performance, decreased dependency on plugins, and improved mobility (write-once-run-anywhere) across applications to replicate user experience across different devices, such as mobile phones and Smart TVs.

Several factors are driving the adoption of HTML5 graphics in broadcast.

First, we have the evolution of web browsers and web technologies: HTML5, CSS, and JavaScript. We are now able to build web applications with powerful features that we could not have imagined 10 years ago. And this is all being done using just a browser and an internet connection. Likewise, with HTML5 graphics, which in essence is a web application that is created on any browser.

Thanks to the new web standards and modern browsers, we can create data visualization apps with beautiful animations, that fetch and process live data in the background and establish 1:1 permanent connections with other applications to minimize latency.

Technological advancements are changing audience appetites and how they engage with content

Another crucial factor that is contributing to the adoption of HTML5 graphics and remote production workflows is the evolution of communications. 4G and 5G have made it possible to run any web app from any location with just a mobile internet connection.

These advancements in technology have made creating content easier and more cost-effective for content creators. The proliferation of live content being produced daily creates more options for consumers, but on the flipside also increases the competition for eyeballs.

Let's look at one vertical – sports. The pandemic changed fan behavior. When fans could no longer gather at stadiums and arenas, they turned to digital sources to catch up with their favorite sports, spurring the growth of OTT (over-the-top) platforms and channels. A survey by Nielsen Sports shows that 40.7% of global sports fans now opt to stream live sports.

This market is only set to grow, further fragmenting audiences. To overcome this fragmentation, content creators need to innovate to attract and retain viewers, with enhanced graphics, on-screen data, interactive elements, as well as new and improved cameras and workflows.

Reaching audiences on all these different broadcast platforms requires flexibility and cost-efficiency and it has become easier with HTML5 graphics.

HTML5 graphics offers content creators greater flexibility and speed

In every conversation I have had with content creators, large and small, it has come down to flexibility in production workflows, and speed for making changes and updates on the fly.

Cloud (remote) and hybrid workflows have made production work more flexible. You can have crews spread out, working from home, cutting down on travel and equipment transport costs. Not to mention tapping from a wider talent pool from anywhere in the world. Operators can easily share and collaborate with graphics producers or change graphics on the fly. No downloads, no coding, and no expensive hardware are needed.

In a nutshell, HTML 5 graphics enable:

  • The production of graphics from any browser
  • Agility, no coding or broadcast graphics knowledge is needed
  • Greater collaboration in the cloud with your crew
  • The ability to tap into a wider pool of operators
  • Cost-effective production
  • Carbon cost savings by cutting down on travel and CO2 footprint

With HTML5 graphics, everything happens seamlessly in the cloud and can be controlled by one person.

Another benefit of HTML 5 graphics is localization. When you're working in the cloud, it's easier to create multiple versions of the same broadcast or even personalized feeds. For example, a main broadcaster with a global base can send multiple broadcast signals, re-versioned for local consumption in other countries complete with graphics in the local language.

Flowics – Setting the bar for futureproofed live production workflows

What sets Flowics apart from other HTML5 providers is how we have simplified data integration (including social media) to be as seamless as possible.

With Flowics, HTML5 graphics can be created, previewed, and played out by a single operator.

Creation is done on the web editor. The operator just drags and drops pre-determined elements, which we call building blocks, into the canvas. You can also add different data providers (Google Sheets, Timers, Clocks, Social Media Collections, and 50+ native Data Connectors) as well as pre-built widgets.

Building blocks are the base – shapes, images, video, etc. As its name suggests, they are the starting point for creating HTML5 graphics.

Data connectors are unique to Flowics offering a simple and streamlined integration of external live data from a range of sources, such as weather, sports, betting, and financial data into your graphics without requiring the time and expense of developing a custom solution or entering data manually. No coding is required.

Data flows seamlessly from third-party sources into Flowics, which enables users with little graphics knowledge to create informative live graphics that audiences value. Currently, we offer 50+ native connectors, the widest range currently on the market, including sports statistics providers, weather, finance, timing, and scoring systems.

The third component, widgets are additional mechanics such as timers and audience engagement tools.

The web browser functions as a rendering engine, and the operator merely needs to get the URL for the overlay and plug it into your TriCaster system via Live Link to play out graphics over any live production – it is as simple as that.

The Flowics platform goes even further by providing premium API social media integrations. All on one SaaS platform. So, you can easily integrate live data with audience-generated social media commentary in any production.

Flowics really is the most comprehensive cloud-based platform powering remote and in-studio production of live graphics and interactive content for linear and digital broadcasters – and we continue to improve our offering and our capabilities every day.