vtt.js

2018-08-11 admin

vtt.js是什么

什么是vtt.js,A JavaScript implementation of the WebVTT specification.

vtt.js介绍、vtt.js使用

00:33.500 align:start size:50%\n"); parser.parse("<v.loud Mary>That’s awesome!"); parser.flush();


### [](#flush)flush()

Indicates that no more data is expected and will force the parser to parse any unparsed data that it may have. Will also trigger [onflush](#onflush).

### [](#onregionregion)onregion(region)

Callback that is invoked for every region that is correctly parsed. Returns a VTTRegion object.

```source-js
parser.onregion = function(region) {
  console.log(region);
};

oncue(cue)

Callback that is invoked for every cue that is fully parsed. In case of streaming parsing oncue is delayed until the cue has been completely received. Returns a VTTCue object.

parser.oncue = function(cue) {
  console.log(cue);
};

onflush()

Is invoked in response to flush() and after the content was parsed completely.

parser.onflush = function() {
  console.log("Flushed");
};

onparsingerror(error)

Is invoked when a parsing error has occured. This means that some part of the WebVTT file markup is badly formed. See ParsingError for more information.

parser.onparsingerror = function(e) {
  console.log(e);
};

WebVTT.convertCueToDOMTree(window, cuetext)

Parses the cue text handed to it into a tree of DOM nodes that mirrors the internal WebVTT node structure of the cue text. It uses the window object handed to it to construct new HTMLElements and returns a tree of DOM nodes attached to a top level div.

var div = WebVTT.convertCueToDOMTree(window, cuetext);

WebVTT.processCues(window, cues, overlay)

Converts the cuetext of the cues passed to it to DOM trees—by calling convertCueToDOMTree—and then runs the processing model steps of the WebVTT specification on the divs. The processing model applies the necessary CSS styles to the cue divs to prepare them for display on the web page. During this process the cue divs get added to a block level element (overlay). The overlay should be a part of the live DOM as the algorithm will use the computed styles (only of the divs to do overlap avoidance.

var divs = WebVTT.processCues(window, cues, overlay);

ParsingError

A custom JS error object that is reported through the onparsingerror callback. It has a name, code, and message property, along with all the regular properties that come with a JavaScript error object.

{
  "name": "ParsingError",
  "code": "SomeCode",
  "message": "SomeMessage"
}

There are two error codes that can be reported back currently:

  • 0 BadSignature
  • 1 BadTimeStamp

Note: Exceptions other then ParsingError will be thrown and not reported.

VTTCue

A DOM shim for the VTTCue. See the spec for more information. Our VTTCue shim also includes properties of its abstract base class TextTrackCue.

var cue = new window.VTTCue(0, 1, "I'm a cue.");

Note: Since this polfyill doesn’t implement the track specification directly the onenter and onexit events will do nothing and do not exist on this shim.

Extended API

There is also an extended version of this shim that gives a few convenience methods for converting back and forth between JSON and VTTCues. If you’d like to use these methods then us vttcue-extended.js instead of vttcue.js. This isn’t normally built into the vtt.js distributable so you will have to build a custom distribution instead of using bower.

toJSON()

Converts a cue to JSON.

VTTCue.fromJSON(json)

Create and initialize a VTTCue from JSON.

var cue = VTTCue.fromJSON(json);

VTTCue.create(options)

Initializes a VTTCue from an options object where the properties in the option objects are the same as the properties on the VTTCue.

var cue = VTTCue.create(options);

VTTRegion

A DOM shim for the VTTRegion. See the spec for more information.

var region = new window.VTTRegion(0, 1, "I'm a region.");
cue.region = region;

Extended API

There is also an extended version of this shim that gives a few convenience methods for converting back and forth between JSON and VTTRegions. If you’d like to use these methods then us vttregion-extended.js instead of vttregion.js. This isn’t normally built into the vtt.js distributable so you will have to build a custom distribution instead of using bower.

VTTRegion.fromJSON(json)

Creates and initializes a VTTRegion from JSON.

var region = VTTRegion.fromJSON(json);

VTTRegion.create(options)

Creates a VTTRegion from an options object where the properties on the options object are the same as the properties on the VTTRegion.

var region = VTTRegion.create(options);

Browser

In order to use the vtt.js in a browser, you need to get the built distribution of vtt.js. The distribution contains polyfills for TextDecoder, VTTCue, and VTTRegion since not all browsers currently support them.

Building Yourself

Building a browser-ready version of the library is done using grunt (if you haven’t installed grunt globally, you can run it from ./node_modules/.bin/grunt after running npm install):

$ grunt build
$ Running "uglify:dist" (uglify) task
$ File "dist/vtt.min.js" created.

$ Running "concat:dist" (concat) task
$ File "dist/vtt.js" created.

$ Done, without errors.

Your newly built vtt.js now lives in dist/vtt.min.js, or alternatively, dist/vtt.js for an unminified version.

Bower

You can also get the a prebuilt distribution from Bower. Either run the shell command:

Or include vtt.js as a dependency in your bower.json file. vtt.js should now live in bower_components/vtt.js/vtt.min.js. There is also an unminified version included with bower at bower_components/vtt.js/vtt.js.

Usage

To use vtt.js you can just include the script on an HTML page like so:

<html>
<head>
  <meta charset="utf-8">
  <title>vtt.js in the browser</title>
  <script src="bower_components/vtt.js/vtt.min.js"></script>
</head>
<body>
  <script>
    var vtt = "WEBVTT\n\nID\n00:00.000 --> 00:02.000\nText",
        parser = new WebVTT.Parser(window, WebVTT.StringDecoder()),
        cues = [],
        regions = [];
    parser.oncue = function(cue) {
      cues.push(cue);
    };
    parser.onregion = function(region) {
      regions.push(region);
    }
    parser.parse(vtt);
    parser.flush();

    var div = WebVTT.convertCueToDOMTree(window, cues[0].text);
    var divs = WebVTT.processCues(window, cues, document.getElementById("overlay"));
  </script>
  <div id="overlay" style="position: relative; width: 300px; height: 150px"></div>
</body>

本站文章除注明转载外,均为本站原创或编译。欢迎任何形式的转载,但请务必注明出处。

转载请注明:文章转载自 JavaScript中文网 [https://www.javascriptcn.com]

本文地址:https://www.javascriptcn.com/read-37756.html

文章标题:vtt.js

回到顶部