• Home
  • SEM
    • PPC
    • SEO
    • How To
  • Bangladesh
  • School
    • HTTP
    • REP
    • Bots n’ htaccess
    • Source Code
    • Excel 2010
    • HTML XHTML Entities
    • Gmail Operators
    • HTML & ASCII
  • About
    • Privy
    • About This Blog
  • Contact
  • বাংলা

Saidul Hassan

Digital Marketing Evangelist

Home / School / HTML5 Video Embedding

HTML5 Video Embedding

27 Sep, 2020 By Saidul Hassan · Filed Under: School

With YouTube reigning the universe, there’s really random cases where you might need to host your videos by yourselves. Also converting videos to different formats for maximum compatibilities is difficult, time consuming, even sometimes costly. 

BrowserMP4WebMOgg
Chrome☑☑☑
Firefox☑☑☑
Safari☑☑☒
Edge☑☑☑
Opera☑☑☑
Browser support for video formats

HTML Video element <video> is used to embed a media player to load and play video in webpages. Even an audio files can be payed using the <video> tag, tough more appropriate way is to use the <audio> tag. Typical video tag contains video start tag, source tag, and the text between the tags to be displayed in browsers that do not support the <video> tag. Multiple source tags are used so the browser can choose the proper source. A typical <video> element is like this:

<video width="480" height="270" autoplay controls>
  <source src="/blog/wp-content/uploads/2020/09/flower.mp4" type="video/mp4">
  <source src="/blog/wp-content/uploads/2020/09/flower.webm" type="video/webm">
Sorry, your browser does not support HTML embedded videos.
</video>
Sorry, your browser does not support HTML embedded videos.

However, using JavaScript, videos can be loaded like this with advanced customizations:



Your browser does not support HTML video.

This is embedding YouTube video:

Same video with different settings:

And this one is with autoplay but muted. Chrome does not allow autoplay in all cases. However, muted autoplay is always allowed.

Learn more about YouTube Embedded Players and Player Parameters at Google Developers.

More on HTML5 Video embed element at MDN web docs.

The following two tabs change content below.
  • Bio
  • Latest Posts
My Twitter profileMy Facebook profileMy Google+ profileMy LinkedIn profileMy Instagram profileMy Pinterest profile

Saidul Hassan

Managing Partner at Up Arrow Consulting
COO at Up Arrow Consulting, MCC manager, & Technical SEO consultant. Certified Google Partners and Microsoft Bing Ads Accredited Professional, Python enthusiast, wannabe SysAdmin. Graduated from School of Management & Business Administration (SOMBA), Khulna University.
My Twitter profileMy Facebook profileMy Google+ profileMy LinkedIn profileMy Instagram profileMy Pinterest profile

Latest posts by Saidul Hassan (see all)

  • How to use PrismJS syntax highlighter on WordPress without plugin - 30 Mar, 2020
  • Download an Entire Website for Offline Viewing - 26 Nov, 2019
  • HMA Pro VPN Setup for Multiple Locations without User/Password Every time in Linux CLI - 14 May, 2018

Share:

  • Twitter
  • Facebook
  • LinkedIn
  • Pinterest
  • Pocket
  • Email
  • Print

First published on 30 Sep, 2013 · Last updated 27 Sep, 2020 · Tagged With: HTML5, Loop, Video

How to use PrismJS syntax highlighter on WordPress without plugin

30 Mar, 2020 By Saidul Hassan

Download an Entire Website for Offline Viewing

26 Nov, 2019 By Saidul Hassan

HMA Pro VPN Setup for Multiple Locations without User/Password Every time in Linux CLI

14 May, 2018 By Saidul Hassan

How to Search and Delete Files Containing Specific String in Name

27 Nov, 2017 By Saidul Hassan

How to Bulk Rename Video Files based on Resolution, Size etc.

27 Nov, 2017 By Saidul Hassan

Archives

  • March 2020
  • November 2019
  • May 2018
  • November 2017
  • July 2017
  • March 2017
  • February 2017
  • June 2016
  • November 2015
  • July 2015
  • June 2015
  • May 2015
  • January 2015
  • December 2014
  • September 2014
  • February 2014
  • January 2014
  • October 2013
  • September 2013
  • August 2013
  • February 2013
  • January 2013
  • November 2012
  • October 2012
  • September 2012
  • July 2012
  • August 2011
  • June 2011
  • May 2011
  • ♥ Bangladesh ♥
    Log in · Privacy Policy · Contact
    Copyright © 2011 Saidul Hassan

  • DMCA

loading Cancel
Post was not sent - check your email addresses!
Email check failed, please try again
Sorry, your blog cannot share posts by email.