What we did

July 2020 Placing Video and Audio on a site

This month we looked at how you place video and audio on a web site.

We had a look at the Mozella Developers site (MDN) to see the code and how to apply it.

Video

The HTML Video element video embeds a media player which supports <video> playback into the document. You can use video for <audio> content as well, but the audio element may provide a more appropriate user experience.

The basic video tag looks like this,


				<video controls>
				

				  <source src="myVideo.mp4" type="video/mp4">
				 
 <source src="myVideo.webm" type="video/webm">
				  
 <p>Your browser doesn't support HTML5 video. Here is
				     a <a href="myVideo.mp4">link to the video</a> instead.</p>
				
</video>

Audio

Again the MDN site said;

The HTML <audio> element is used to embed sound content in documents. It may contain one or more audio sources, represented using the src attribute or the <source> element: the browser will choose the most suitable one. It can also be the destination for streamed media, using a MediaStream.

The basic audio tag looks like this,


			<audio controls>
			  
<source src="myAudio.mp3" type="audio/mpeg">
			  
<source src="myAudio.ogg" type="audio/ogg">
			  
<p>Your browser doesn't support HTML5 audio. Here is
			     a <a href="myAudio.mp4"> link to the audio</a> instead.</p>
			
</audio>

A few points;

you can have more than one video or audio file which allows you to cater for various sites and devices. You use a separate source for each file.
You may note you can add a paragraph if the browser doesn’t support video. One idea I found was the inclusion a link to a basic video file in the paragraph.
By including controls, you allow the browser to place its default controls under the item to allow the viewer to control the such basics as volume and a slider to re-position the content.
For those of you who love programming you can add APIs that’s Application programming interface. Using Javascript you can achieve a great deal of control over the appearance and control.

Regarding APIs the MDN site said;

HTML5 comes with elements for embedding rich media in documents <video> and <audio which in turn come with their own APIs for controlling playback, seeking, etc. This article shows you how to do common tasks such as creating custom playback controls.

Tracks

This tag allows you to add close captions to any video or audio making your site more accessible to those with hearing difficulties. It’s a child of the video or audio tag. That is its placed inside the tag and embeds a text file that has time tags with a text of the words spoken at that place on the track.

The MND site said;

The HTML <track> element is used as a child of the media elements <video> and <audio> >. It lets you specify timed text tracks (or time-based data), for example to automatically handle subtitles. The tracks are formatted in WebVTT format (.vtt files) — Web Video Text Tracks or Timed Text Markup Language (TTML).

Here is a video example including the child track tag


				<video controls width="250">
      			
 <src="/media/examples/friday.mp4">
    				
<track default kind="captions" srclang="en"  src="/media/examples/friday.vtt"/>    
			
<p>Sorry, your browser doesn't support embedded videos.</p>
			
</video>

The file track needs is a VTT or video text track. Here’s what MDN said about VTT;

Web Video Text Tracks Format (WebVTT) is a format for displaying timed text tracks (such as subtitles or captions) using the element. The primary purpose of WebVTT files is to add text overlays to a <video> >. WebVTT is a text based format, which must be encoded using UTF-8. Where you can use spaces you can also use tabs. There is also a small API available to represent and manage these tracks and the data needed to perform the playback of the text at the correct times.

This is an example of VTT file.

WEBVTT

00:01.000 --> 00:04.000 (Time Stamp)

Never drink liquid nitrogen. (Spoken word)

00:05.000 --> 00:09.000 (Time Stamp)

- It will perforate your stomach. (Spoken word)

- You could die. (Spoken word)

Track has three main parts, kind which tells the browser what kind of text to expect. Such as captions or subtitles. Naturally it needs a src file and you can nominate the scr language. So you can have separate files for other languages.

How do you make VTT file.

You could use a text editor and match your text to the time tags on the video, as an example you could match your script to the time line.
However, there are a number of online transcription services like VTT Creator

This site is good as you can upload a video and it presents you with a complete VTT file.

The one thing /> noticed is you need a good audio file. I tested this site with an extract of a tutorial video and the captions were great. The video of our zoom meeting however is rather problematic. You will notice the captions don’t quite match the words. You need a good mic or audio recording if you want to have an accurate subtitle.

Here is the video of our July Zoom meeting.

This is a test audio "What is CSS"

Steve South
Web Design leader