<video/>
<video/> is a General Operator
component that renders an embedded video.
Attributes and Properties
Attributes for <video>
Other (7)
number. Default value: 16 / 9. Aspect ratio (width / height) for the video player.
keyword. How to size the video player.
| Value | Description |
|---|---|
block (default) | Display as a block element on its own line. |
inline | Render inline with surrounding text. |
keyword. Horizontal alignment of the video within its container.
| Value | Description |
|---|---|
center (default) | Center the video horizontally. |
left | Align the video to the left edge. |
right | Align the video to the right edge. |
keyword. Named size preset for the video player.
| Value | Description |
|---|---|
tiny | About 1/12 the full width. |
small | About 30% of the full width. |
medium | About half the full width. |
large | About 70% of the full width. |
full (default) | The full available width. |
sourcetext. URL of the video source.
componentSize. Explicit width of the video player (overrides size).
text. YouTube video ID to embed.
Common to all components (9)
copyreference. Create an independent copy of another component by reference. Enter a references a $name.
disabledboolean. Default value: false. Whether this component is disabled and cannot be interacted with.
extendreference. Extend another component by reference, inheriting its children and attributes. Enter a reference as $name.
fixedboolean. Default value: false. Whether this component's value is fixed and cannot be modified.
fixLocationboolean. Default value: false. Whether this component's location is fixed (preventing it from being moved while still allowing other modifications).
hideboolean. Default value: false. Whether to hide this component from the rendered output.
isResponseboolean. Default value: false. Whether this component is treated as a response for the purposes of assessment.
nametext. The name used to reference this component from elsewhere in the document.
styleNumberinteger. Default value: 1. The style number used to select this component's visual styling from the available style definitions.
Properties for <video name="v">
Other (17)
$v.aspectRationumber. The aspect ratio (width / height) of the video player.
$v.disabledboolean. Whether this component is disabled and cannot be interacted with.
$v.displayModetext. How to size the video player.
$v.durationnumber. The total duration of the video in seconds.
$v.fixedboolean. Whether this component's value is fixed and cannot be modified.
$v.fixLocationboolean. Whether this component's location is fixed (preventing it from being moved while still allowing other modifications).
$v.fractionWatchednumber. Fraction of the video the viewer has watched (0 to 1).
$v.horizontalAligntext. Horizontal alignment of the video within its container.
$v.secondsWatchednumber. Total seconds the viewer has watched.
$v.shortDescriptiontext. A short accessibility description of the video.
$v.sizetext. The size of the video player.
$v.sourcetext. URL of the video source.
$v.statetext. The video's current playback state (e.g. playing, paused).
$v.timenumber. The current playback time in seconds.
$v.widthcomponentSize. The display width of the video player.
$v.youtubetext. YouTube video ID to embed.
Common to all components (4)
$v.doenetMLtext. The DoenetML source code that produced this component.
$v.hideboolean. Whether to hide this component from the rendered output.
$v.isResponseboolean. Whether this component is treated as a response for the purposes of assessment.
$v.styleNumberinteger. The style number used to select this component's visual styling from the available style definitions.
Examples
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 Examples
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 Examples
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 Examples
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.