HTML5 Video Tag Example Tutorial

html5 video tag example tutorial

ever wondered about the secrets of  html5 video tag? wounder no more, in the following html5 video tag example tutorial we are going to drill down and grasp the concept of the html5 video tag. We will use examples, references, and explanations.
I’m going to go ahead and assume you have an understanding in HTML5, for those who don’t I’m going to cover a super quick reference about HTML. Starting from  a few points that are fairly easy to understand.

What is HTML?

HTML is the standard markup language for creating Web pages.

  • stands for Hyper Text Markup Language
  • describes the structure of Web pages using markup
  • elements are the building blocks of HTML pages
  • elements are represented by tags

let’s have a quick explanation in regards of HTML.
html is a tag language, not a programming language. Meaning? we tell the browser what we want to do, using HTML tags. In return, the browser interprets those tags and renders the HTML markup we told it too.

html5 tag example

<!DOCTYPE html>
<html lang="en">
    <meta charset="UTF-8">

The top example is standard markup, a simple HTML page markup. If you want to read a bit on HTML you’re welcome to visit W3S Documentation pages.

The HTML5 video tag

let’s start with a simple html5 video tag example and go from there:

    <source src="html5vid.mp4" type="video/mp4">
    <source src="movie.ogg" type="video/ogg">

the <video> tag is our opener, followed by <source> tags and closure with the </video> tag.
A keynote to take in close regard is that the video tag supports MP4, OGG, WebM files.
The HTML5 video tag accepts attributes as well, let’s have a closer look at that.

html5 video tag attributes

Key  attributes in the <video> tag and things you will likely encounter:
controls if set in the tag in allows controls for the video – play, pause, etc.
muted sets the video to mute.
An important note on this, as in May 2018 developers are having trouble embedding video tags to autoplay on mobile device.  The rule of thumb when embedding a video to autoplay on mobile is to set this attribute. nevertheless, we still encounter problems because of video browser support on mobile devices. we don’t always succeed in implementing live video auto play without the help of Javascript/Jquery. And still sometimes it’s not enough and on some mobile devices, the video won’t autoplay.
src as implied, the source for the video, we usually use an assist tag to set sources under the video tag.  <source src="">   It ensures browser support. Don’t implement an src within the video tag, only if you have to for some reason.
width simple, the width of the player, usually we don’t set inline width attributes in html5 video tags.
height as mentioned about the width, pretty much the same.
autoplay sets an attribute of an autoplay to the video as the page loads.
pay attention to this one, it doesn’t always work on mobile devices as a stand-alone and requires code in Javascript/Jquery.
Take have a look at another html5 video tag example, this time with some attributes:

<video id="myVid" controls autoplay>
    <source src="html5vid.mp4" type="video/mp4">
    <source src="new.ogg" type="video/ogg">

simple enough, you can see the attributes and an id call.
You can check out the full HTML Audio/Video DOM Reference HERE.

final words

Basically, that’s pretty much it on this subject, keep tuned for a post where I will explain the way on implementing autoplay videos on mobile devices. If you have any questions please free to comment or visit the references provided on this page.

html5 video tag example

One Reply to “HTML5 Video Tag Example Tutorial”

Leave a Reply

Your email address will not be published. Required fields are marked *