HTML5 Track Element Primer Tutorial

HTML5 Track Element Primer Tutorial

HTML5 Track Element Primer Tutorial

HTML5 brought in quite a few new HTML element types (which you can read more about here) and one very useful one appears in the HTML code snippet as below …


<video controls>
<source type="video/ogg; codecs="vp8, vorbis"" src="//www.rjmprogramming.com.au/PHP/videos/GoToMeeting.ogv"></source>
<track kind="subtitles" label="English subtitles" src="//www.rjmprogramming.com.au/PHP/videos/subtitles_en.vtt" srclang="en" default></track>
<track kind="subtitles" label="Deutsche Untertitel" src="//www.rjmprogramming.com.au/PHP/videos/subtitles_de.vtt" srclang="de"></track>
</video>

… yes, it’s <track> and think, by the context, you can guess what it does, especially if we say you can also use it with <audio> … yes, as you can read here

The <track> tag specifies text tracks for media elements (<audio> and <video>).

As it’s part of HTML5 am sure it will eventually be more acceptable across the web browsers but for now we’ll show you it working in Google Chrome. Really it’s better to concentrate on functionality that works across the browsers, but, as with concepts like VBScript (only working with Internet Explorer) its still worth knowing about the <track> HTML5 element because of its support for the “oncuechange” event it triggers in the scenario of our HTML snippet above, where the track element’s “src” parameter “//www.rjmprogramming.com.au/PHP/videos/subtitles_en.vtt” is a subtitles file with a WEBVTT format you can read about here.

Each change of subtitle “event” in this file represents a place where the “oncuechange” event can be triggered as you play the media file, whether that be video or audio. As you can read at this great link this WEBVTT format supports JSON syntax, and we use that with our live run (that may or may not show subtitles, and a transcription with images, using the web browser you are currently using) today (with the downloadable track_tutorial.html making use of the English subtitles subtitles_en.vtt).

So, a bit more work and we’re getting towards YouTube, with closed captions, functionality for your videos … cute, huh?!

If this was interesting you may be interested in this too.

This entry was posted in eLearning, Event-Driven Programming, Tutorials and tagged , , , , , , , , , , , , , , , , , , . Bookmark the permalink.

10 Responses to HTML5 Track Element Primer Tutorial

  1. I think that is one of the most significant info for me. And i’m satisfied studying your article. However should statement on few basic issues, The site taste is ideal, the articles is really nice : D. Good activity, cheers|

  2. Personal growth quotes says:

    Nice post. I realize one thing significantly harder on diverse blogs daily. Most normally it can be stimulating to study to read content off their writers and employ a little a thing from their site. I’d opt to utilize some though using content material on my own weblog whether or not you usually do not mind. Natually I’ll provide link in your internet blog. Several thanks sharing.

    https://justpaste.it/sxfw

  3. Hi my friend nitodiss! I want to say that this article is amazing, great written and include approximately all significant infos. I’d like to see more posts like this .

  4. best choice says:

    Is not it amazing any time you acquire a good post? My browsing efforts seem complete.. thanks. Recognize the value of the entry you made available.. So content to possess discovered this publish..

  5. Exceptional editorial! Would like took pleasure the specific following. IÒ€ℒm hoping to learn to read a lot far more of you. ThereÒ€ℒs no doubt that you possess tremendous awareness and even imagination. I happen to be really highly fascinated employing this critical data.

  6. rewarding says:

    My web surfing seem full.. thank you. So pleased to have discovered this post.. I enjoy you posting your viewpoint.. Enjoying the posting.. with thanks

  7. Pure says:

    So happy to have identified this publish.. Truly handy standpoint, thank you for posting.. Adoring the post.. thankfully Amazingly advantageous point of view, thanks for sharing..

  8. I consider something truly interesting about your website so I saved to my bookmarks .

  9. seo company says:

    Excellent goods from you, man. I have have in mind your stuff previous to and you’re just extremely excellent. I really like what you have got right here, certainly like what you are stating and the best way during which you are saying it. You make it enjoyable and you still care for to keep it sensible. I can not wait to read much more from you. That is really a wonderful site.

    https://www.google.com/maps/place/Chicago+Website+Design+SEO+Company+F09F8F86/@41.8813516,-87.641339,17z/data=!4m5!3m4!1s0x0:0x84e84c3ad45eff6!8m2!3d41.8813516!4d-87.6391503?hl=en

Leave a Reply

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

You may use these HTML tags and attributes: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <strike> <strong>