The VTTRegion
interface—part of the API for handling WebVTT (text tracks on media presentations)—describes a portion of the video to render a VTTCue
onto.
Constructor
VTTRegion()
- Returns a newly created
VTTRegion
object.
Properties
VTTRegion.id
- A
DOMString
that identifies the region. VTTRegion.width
- A
double
representing the width of the region, as a percentage of the video. VTTRegion.lines
- A
double
representing the height of the region, in number of lines. VTTRegion.regionAnchorX
- A
double
representing the region anchor X offset, as a percentage of the region. VTTRegion.regionAnchorY
- A
double
representing the region anchor Y offset, as a percentage of the region. VTTRegion.viewportAnchorX
- A
double
representing the viewport anchor X offset, as a percentage of the video. VTTRegion.viewportAnchorY
- A
double
representing the viewport anchor Y offset, as a percentage of the video. VTTRegion.scroll
- An enum representing how adding new cues will move existing cues.
Examples
var 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. var cue = new VTTCue(2, 3, 'Cool text to be displayed'); cue.region = region; // This cue will be drawn only within this region.
Specifications
Specification | Status | Comment |
---|---|---|
WebVTT: The Web Video Text Tracks Format | Candidate Recommendation |
Browser compatibility
The compatibility table on this page is generated from structured data. If you'd like to contribute to the data, please check out https://github.com/mdn/browser-compat-data and send us a pull request.
No compatibility data found. Please contribute data for "api.VTTRegion" (depth: 1) to the MDN compatibility data repository.