vizrt HTML5 Graphics Dynamic Cloud Workflows User Guide
+ BONUS CHAPTER:
HOW VIZ FLOWICS SUPPORTS DYNAMIC CLOUD WORKFLOWS
Argentine broadcaster, Artear’s election coverage using Viz Flowics graphics with social media integration projected onto a virtual set using Viz Engine.
FOREWORD
A lot has changed in HTML5 graphics for broadcasting and content creation, with some very noteworthy advancements, such as Viz Flowics launching native MOS Support and an NRCS plugin and how hybrid productions are changing the game, since we first launched our guide last year. Hence this update.
You might hear people in the industry saying TV is dead. Our contention is that TV is not dead – but evolving in a different direction. Online streaming is just TV with a different distribution mechanism. How you distribute your media and target content to the respective audiences is what will make content creators stand out.
We already see a concerted effort to improve the compatibility and performance of HTML5 graphics across different devices and distribution platforms, resulting in a smoother user experience. As well as advancements to unlock possibilities for higher-performance visual effects such as interactive and animated graphics. This helps broadcasters integrate more dynamic HTML5 graphics over stunning virtual reality sets, towards that all-important goal – capturing eyeballs and enhancing viewer engagement. This lines up with a recent study by Vizrt that found that ‘real-time data and on-screen graphics are important for retaining Gen Z viewers, as is immersive storytelling with AR and XR.’1
HTML5 GRAPHICS FOR CONTENT CREATORS AND BROADCAST
HTML5 graphics is versatile and powerful technology for creating data-rich, interactive graphics. Once restricted to web design, HTML5 graphics has grown to feature enhanced capabilities, supporting improved responsiveness, functionality, and performance with less reliance on plugins.
Its ‘write-once-run-anywhere’ approach ensures seamless user experiences across a multitude of devices and platforms, marking a significant leap in broadcasting and content creation capabilities.
Content creation – the digital age challenge
Terrestrial, satellite, cable, IP and streaming – broadcasting has seen profound technological innovations and transitions over the years, but its core purpose remains the same – to educate, entertain and engage.
Live streaming has disrupted traditional content creation by offering real-time interaction, lower barriers to entry (less production cost/effort), diverse and niche content, as well as alternative revenue models. As a content creator today, you are likely more aware than ever of shifting user habits and expectations with content available in so many different forms and across so many different platforms. A loyal audience needs to be earned with targeted content that ticks their boxes for value and needs.
The winners are ultimately content creators who constantly produce high volumes of high-quality, engaging material and connect with their viewers in a meaningful way. All while simplifying technical workflows, keeping overheads down, and maintaining creativity and excellence in the ever-changing live production environment.
Enter cloud HTML5 graphics
Cloud HTML5 graphics offers a wide range of features and benefits, making it an increasingly popular live production graphics solution.
HTML5 has elevated HTML from being the language of the web domain for designing, coding and displaying webpages to being able to create interactive and dynamic visuals with increased production efficiency and cost savings for a variety of uses from video gaming (esports) to broadcast graphics.
It has added speed and increased functionality. Another improvement was to cut the cord on plugins and external applications, as connectivity and playout controls are handled directly in the browser.
This guide is aimed at giving you a better understanding of cloud HTML5 graphics and how you can use this technology to level up your production process, increase engagement and diversify your income streams.
EQUIPPED FOR SUCCESS:
Jumping Access Studio, specialists in equestrian events, uses Viz Flowics and the Equipe data connector in their live productions.
YOU CAN READ THE FULL STORY HERE
New opportunities in content creation
Advancements in web technology, cloud computing and improved connectivity
have led to a rise in OTT platforms, giving viewers even more viewing options.
Those interested in unique content, for instance niche sports that struggle to find a
place on regular cable network rosters, or a particular event, can now easily find live
competitions and videos on streaming channels.
The streaming storm
Advancements in web technology, cloud computing and improved connectivity have led to a rise in OTT platforms, giving viewers even more viewing options. Those interested in unique content, for instance niche sports that struggle to find a place on regular cable network rosters, or a particular event, can now easily find live competitions and videos on streaming channels.
The streaming storm
Video streaming is today the top method of content consumption globally. Media producers are shifting towards a streaming-first mindset, with personalized and localized content.
Live streaming channels are also experiencing significant growth, driven by the in- creasing demand for real-time content, and a surge in live streaming platforms such as Twitch, Facebook Live and YouTube Live. These channels are easy to set up and operate, often only requiring a single operator.
According to a 2022 report by Cisco2, global live streaming traffic is expected to reach 146.3 billion hours by 2027. This is up from 33.9 billion hours in 2017.
Popularity of Live Streaming
AUTHENTICITY:
The unscripted format and diverse range of topics covered, provides a more authentic viewing experience and appeals to audiences seeking genuine material.
ACCESSIBILITY:
Live streaming can be accessed from anywhere and on any device with an internet connection.
REAL-TIME ENGAGEMENT:
Viewers can interact with the content and the broadcaster in real time, which creates a more engaging and immersive experience.
Viewers are actively engaging via second screens
Viewers are multitasking when consuming content and using second screens for additional activities that can be related to what they are watching on the TV – such as participating in polls, engaging on social media, betting or even buying merchandise or checking out a recipe via a QR code shown on their TV.
Viewers are using the second screen to augment their overall TV viewing experience A Statista survey on second screen usage shows 70% of A
A Statista survey on second screen usage shows 70% of American viewers regularly checking a second screen while watching TV, with Sweden topping the list at 80%. Several other surveys, including one from Nielsen, note that viewers are using the second screen to augment their overall TV viewing experience.
Consequently, it’s making producers rethink content delivery – both linear and OTT – to attract and retain a wider slice of the viewing landscape.
VIEWERS ARE USING THE SECOND SCREEN TO AUGMENT THEIR OVERALL TV VIEWING EXPERIENCE.
ADVANTAGES OF CLOUD HTML5 GRAPHICS CORE BENEFITS OF HTML5 GRAPHICS
- GREATER FLEXIBILITY, SCALABITY, SPEED AND COST-EFFICIENCY
Cloud (remote) and hybrid workflows have made production work more flexible. You can have crews spread out, working from home, cutting down on costs for travel and equipment transport. Not to mention tapping into a wider talent pool from anywhere in the world. A web accessible platform, like Viz Flowics, makes it much easier for operators to share and collaborate with graphics producers from anywhere. Most important, speed – as changes and updates can be done in mere seconds when working on the web.
Caption: With Viz Flowics, users work directly on the web editor to create and customize their graphics. - LOCALIZATION, PERSONALIZATION & INTERACTIVITY
When you’re working in the cloud, it’s easier to create multiple versions of the same broadcast to personalize feeds. For example, a main broadcaster with a global base can spin up unique OTT channels and send multiple broadcast signals, re-versioned for local consumption in other countries complete with graphics in the local language.
This is particularly useful for broadcasting groups and sports federations that produce live programming, then deliver the signal to rights holders or regional channels within the same group. With HTML5 graphics, customization such as changing the language can be done quickly and expediently across the versions before sending them on to the respective channels.
Additionally, HTML5 graphics enable real-time interactivity, allowing viewers to engage with broadcast content in dynamic ways via polls, quizzes and other viewer participation and engagement mechanics.
“Viz Flowics o Wers Concacaf a unified cloud-native solution, empowering the implementation of its brand and graphics requirements within a single platform. With universal access for all producers through any browser, location becomes irrelevant— whether in Guatemala, Canada, or Honduras, they can all access the same branded graphics, streamlining time, costs.
Read the full case study here - POWERFUL FEATURES & LIVE DATA INTEGRATIONS
Advancements in browser and web technologies mean we can now build web applications with powerful and stunning features. HTML5 supports a wide range of multimedia elements, including audio, video, animations, and 3D graphics.
With HTML5, not only can we create data visualization apps with beautiful animations in a much quicker and easier way – but also fetch and process live data in the background and establish 1:1 permanent connections with other applications to minimize latency.
- MORE CONTENT, MORE OPTIONS FOR CONSUMERS
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.
Additionally, new research suggests that statistics augment the live game experience and motivate fan and sponsor participation.
Data and streaming make for a powerful combination and it’s the first movers who offer fans an enhanced experience who will come out on top. Reaching audiences on all these different broadcast platforms requires flexibility and cost-efficiency and has become easier with HTML5 graphics.
NICHE SPORTS, AGILE TOOLS, FULL QUALITY:
The US National Lacrosse League uses Viz Flowics and Viz Data Connectors in its live broadcasts.
Everything from creation to play out is done on one single interface as shown by the operator in front, who is triggering the overlays using the Viz Flowics interface.
READ THE FULL CASE STUDY - SECURE, ALWAYS UPDATED
SaaS and HTTPS technology eliminate the need to download and upload the latest updates. HTTPS also uses encryption to protect information as it is being sent between clients and servers. Any information you transmit, like passwords, will be difficult for hackers to intercept.
engage.flowics.com/
THE LOCK ON THE URL SIGNIFIES A SECURE CONNECTION
SAAS MULTI-TENANT APP: Users no longer have to worry about having the latest versions, or working with different versions within the same team. SaaS means that users will always have the latest version of the software running. It is the same instance for all clients (tenants) and you don’t have to be concerned with managing upgrades or deployment to your own cloud. It’s always there on the web. Login and get creating.
SECURITY: Beyond HTTPS, secure cloud graphics providers such as Viz Flowics also offer Single Sign-on (SSO), multi-factor authentication (MFA), data encryption at rest and in transit, and regular 3rd party PenTesting as a security audit to protect platforms from hackers. Remember to ask your HTML5 Graphics vendor what security measures they provide to protect your content.
A cloud platform is always accessible, from any browser, without the need for dedicated hardware. Always up-to-date, with any improvements done automatically.
Viz Flowics
BEYOND HTML5 GRAPHICS
How Viz Flowics supports dynamic cloud workflows
Developed to streamline graphics production workflows, Viz Flowics is an intuitive multi-tenant SaaS (software as a service) that helps content creators easily create and operate HTML5 graphics from any browser.
What sets Viz Flowics apart from other HTML5 graphics providers is not only the ease with which anyone, even with limited design knowledge, can create and play out graphics but also how data integrations (including social media) have been simplified to be as frictionless as possible.
A highly versatile platform with customization options for content creators in any industry – from traditional broadcasters to individual live streamers. Secure sign-on. No VPN, private networks, or complex environments.
With Flowics, HTML5 graphics can be created, previewed, and played out by a single operator or via a fully automated workflow.
INTUITIVE WEB INTERFACE
One easy to use platform, accessible anywhere.
Busy operators want a platform that is easy to use, compact and has all the functionalities in one interface. Viz Flowics puts assets, live data, editing and control features on one interface with all the tools necessary at your fingertips. A true SaaS which means deployment is instant, secure and always with the latest updates.
No coding nor graphics creation experience is necessary, making it easy to generate, manage and update HTML5 graphics for a wide range of content creation. Advances in web technology also ensure speedier workflows; updates can be done and played out immediately during any live production.
Any web content can be a live source for playout with a HTML5 graphics platform such as Viz Flowics.
This is a massive uplift for fast-paced live productions.
CREATE CLOUD GRAPHICS
Creation is done on the web editor. Drag and drop pre-determined elements (building blocks, widgets) onto the canvas. Or select from more than 100 bespoke graphics templates. Add different data providers via Data Connectors and incorporate, social media and audience engagement tools
CUSTOMIZATION SIMPLIFIED
Viz Flowics includes an extensive palette of design and animation tools to simplify the process of creating unique graphics for anyone, including operators with little to no design experience.
CONTROL PLAYOUT
A single, elegant interface to easily create playlists and play out from any internet connected device. Viz Flowics graphics can be plugged directly into switchers such as the TriCaster or any traditional any traditional rendering engine engine workflow for playout.
READYMADE GRAPHICS TEMPLATES
Over 100 free, readymade, customizable templates designed to give you the professional edge for any production, from college sports to webinars and even elections coverage. Catalog contains all the standard graphics for any live production.
Search using keywords and filters.
These broadcast-ready templates showcase the vast creative possibilities within Viz Flowics.
The templates collection can be used as-is or quickly customized to reflect own branding and converted into other languages. Browse and filter templates, preview and select based on use case, data source or industry
Viz Data Connectors
UNIQUE TO VIZ FLOWICS
Data Integration
Cut time and expense of developing a custom solution or entering data manually.
Incorporate Viz Data Connectors (unique to Viz Flowics) which has a robust Data Connector library with a comprehensive range of native integrations to real-time external data providers.
The no code approach simplifies and speeds up the process of creating datadriven graphics by seamlessly plugging in real-time data from dozens of providers*.
There is no need for any specialized custom development, API understanding or coding knowledge.
* Users must already have a license with the individual data providers to access the data.
EASY CONNECTIVITY TO A WIDE RANGE OF DATA PROVIDERS
The full list of Data Connectors offered by Viz Flowics can be found on the website.
Generic Data Connectors
All Viz Flowics accounts include generic data connectors to integrate external data from RSS/JSON/Atom feeds or Google Sheets to keep your content updated without having to re-edit your graphic designs.
Graphics Data Bridge
The Viz Flowics solution is flexible enough that the Viz Data Connectors’ architecture can seamlessly and securely integrate on-site data sources via the Graphics Data Bridge. This is especially beneficial if you work with data sources that are only available in a local area network. Local data can be pushed in JSON and XML formats to Viz Flowics to generate real-time graphics with live results, GPS information, and much more.
VIEWER ENGAGEMENT
Social Media Integration
Integrate audience-generated social media commentary into any live production. Easily curate and sync up Social media flows into your live HTML5 graphics.
Second Screen
Polls, quizzes, social media commentary, merchandising and betting – these are some examples of quick, and simple to implement, direct-to-consumer opportunities that can very quickly be built and implemented with HTML5 graphics to promote higher levels of engagement and audience retention.
Advancements in OTT technology are opening new opportunities for content creators to deliver a consistent, broadcast-like viewing experience that offers greater engagement on any device, anywhere
ALL PRODUCTION WORKFLOWS
NDI, SDI, cloud workflows or any other soffware-based production system with support for web or browser sources, Viz Flowics supports them all.
However, NDI® (Network Device Interface — a free, open standard for connecting video feeds over a network) has several benefits that make it a very attractive option for live production. A major advantage is its ability to reduce the amount of hardware required on set, and the flexibility of transmitting multiple video streams over a single network connection. (Recommended reading: Streaming Valley, the Professional Source for Online Video Solutions and Streaming Technology in Europe, outlines even more reasons in their blog post ‘Why use NDI’.)
And similarly, Viz Flowics graphics work on all the popular broadcast switchers such as any from the Vizrt TriCaster® family, as well as your existing broadcast engine workflows.
For more info about using Viz Flowics through NDI click here
VIZ FLOWICS CLOUD WORKFLOW USE
Viz Flowics can be easily incorporated by content creators into their operational workflows across various industries from media companies to sports producers, corporate, government and houses of worship.
TICKER
Some of the world’s top broadcasters, including a US network that pioneered the use of tickers, trust Viz
Flowics to publish tickers – the fastest way to transmit the latest headlines and breaking news.
HOW THE VIZ FLOWICS TICKER WORKS
Choose between feeding all data into one crawler, OR define different templates to render each item di afferently.
CHANNEL BRANDING
HTML5 graphics is a great option gaining in popularity for Channel Branding and
other Master Control graphics.
Viz Flowics can easily be integrated with most playout and automation systems in the market.
Want to know more about using Viz Flowics for Channel Branding and other Master Control operations? Get in touch!
ONLINE POLLS – TEXT & VIDEO
Beyond polls during the show, keep fans connected to your content between regular programming. Combine your sporting event coverage with audience interaction activities on your other content real-estate such as digital platforms.
Here’s an example of an audience voting mechanism which can be replicated on your website, app or social media channels.
Inviting fans to choose the play, best dunk or goal of the day through a video poll is an excellent way to drive traffic to your digital platforms, monetize video visualizations, and keep the conversation alive.
BROADCAST & DIGITAL TV
Amu TV spun up a dedicated channel for the Afghan diaspora in May 2023. The channel produces live shows for both streaming and satellite TV, with a truly remote, Multilanguage team working in English, Farsi and Pashto, spread out across different parts of the world. Their main reason for choosing Viz Flowers was because the software gave them a seamless way to share graphics across remote teams. was a seamless way to share content, especially graphics.
Viz Flowics is also the FIRST HTML5 Graphics system with a MOS Gateway and HTML plugin for all MOS-compliant newsroom computer systems. MOS (Media Object Server) protocol is the backbone protocol for communications between Newsroom Computer Systems (NRCS) and other systems such as graphics platforms.
This advancement simplifies the newsroom MOS workflow to eiciently create and manage graphics playlists for playout, seamlessly integrating cloud graphics into existing news broadcast workflows.
VISUAL RADIO
Radio stations are expanding their audience base by transmitting visual radio live on their websites.
Using Viz Flowics has helped some of our customers build a fully automated visual radio storytelling platform for news, current affairs and music. They can broadcast online visual radio with integrated graphics showing for instance news updates, weather and traffic information, as well as integrate social media posts and audience engagement tools. Here’s what one of our Visual Radio customers has to say: “Viz Flowics is really flexible when it comes to live shows! It’s great that the producers can create all their live graphics on one platform.”
“Flowics has revolutionized our playout graphics at Amu TV. Flowics has not only simplified our workflow but also fostered seamless collaboration and boosted our productivity. It’s the ultimate solution that combines convenience, eWiciency, and innovation, making it a catalyst for our success.”
Farin Sadiq, Head of Creative AMU TV
DIGITAL NEWSPAPER
In 2023, the Norwegian newspaper Fædrel and svennen came up with an innovative milestone, to ‘televise’ live the September local elections on their online portal, using Viz Flowics to create all their online graphics and ticker.
The newspaper could operate just like a linear broadcaster, with on-location cover-age from their correspondents throughout the night, but without the usual spend associated with large broadcasters and OB trucks.
Tools such as Viz Flowics and cloud production software such as Viz Now give con-tent creators the flexibility to spin up pop-up OTT channels in the cloud to give an even more curated view of time-limited events such as elections.
Cost-effective, no-latency, swift, controllable by a single remote operator.
It’s the future of customized content delivery.
SOCIAL NEWS CHANNELS
A recent Reuters report, ‘Journalism, Media, and Technology Trends and Predictions 2024’3 cited that content creators are looking at social media for publishing news stories. It is a one-way broadcast tool for admins to send text, photos, videos, stickers, and polls. Similarly, content creators are moving towards the less traditional social media channels such as TikTok and Twitch to post news stories and videos explainers with heavy graphics integration to explain more complex stories.
SPORTS COVERAGE
The new generation of Broadcast AV teams have been the pioneers in branching out with lightweight but robust HTML5 solutions for streamlining their graphics production workflows. Workflows in the modern age are increasingly hybrid or remote, making HTML the perfect medium to add interesting information and excitement (break up the monotony of continuous tactical play or what pundits refer to as ‘time-wasting tactics’).
With Viz Flowics you can incorporate real-time data into your live production with native code-free data connectors, JSON/Atom feeds, and even Google Sheets. Integrate audience participation mechanics and sports statistics for your in-studio shows, and captivate fans while boosting engagement across your digital properties.
To learn more about why service providers love Viz Flowics, read this article from BCC Live’s Dylan Camacho.
“Viz Flowics is a very intuitive, amazing and cost-effective tool, that was easy to learn and use in a very short time.
It helped us create all the graphics we needed from bugs, to location straps, name supers, tickers and data-driven graphics showing the results as they unfolded during vote counting.”
Frode Nordbø,
Head of Graphics Fædrel and svennen
“There are few players in the game when it comes to leveraging HTML-based graphics engines, but far and away the one that leads the pack is Viz Flowics.”
BCC Live
Producers of the IRONMAN Virtual Racing broadcast
CORPORATE AND GOVERNMENT
Webinars have become a game-changer in the world of digital marketing for businesses, as well as government agencies, and the enterprise video market is projected to have a 10% compound annual growth rate.
What’s special about webinars is they offer an unparalleled opportunity to connect directly with a wider audience than traditional methods. Organizations can showcase their expertise through high-quality video and audio presentations, using tools such as Viz Flowics for graphics, TriCaster (to switch and produce the event) and Viz CaptureCast (multiroom and live streaming platform). Webinars are a cost-effective way to generate leads, deliver niche content and stay competitive (and relevant) in the digital age.
CAPTION: An example of how Storebrand, a financial firm in Norway, is using Viz Flowics in webinars with straps, bugs and over-the-shoulder graphics to illustrate key points.
House of worship – fostering fellowship with graphics
Live streamed services really took off during the pandemic, when people could no longer visit houses of worship. They remain popular even with the end of social-dis- tancing rules, because it allows worshippers to access services and stay connected with the congregation from anywhere. Viz Flowics helps houses of worship expand and enrich the community experience, with the additional aid of graphics as subti- tles, shared scripture passages or even for fundraising.
See how Viz Flowics is used for Worship Broadcast in this product demo.
THE BEST TECH SUPPORT IN THE BUSINESS!
“The real invaluable feature of Viz Flowics is their tech support. This company should be the textbook example of how businesses should operate and help their customers. They have 24/7 support by real humans who have are passionate about their product. They are accessible straight from the platform itself and I know I can get help with technical issues, or even just creatively collaborate on how best to get something done. HTML rendering as a native source in our TriCaster equipment, has simplified and improved our workflow.”
Dylan Camacho,
Senior Event and Audio Specialist BBC Live
Appendix
- Vizrt Gen Z News Consumption Survey
- Cisco Visual Networking Index:
Forecast and Methodology, 2022-2032 - https://reutersinstitute.politics.ox.ac.uk/journal- ism-media-and-technology-trends-and-predic- tions-2024
GET YOUR FREE TRIA
15 GREAT REASONS TO CHOOSE VIZ FLOWICS
- Free Graphics Templates from lower thirds to sports broadcast graphics.
- Intuitive UI with drag and drop features that makes creating HTML5 graphics easy.
- Wide range of graphics customization and animation tools.
- Native integrations to data providers with Viz Data Connectors.
- Direct data integration via Google Sheets and Atom/JSON feeds.
- Easily incorporate social media content.
- Second screen audience engagement mechanics.
- Data-driven intelligent Tickers.
- Native MOS Support.
- Channel Branding in the cloud.
- Scalable.
- No code approach.
- Needs nothing more than a browser to get started.
- Supports all production workflows – from traditional broadcast to live streaming.
- Multilanguage support from the world leader in graphics and broadcast technology.
TRY VIZ FLOWICS
READY FOR YOUR HTML5 JOURNEY?
SIGN UP FOR A FREE DEMO
We not just set you up super quick with templates, but will also guide you to ger the mest from virFlowca
Learn more at vizrt.com
YOUR QUICK GUIDE 10 HTMLS GRAPHICS & VIZ FLOWICS 20
Documents / Resources
 |
vizrt HTML5 Graphics Dynamic Cloud Workflows [pdf] User Guide HTML5 Graphics Dynamic Cloud Workflows, Graphics Dynamic Cloud Workflows, Dynamic Cloud Workflows, Cloud Workflows, Workflows |
