HTML5 Video: How To Embed Video In Your HTML - ExpertBeacon (2024)

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:

HTML5 Video: How To Embed Video In Your HTML - ExpertBeacon (1)

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:

ResolutionCodecFilesize
720pH.264175MB
720pVP9201MB
1080pH.264341MB
1080pVP9394MB

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:

  1. Encoding a video at multiple quality levels
  2. Chopping each version into small segment files, usually from 2-10 seconds in length
  3. A manifest file specifies where those segments live
  4. 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.

HTML5 Video: How To Embed Video In Your HTML - ExpertBeacon (2)

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:

HTML5 Video: How To Embed Video In Your HTML - ExpertBeacon (3)

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.

HTML5 Video: How To Embed Video In Your HTML - ExpertBeacon (4)

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:

HTML5 Video: How To Embed Video In Your HTML - ExpertBeacon (5)

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:

HTML5 Video: How To Embed Video In Your HTML - ExpertBeacon (6)

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!

Related,

HTML5 Video: How To Embed Video In Your HTML - ExpertBeacon (2024)

References

Top Articles
Latest Posts
Article information

Author: Barbera Armstrong

Last Updated:

Views: 6408

Rating: 4.9 / 5 (59 voted)

Reviews: 82% of readers found this page helpful

Author information

Name: Barbera Armstrong

Birthday: 1992-09-12

Address: Suite 993 99852 Daugherty Causeway, Ritchiehaven, VT 49630

Phone: +5026838435397

Job: National Engineer

Hobby: Listening to music, Board games, Photography, Ice skating, LARPing, Kite flying, Rugby

Introduction: My name is Barbera Armstrong, I am a lovely, delightful, cooperative, funny, enchanting, vivacious, tender person who loves writing and wants to share my knowledge and understanding with you.