🚨 Time is Running Out: Reserve Your Spot in the Lucky Draw & Claim Rewards! START NOW

Code has been added to clipboard!

HTML Objects and Plugins: What's the Difference and How to Choose?

Reading time 3 min
Published Mar 27, 2019
Updated Sep 30, 2019

TL;DR – HTML objects and plugins are media elements that can be embedded in a webpage from an external source to provide additional functionalities.

Why Add Multimedia?

While HTML tags and elements provide you with a variety of possibilities, there are some things they won't help you create. Stuff like audio, video, or applets has to be embedded for an external source.

HTML objects and plugins can also be called HTML multimedia. This term represents all mediums of communication. Embedded objects help to create impressive designs, add dynamicity and provide additional functionalities. All of these options help you improve the user experience. You can embed media to HTML using a file or a web address.

Embed HTML Objects and Plugins Using the Right Tags

The HTML <object> element specifies an embedded object in the document. It can be used to embed multimedia files or another web page in HTML:

Example
<object width="400" height="300" data="example.ex">

The <embed> tag can also be used for specifying embedded objects in web documents, mostly HTML plugins and external applications:

Example
<embed width="400" height="300" src="example.ex">

Note: the <embed> element won't work in HTML4 and older versions.

Images belong to multimedia as well, as they have to be added from external sources. To embed an image, HTML <img> tags are the easiest option:

Example
<img src="image.png" alt="Space Doggo" width="50" height="50">

To add video or audio, you can simply use <audio> and <video> tags:

Example
<audio controls>
<source src="bitdegree.org/learn/I_Cactus_-_05_-_ruby_cactus.mp3" type="audio/mpeg"">
<p>If audio does not start, the <audio> HTML element is not supported in your browser.</p>
</audio>

Example
<video controls width="400" height="300">
  <source src="video-tag-example.mp4" type="video/mp4">
  <source src="video-tag-sample.webm" type="video/webm">
  <source src="video-tag-demo.ogg" type="video/ogg">
  Video tag is not supported in this browser.
</video>

Note: using the HTML <video> tags means you don't need to embed Flash in HTML, as the native HTML5 element has a much better browser support.

HTML Audio and Video Formats

To add audio and video to your website, you need to be aware of what formats you may choose. See the list of the available formats in the tables below.

DataCamp
Pros
  • Easy to use with a learn-by-doing approach
  • Offers quality content
  • Gamified in-browser coding experience
  • The price matches the quality
  • Suitable for learners ranging from beginner to advanced
Main Features
  • Free certificates of completion
  • Focused on data science skills
  • Flexible learning timetable
Udacity
Pros
  • Simplistic design (no unnecessary information)
  • High-quality courses (even the free ones)
  • Variety of features
Main Features
  • Nanodegree programs
  • Suitable for enterprises
  • Paid Certificates of completion
Udemy
Pros
  • Easy to navigate
  • No technical issues
  • Seems to care about its users
Main Features
  • Huge variety of courses
  • 30-day refund policy
  • Free certificates of completion

Audio Formats

Format Media type
PCM audio/wav
MP3 audio/mpeg
AAC audio/mp4, audio/aac, audio/aacp
Vorbis audio/ogg, audio/webm
Opus audio/ogg, audio/webm
FLAC audio/flac, audio/ogg

Video Formats

Format Media type
Theora video/ogg
H.264 video/mp4
HEVC video/mp4
VP8 video/webm
VP9 video/webm
AV1 video/webm

HTML Object and Plugins: Useful Tips

  • Don't embed SWF files in HTML, as Shockwave Flash has been discontinued. Currently, the native HTML5 tags are supported much better.
  • Always make sure viewing your HTML plugin doesn't require special software. For example, a lot of Java applets are no longer displayed because most browsers stopped supporting the NPAPI (Netscape Plugin Application Programming Interface) plugin.