Back to Browse

HTML Graphics for Broadcast: Explained

9.8K views
Feb 23, 2022
26:04

WATCH OUR NEW VIDEO HERE: https://youtu.be/ukZjy7NS5bw Adam welcomes viewers to Whiteboard Wednesday where he will be discussing the topic of HTML graphics for broadcast. He explains that streamers have been leading the way in remote production and how HTML graphics can be leveraged in broadcast workflows. Adam also covers the technical debt that broadcasters owe to streamers and how HTML graphics can bring the audience into the conversation in a live environment. He also covers the advantages of HTML graphics including delivery, metadata, and responsiveness. He also covers the challenges of delivering content to different aspect ratios and personalisation and localisation. He also mentions the role of HTML in voice control and content delivery to mobile devices like phones, tablets, and watches. Overall, Adam stresses on the importance of HTML graphics for maximising reach and personalisation in the future of content delivery. #html #graphics #broadcast Chapters: 00:00 HTML graphics for broadcast — why this matters now 00:28 Streamers already use HTML overlays (and TV doesn’t) 01:58 The three real advantages: delivery, metadata, responsiveness 02:29 Why 16:9 broadcast breaks on modern devices 03:54 Object-based broadcasting explained simply 04:53 Demo — responsive HTML lower thirds in nxt 06:20 Metadata + breakpoints = adaptive graphics 07:45 Vertical, square, 16:9 — same data, different design 07:57 How browsers actually mix graphics like vision mixers 09:21 Key + fill from a browser (the core trick) 09:53 HTML, CSS, JavaScript — who does what in graphics 11:01 Live data graphics via APIs (stocks example) 12:02 HTML graphics running live in newsroom + on air 13:33 Same graphic drives NRCS, video wall and playout 14:04 How HTML graphics reach broadcast output 16:30 Web developers vs traditional graphics workflows 17:00 After Effects → HTML graphics (Bodymovin/Lottie) 17:33 Demo — AE lower third straight to air 21:16 Cloud graphics stack: Singular + Flowics + nxt 23:19 Real-time social + data graphics already live 23:45 The future: WebGL, WebGPU and 3D graphics 25:09 Q&A and sign-off

Download

0 formats

No download links available.

HTML Graphics for Broadcast: Explained | NatokHD