Before HTML5, displaying video on a webpage required plugins like Adobe Flash or Microsoft Silverlight. But with improved browser support for HTML5, you can now easily embed video directly into web pages using the <video> element.
In this comprehensive 2600+ word guide, you‘ll learn:
- Video encoding formats, codecs, and capabilities
- Step-by-step
<video>implementation guide - Advanced customization and optimization tips
- Self-hosting considerations and external platform options
- Monetization Integration possibilities
And much more! Let‘s get started.
A Brief History of Online Video
To understand modern HTML5 video, it helps to know how we got here.
Early Video Plugins
In the early 2000s, online video relied on browser plugins like Adobe Flash, Microsoft Silverlight, and QuickTime. This meant inconvenient plugin installations and no mobile support.
By 2010, Flash handled over 75% of online videos with progressive download capabilities and rudimentary dynamic streaming. But plugins came with frustrating limitations like restricting right clicks and lack of SEO value.
Move Towards HTML5 Video
When the iOS devices refused to support Flash in 2007, it became clear plugin‘s days were numbered. Internet Explorer 9 introduced basic <video> tag support in 2011 alongside browser and codec improvements.
Today native browser video playback is now fully mainstream across mobile devices which is why HTML5 uptake progressed so rapidly:
As you can see, we‘ve come a long way to near ubiquitous support today!
HTML5 Video Formats
The <video> element itself is just a container that can be paired with different video formats. Let‘s compare the most common encoding options available today:
MPEG-4 Part 14 (MP4)
- High compatibility and hardware support
- H.264 video codec and AAC audio
- Used by Blu-ray discs and also iTunes
- Good compression efficiency
WebM
- Open-source format by Google for HTML5 video
- VP9 video codec with Vorbis audio
- Comparable quality and filesize to H.264
- Royalty free but less widespread support
Ogg
- Free open container format
- Often uses VP3, Theora for video and Vorbis for audio
- Fully open-source and royalty free
- Less browser support than MP4 or WebM
And here‘s how they compare in terms of compressed filesize across resolutions:
| Resolution | Codec | Filesize |
|---|---|---|
| 720p | H.264 | 175MB |
| 720p | VP9 | 201MB |
| 1080p | H.264 | 341MB |
| 1080p | VP9 | 394MB |
As you can see, H.264 still edges out VP9 in terms of efficiency though the margins have narrowed recently.
MPEG-DASH Adaptive Streaming
An increasingly popular video delivery format is MPEG-DASH adaptive bitrate streaming. This works by:
- Encoding a video at multiple quality levels
- Chopping each version into small segment files, usually from 2-10 seconds in length
- A manifest file specifies where those segments live
- The client intelligently switches quality levels to adapt to changing network conditions
This provides a better streaming viewer experience across fluctuating internet speeds and device types. Most major commercial platforms from YouTube to Netflix use video Adaptive Bitrate Streaming.
On the downside, set up and formatting can introduce additional complexity compared to regular progressive video downloads.
AV1 and the Future
The AV1 codec is a brand new open-source, royalty-free media format backed by the Alliance for Open Media consortium. Members include Amazon, Google, Intel, Microsoft, Mozilla, Netflix and more heavyweights.
AV1 promises ~30% better compression than existing video codecs which should cut bandwidth demands and improve quality. However, it requires extensive hardware acceleration support which will limit initial adoption.
Expect to see gradual rollout across browsers and devices over the next 1-2 years as AV1 gains maturity.
The bottomline – While the <video> element itself seems straightforward, there are still active format battles and complex encoding considerations today. Plan testing time for cross-device playback.
Step-by-Step Implementation Guide
With video basics covered, let‘s now dive into detailed examples of implementing HTML5 video in your web pages:
1. Simple Embedded Video
Starting with the basics, here‘s how to embed an MP4 video with the default browser controls showing:
<!-- index.html --><video width="560" height="340" controls> <source src="video.mp4" type="video/mp4"></video>The width and height keep the player responsive by setting intrinsic dimensions. Omitting these would make the video expand to 100% width by default.
Note we only have a single MP4 source file here – let‘s fix that next.
2. Include Multiple Video Sources
Since various browsers support different file types, serving only a single video source risks failing for some users.
Instead, list multiple sources as fallbacks:
<video width="560" height="340" controls> <source src="video.mp4" type="video/mp4"> <source src="video.webm" type="video/webm"> <source src="video.ogg" type="video/ogg"></video>Browsers will automatically select the first format they support in the provided order.
We recommend MP4 first as the most universal, followed by WebM and Ogg.
3. Stylize Custom Controls with CSS
The default controls provided by browsers lack customization and styling.
For example, let‘s make our play button larger using CSS:
video::-webkit-media-controls-play-button { font-size: 48px; }Result:
Note: Styling rules are still extremely limited even with shadow DOM pseudo-elements and vendor prefixes. JavaScript libraries like Video.js open many more options.
4. Autoplay and Loop Video
The autoplay and loop boolean attributes automate further playback behavior:
<video width="560" height="340" autoplay muted loop> <source src="video.mp4" type="video/mp4"></video>Pro Tip – Don‘t forget to add muted as well for responsible, polite autoplay.
5. Custom Poster Image
The poster attribute sets a placeholder preview image before playback starts:
<video width="560" height="340" poster="thumbnail.jpg" controls> ...</video>This improves user experience and engagement as viewers discern if they are interested.
Additionally, poster images factor into search engine rankings and social link shares too now.
Responsiveness, Accessibility and Performance
Let‘s quickly touch on a few best practices around publishing:
Mobile-First Responsiveness
Videos should respect the viewer‘s device size. Using percentage or responsive width/height lets them downscale smoothly on mobile.
We utilized fixed intrinsic dimensions earlier for simplicity but fluid width/heights work better across device sizes in most real world cases.
Accessibility Support
Add text tracks like closed captions or subtitles to support those hard of hearing. Descriptive audio tracks can also supplement the visual component for the visually impaired.
Web Accessibility Initiative has a fantastic guide on increasing video accessibility with little effort that is worth reading.
Performance Optimizations
Setting proper HTTP caching headers so the browser can cache portions of video files significantly reduces redundant downloads.
Also enable Gzip compression to compact file transfers.
Tools like Lighthouse help benchmark performance wins.
This covers the key concepts in practice – let‘s now move on to infrastructure and integration considerations.
Self-Hosting vs External Platforms
We glossed over an important detail earlier – where do these video files come from?
While the <video> element makes embedding straightforward, hosting introduces further complexity around:
- Encoded Format Choices
- Playing Quality and Consistency
- Analytics and Monitoring
- Viewer Experience Across Devices
- Cost of Infrastructure, Bandwidth and Storage
Third party platforms like YouTube, Vimeo and Wistia specialize in optimizing each stage – encoding, smart delivery, monetization, and analytics.
YouTube Boasts Staggering Viewership
Consider YouTube‘s enormous popularity to appreciate offloading complexity at scale:
- Over 1 billion hours watched daily
- 5 billion+ mobile video views per day
- 300 hours of video uploaded every minute!
In addition, platforms invest heavily in recommendation algorithms and social features to retain viewers longer while also learning their preferences.
However, key downsides accompany embedding third party content – like losing control of the user experience and becoming dependent on external branding.
We‘ll analyze the key pros and cons of each approach below.
Self-Hosting Your Own Videos
Let‘s examine what managing your own videos entails.
Pros
- Full control over viewer experience
- Keep users in your ecosystem
- Own all data and analytics
- Brand integrity with no external watermarks
Cons
- Significant CDN and server bandwidth bills
- Encoding expertise and testing requirements
- Limited analytics data unless self-built
- Resource drain better spent elsewhere
Unless video is core to your product, offloading logistics to specialists often makes sense. However, custom use cases like eLearning platforms, corporate communications and OTT media apps warrant managing custom video delivery.
If self-hosting, ensure efficient encodings, optimized delivery protocols like MPEG-DASH, and utilize a CDN for global distribution.
External Platforms
Now, let‘s examine embedding popular third-party platforms:
Pros
- Encoding and performance optimization included
- Battle tested across millions of viewers
- Support multiple quality streams out of the box
- Viewership analytics included
- Social features standard
Cons
- Surrender control of user experience
- External branding prevails
- Limited customization options
- Must comply with third-party policies
- Service interruptions affect your site
Your choice depends on the context – for example, an informal personal blog benefits enormously from YouTube but a sophisticated media brand would prefer self-hosting video.
Both options enable excellent, flexible solutions with the <video> tag so evaluate your resources and priorities.
Monetization Integration
Videos monetize successfully through advertisem*nts on social platforms, especially YouTube and Facebook.
However, you can also directly monetize videos hosted on your own website by:
a) Playing inline video ads
b) Overlaying custom graphics
c) Pausing mid-stream for sponsorship messages
This maintains user experience on your properties while benefiting from engaged viewers attracted through rich media content.
Pre-Roll and Mid-Roll Video Ads
The most straightforward way is using a video ad server to inject pre-roll or mid-roll inventory from networks like Google Ads or TripleLift.
For example, Google IMA SDK offers robust ad stitching capabilities:
Header bidding wrappers can also capture demand simultaneously from multiple networks beyond Google. Carefully balance fill rate, viewability and bid price across sources for ideal yield.
Furthermore, customize ad frequency, duration and pacing to balance revenue without frustrating viewers.
Innovative Approaches
Online video ads remain one of the highest performing formats with strong completion percentages.
Hence, there is ample room for innovation like interactive mini games between segments that maintain user attention while layering in sponsor messages.
Personalized dynamic product placement leveraging machine learning in post production also offers a non-interruptive ad approach.
And those represent just a few possibilities in a rapidly progressing space merging media and advertising.
Conclusion
We have covered full production cycle of embedded video – from playback with the <video> element itself to hosting considerations and monetization integration.
Start by testing support across browsers using multiple sources and progress to advanced features like adaptive streaming. Offloading delivery by leveraging platforms grants flexibility but customize user experience further by self-hosting as expertise and resources permit.
HTML5 video eliminates historic reliance on plugins, opening web media to all modern browsers and devices. Paired with maturing standards, increasing hardware decoding support plus highly efficient compression and delivery methods coming online, we are entering a new golden age for online video spanning mobile, desktop and beyond!
I welcome your thoughts and questions on current practices in @theUser‘s comments below. Thank you for reading!
