> Markdown version of [/videos/32-the-fundamentals-of-online-video?t=2652](https://www.wearedevelopers.com/videos/32-the-fundamentals-of-online-video?t=2652). Every page supports `.md` or `Accept: text/markdown`. Links point to the HTML versions so they work for humans too. Agent guide: [/agents.md](https://www.wearedevelopers.com/agents.md).

---

# The Fundamentals of Online Video

Stop relying on monolithic video platforms. Master the complete video pipeline—from OBS capture to custom HLS playback—and build scalable, API-driven streaming directly into your applications.

- **Speakers:** Phil Cluff
- **Event:** WeAreDevelopers LIVE
- **Published:** August 28, 2020
- **Duration:** 1:03:27
- **URL:** https://www.wearedevelopers.com/videos/32-the-fundamentals-of-online-video

## Summary

With the rapid rise of virtual events, e-learning, and remote services, integrating reliable live video streaming into custom applications has become an essential engineering skill. This presentation demystifies the online video pipeline by breaking it down into four foundational phases: capture, processing, delivery, and playback. Rather than relying on rigid social platforms or expensive, monolithic providers, developers can now leverage API-driven video infrastructure (like Mux) to build scalable, fully branded, and monetizable streaming experiences.

Under the hood, modern internet video relies on Adaptive Bitrate (ABR) streaming using protocols like HLS (HTTP Live Streaming) and MPEG-DASH. By dynamically slicing video into short transport stream (.ts) segments across multiple quality levels, players can seamlessly adjust to a user's fluctuating bandwidth to prevent buffering. The session provides a hands-on demonstration of the capture phase by configuring Open Broadcaster Software (OBS) to generate an RTMP stream, setting bitrate limits, and managing scene layouts for a professional broadcast.

Transitioning from processing to playback, the tutorial showcases building a custom web player using vanilla JavaScript, the HTML5 `<video>` element, and the `hls.js` library. Key takeaways include leaving a 50% upload bandwidth headroom during capture to prevent dropped frames, and prioritizing a browser's native HLS support (such as in Safari and iOS) before falling back to polyfill libraries. The discussion also highlights crucial industry trade-offs, such as balancing low-latency delivery against global stability, avoiding complex DRM in favor of tokenized URLs for practical security, and achieving GDPR compliance by avoiding PII collection in video analytics.

**Keywords:** video APIs, live streaming pipeline, adaptive bitrate streaming, HLS protocol, MPEG-DASH, RTMP encoding, OBS configuration, hls.js integration, video playback architecture, low-latency HLS, WebRTC streaming, content delivery networks, HTML5 video fallback, tokenized URLs, GDPR compliant video

## Chapters

1. **Overview of video streaming fundamentals and session agenda** (00:17) — An overview introducing how to build online video streaming experiences and the core technical agenda.
1. **How video APIs empower developers to build streaming experiences** (02:57) — Application programming interfaces give developers the flexibility to build custom media platforms without relying on pre-bundled management systems.
1. **Impact of global events on the streaming industry** (04:31) — How changing global conditions forced fitness, e-learning, and virtual events into a resilient remote streaming model.
1. **Comparing platform choices for embedding online video streams** (05:50) — A comparison of social networks, bundled management systems, and proprietary platforms used for hosting customizable streams.
1. **Exploring capture, processing, delivery, and playback components** (08:38) — A complete breakdown of the four foundational steps required to process and transport video workloads from a camera out to viewers.
1. **Understanding adaptive bitrate streaming and manifest files** (12:19) — Encoding multiple definitions allows modern video players to intuitively change visual quality according to shifting internet bandwidth limits.
1. **Demonstrating adaptive bitrate behaviors within the browser** (16:52) — Inspecting browser network requests allows developers to observe exactly how web players incrementally download streaming video segments in real time.
1. **Configuring the capture stage using open broadcaster software** (20:02) — The precise workflow requirements for transmitting strict real-time media protocol broadcast signals into a cloud processing backend.
1. **Setting up live video capture layouts and inputs** (23:55) — Creating visually engaging broadcast scenes by compositing disparate webcams, screen captures, and image overlays seamlessly together.
1. **Implementing browser-based playback with video elements and plugins** (30:49) — Integrating stream source endpoints with specific media extensions establishes a path for uniform playback across differently scaled web environments.
1. **Building a custom browser player with javascript** (33:11) — Writing a customized lightweight web application script capable of initializing a live streaming client and automatically appending it natively to the document object model.
1. **Exploring advanced video stream enhancements and API features** (41:36) — Injecting configuration commands into the backend pipeline seamlessly enables powerful native simulcasting, heavily reduced broadcast latency, and comprehensive static video archives.
1. **Summary of video components and developer resources** (44:12) — A quick recap reviewing key streaming platform fundamentals coupled with avenues for claiming digital credits to test isolated network sandboxes.
1. **Strategies for streaming directly from a web browser** (46:21) — Architects can build serverless bridges that capture browser-native websocket feeds and effectively encode them out into traditional rtmp processing layers.
1. **Integrating real-time communication into scalable video broadcasts** (49:46) — Ingesting ultra low-latency video chat feeds backwards into massively scalable stream pipelines solves interactive participation barriers while serving sprawling audiences.
1. **Balancing delivery latency with stream reliability and scale** (51:29) — Navigating ongoing technical industry struggles regarding universal implementation timelines surrounding reliable, standardized, and widespread low latency data caching algorithms.
1. **Addressing data privacy and regional compliance in streaming** (57:18) — Issuing individually tracking tokenized access restrictions handles general commercial data regulations accurately without falling into intensely problematic digital rights dependencies.

## Related Moments

- [Leveraging server-side streaming for performance and interactivity](https://www.wearedevelopers.com/videos/1302-wearedevelopers-live-dishonest-charts-britcss-debugging-with-ai) (from "WeAreDevelopers LIVE - Dishonest Charts, BritCSS, Debugging with AI")
- [Deep dive into Netflix routing and data streams](https://www.wearedevelopers.com/videos/838-tips-techniques-and-common-pitfalls-debugging-kafka) (from "Tips, Techniques, and Common Pitfalls Debugging Kafka")
- [Optimizing YouTube embeds using shadow DOM and vanilla JavaScript](https://www.wearedevelopers.com/videos/1753-wearedevelopers-live-spicy-vanilla-web-css-magic-more) (from "WeAreDevelopers LIVE – Spicy Vanilla Web, CSS Magic & More")
- [Streaming traditional academic lectures on live video game platforms](https://www.wearedevelopers.com/videos/406-we-are-all-part-of-the-game) (from "We are all part of the game")
- [Building a monolithic video streaming and sharing application](https://www.wearedevelopers.com/videos/362-security-challenges-of-breaking-a-monolith) (from "Security Challenges of Breaking A Monolith")
- [Optimizing embedded video assets utilizing native HTML structures](https://www.wearedevelopers.com/videos/1803-wearedevelopers-live-keeping-up-with-styles-data-more) (from "WeAreDevelopers LIVE – Keeping Up with Styles, Data & More")

## Related Articles

- [HTML Media Elements and How to Use Them: <video> and <audio>](https://www.wearedevelopers.com/magazine/668-html-media-elements-and-how-to-use-them-video-and-audio)
- [All the videos of Halfstack London 2024!](https://www.wearedevelopers.com/magazine/521-all-the-videos-of-halfstack-london-2024)
- [Why Presentations Should Always Work Offline—Even at Online Conferences](https://www.wearedevelopers.com/magazine/602-why-presentations-should-always-work-offline-even-at-online-conferences)
- [Devs vs. Marketers, COBOL and Copilot, Make Live Coding Easy and more - The Best of LIVE 2025 - Part 3](https://www.wearedevelopers.com/magazine/663-devs-vs-marketers-cobol-and-copilot-make-live-coding-easy-and-more-the-best-of-live-2025-part-3)

## Related Jobs

- [Junior Frontend Engineer](https://www.wearedevelopers.com/jobs/ext/1532351-junior-frontend-engineer) at **Almedia**
- [Software Engineer, Platform Engineering (L2)](https://www.wearedevelopers.com/jobs/ext/1956829-software-engineer-platform-engineering-l2) at **Twilio**
- [Senior Software Engineer, Client Apps Platform](https://www.wearedevelopers.com/jobs/ext/1773893-senior-software-engineer-client-apps-platform) at **GitHub**
- [Machine Learning Engineer](https://www.wearedevelopers.com/jobs/ext/1377841-machine-learning-engineer) at **Almedia**
- [Senior Engineer, Infrastructure Platform](https://www.wearedevelopers.com/jobs/ext/328836-senior-engineer-infrastructure-platform) at **Intercom, Inc.**
- [Mid/Senior Full-Stack Engineer (Web-first)](https://www.wearedevelopers.com/jobs/ext/1210833-mid-senior-full-stack-engineer-web-first) at **SMG Swiss Marketplace Group**