<video/>
<video/> is a General Operator
component that renders an embedded video.
Attributes and Properties
| Attribute | Type | Values |
|---|---|---|
aspectRatio = "…" | number | |
displayMode = "…" | text | "block" "inline" |
horizontalAlign = "…" | text | "center" "left" "right" |
size = "…" | text | "tiny" "small" "medium" "large" "full" |
source = "…" | text | |
width = "…" | componentSize | |
youtube = "…" | text |
| Property | Type |
|---|---|
$v.aspectRatio | number |
$v.disabled | boolean |
$v.displayMode | text |
$v.duration | number |
$v.fixed | boolean |
$v.fixLocation | boolean |
$v.fractionWatched | number |
$v.hidden | boolean |
$v.horizontalAlign | text |
$v.secondsWatched | number |
$v.size | text |
$v.source | text |
$v.state | text |
$v.time | number |
$v.width | componentSize |
$v.youtube | text |
Example: Default <video/> embed
The video at the youtube website ending in “B7UmUX68KtE”
is embedded into the page with the youtube attribute. Note that only the portion of the url following
the equals sign is required.
Example: Play <video/> when question answered
The video at the youtube website ending in “B7UmUX68KtE”
is triggered to play automatically with a <callAction> when the correct answer is provided.
Example: Give credit based on fraction watched
The student is awarded credit for <answer> v1Credit based on the fractionWatched property
of the named <video/> component. This “answer” is submitted automatically
with a <callAction> employing the submitAnswer action.
Attribute Example: width
The width attribute specifies the absolute width of the video. Doenet determines
the size category that corresponds to that width and sizes the video accordingly.
Attribute Example: size
The size attribute specifies one of 5 size categories for the <video/>: tiny, small, medium, large, or full.
Attribute Example: aspectRatio
The aspectRatio attribute allows for customization of the video embed’s default proportions.
Attribute Example: displayMode
The displayMode attribute affects how the <video/> is positioned on screen. The default mode is “block”, which renders the video centered on screen. The available modes are inline, and block.
Attribute Example: horizontalAlign
The horizontalAlign attribute specifies the horizontal position on-screen for the
default block-mode style video. Valid values are left, center, and right, with a default of center.
Attribute Example: youtube
The video at https://www.youtube.com/watch?v=B7UmUX68KtE is embedded into the page with the youtube attribute. Note that only the portion of the url following the equals sign is required.
Action Example: playVideo
The playVideo action can be triggered with a <callAction> component.
Action Example: pauseVideo
The pauseVideo action can be triggered with a <callAction> component.
Property Example: Attributes as properties
The above listed <video/> attributes are also accessible as properties.
Property Example: Properties related to view statistics
The <video/> component has several properties related to viewing behavior as shown above. The secondsWatched and fractionWatched properties are only updated once the <video/> has been paused once.