Design Template by Anonymous

HTML5

In 2008, HTML5 was introduced. This included many advanvements to the HTML standard, but the one's we will be focusing on are related to video. HTML5 includes a few features that make incorporating video into your site much easier. These features include:

The <video> tag
The <caption> tag

The Video Tag

The <video> tag allows videos to be inserted directly into the web page. It contains a src variable, and a width and height variable. Here is an example:

          
            <!DOCTYPE html>
            <html>
            
            <video width="640" height="480" controls>
              <source src="demo.mp4" type="video/mp4">
            </video>
            
            </body>
            </html>

The code above simply takes a video file from its source folder, and displays it at a resolution of 640x480. We then also set the type to video/mp4 to indicate that the video is an MPEG-4 file. This is what results from this code:

As you can see, the video was implemented directly into the webpage, via HTML only. It even appears with media controls. This works because browsers that support HTML5 (which all modern browsers do) come build in with a media player to handle these files.

The Caption Tag

Now we have video in our webpage! But how do we make it accessible to more people? We add subtitles! This can be done very simply in HTML5, only requiring one additional file (per langauge) Lets look at this code example:

            
              <!DOCTYPE html>
              <html>
              <body style="background-color: grey">
          
              <video id="demo" width="1000" height="1000" controls>
                <source src="caption-demo.mp4" type="video/mp4">
                <track src="caption.vtt" kind="subtitles" label="EN" srclang="EN" default>
                <track src="caption SP.vtt" kind="subtitles" label="SP" srclang="SP">
              </video>
          
              </body>
              </html>

There is alot going on here, so lets break it down. Like before, we include the video tags, but within it is where the magic happens. By adding a <track> tag, we are adding the ability to include subtitles. As you can see, withiin the "src" section of the code, we include a link to a file that ends in .vtt. This file will be storing our subtitles for us. Lets take a look at this example:

            
              WEBVTT

              1
              00:00:01.000 --> 00:00:03.000
              - Hello.

              2
              00:00:03.000 --> 00:00:05.000
              - And Welcome to My Presentation

This is the caption.vtt file that was linked before. As you can see, the file begins with "WEBVTT". This marks this file as a subtitle file. We then number the subtitles in the order that they should appear. Underneath that number, we include the time code, in this case, the first subtitle is going from 3 seconds to 5 seconds in the video. Then, we repeat the process for each of the subtitles that appears.