VTTRegion
Limited availability
This feature is not Baseline because it does not work in some of the most widely-used browsers.
The VTTRegion interface of the WebVTT API describes a portion of the video to render a VTTCue onto.
Constructor
VTTRegion()-
Returns a newly created
VTTRegionobject.
Instance properties
VTTRegion.id-
A string that identifies the region.
VTTRegion.width-
Represents the width of the region, as a percentage of the video.
VTTRegion.lines-
Represents the height of the region, in number of lines.
VTTRegion.regionAnchorX-
Represents the region anchor X offset, as a percentage of the region.
VTTRegion.regionAnchorY-
Represents the region anchor Y offset, as a percentage of the region.
VTTRegion.viewportAnchorX-
Represents the viewport anchor X offset, as a percentage of the video.
VTTRegion.viewportAnchorY-
Represents the viewport anchor Y offset, as a percentage of the video.
VTTRegion.scroll-
An enum representing how adding a new cue will move existing cues.
Examples
js
const region = new VTTRegion();
region.width = 50; // Use 50% of the video width
region.lines = 4; // Use 4 lines of height.
region.viewportAnchorX = 25; // Have the region start at 25% from the left.
const cue = new VTTCue(2, 3, "Cool text to be displayed");
cue.region = region; // This cue will be drawn only within this region.
Specifications
| Specification |
|---|
| WebVTT: The Web Video Text Tracks Format # the-vttregion-interface |
Browser compatibility
| desktop | mobile | |||||||||||
|---|---|---|---|---|---|---|---|---|---|---|---|---|
VTTRegion
|
|
|
|
|
|
|
|
|
|
|
|
|
VTTRegion() constructor
|
|
|
|
|
|
|
|
|
|
|
|
|
id
|
|
|
|
|
|
|
|
|
|
|
|
|
lines
|
|
|
|
|
|
|
|
|
|
|
|
|
regionAnchorX
|
|
|
|
|
|
|
|
|
|
|
|
|
regionAnchorY
|
|
|
|
|
|
|
|
|
|
|
|
|
scroll
|
|
|
|
|
|
|
|
|
|
|
|
|
viewportAnchorX
|
|
|
|
|
|
|
|
|
|
|
|
|
viewportAnchorY
|
|
|
|
|
|
|
|
|
|
|
|
|
width
|
|
|
|
|
|
|
|
|
|
|
|
|
Legend
Tip: you can click/tap on a cell for more information.
- Full support
- Full support
- No support
- No support