geoloha.blogg.se - Html5 video caption maker

#Html5 video caption maker how to#
#Html5 video caption maker mac osx#
#Html5 video caption maker update#

Internet Explorer 9.) Try another browser

If the video doesn't play with the subtitles, you might be using a browser that doesn't support all the technologies (e.g.

Explore how JavaScript can be used to create a custom UI - refer to the demo from step 3 of the tutorial.

Explain the syntax of WebVTT files, including their (somewhat limited) styling information.

Explain the purpose of different types of text track.

Show in particular how the default browser implementations aren't very good, so JavaScript is needed to reliably display captions/subtitles.

Show the demo from step 2 of the tutorial, illustrating how it will work across different browsers due to different sources and fallback mechanisms.

In its simplest form, the final demo can be run simply by double clicking the index.html file in the source code's final directory, or navigating to the live demo.

Just running the presentation without a code walkthrough or workshop should take about 45 minutes. Presenting about HTML5 video subtitles and captions is fairly simple - you just need the slides and demo materials, downloaded locally if possible so network connectivity is not a problem.

Links to videos of the presentation materials being used (include this later, once content kit has been delivered/tested).

Tutorial for building up demo included in content kit.

Article: Adding captions and subtitles to HTML5 video.

Issue tracker/feedback: File issues against the content kit's Github repo.

Understand what other types of text track are used for.

Be able to implement custom UIs for controlling text track display using JavaScript and relevant API features.

Understand WebVTT syntax (including styling) and be able to write their own.

#Html5 video caption maker how to#

Know how to implement captions and subtitles in HTML videos using the element.It would be helpful to have a reasonable understanding of HTML - including the basics of HTML - and JavaScript/DOM knowledge.Īfter you present or teach this content kit, your audience will:.This could include Firefox, Chrome, Opera, Safari, or Internet Explorer 10+

#Html5 video caption maker mac osx#

A Linux, Windows or Mac OSX computer would be benefical to follow along with the examples, if the audience is going to be coding along with the presenter (this is optional).It would be helpful to have a good level of HTML knowledge - including and elements, and HTML5 element fallbacks - and JavaScript/DOM knowledge.

Examples include Sublime Text, gedit, or Notepad++. This could include Firefox, Chrome, Opera, Safari, or Internet Explorer 10+. This content kit is published under the Mozilla Public License, version 2.0.

#Html5 video caption maker update#

Please file any issues you find against This content kit's github repo.Ĭontent kit v0.9: last significant update 13th April 2015. Technology level: HTML5 is well-supported across modern browsers (going back to Internet Explorer 9) is also fairly well supported (all modern browsers, going back to Internet Explorer 10).

Learners will gain new knowledge of HTML and JavaScript related to this area, and how subtitles and captions are defined and used on the Web. In this content kit we'll teach the basics of adding captions and subtitles (and other text track types) to HTML5 using the element, and look at support possibilities in legacy browsers. Working with HTML5 Video: Adding captions and subtitles Working with HTML5 video: Adding captions and subtitles