Create a background video for the HTML site with the use of the Azure Storage Account

Using background videos on websites is something quite common now days. Recently I discovered the available capabilities which exist on the Azure Storage Account and I realized, it is quite simple to embed background video on a website via Storage Account.

First create a Container in the Storage Account on Azure. Then, select for option public access level the choice “Blob (anonymous read access for blob only)”.

blob1

Upload the video you want to use, and then select from properties the video url you will add to the code.

blob2

blob3

Then add the following section to the html file. In the source field add the url from the Storage Account.

<section id="myVideo">
  <div>
   <video autoplay muted loop poster="img/sections/bg/1900x700_Video.jpg">
    <source src="https://irisassistantvideo.blob.core.windows.net/backgroundvideo/video.mp4"  type='video/mp4; codecs="avc1.42e01e, mp4a.40.2">
   </video>
  <div>
</section>

You may notice in a big video a little delay in the beginning until the video is played. This is created as Azure Blob Storage does not support streaming but progressive download. With progressive download, it takes a little time to download a significant amount of data before it starts.

ezgif.com-video-to-gif

Advertisements

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out /  Change )

Google photo

You are commenting using your Google account. Log Out /  Change )

Twitter picture

You are commenting using your Twitter account. Log Out /  Change )

Facebook photo

You are commenting using your Facebook account. Log Out /  Change )

Connecting to %s