<video/>

<video/> is a General Operator component that renders an embedded video.

Attributes and Properties

Example: Default <video/> embed

<video youtube="B7UmUX68KtE" />

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

<p>What muppet likes to throw pepper? 
  <answer name="ans">
    <choice>Oscar the Grouch</choice>
    <choice>Kermit the Frog</choice>
    <choice credit="1">the Swedish Chef</choice>
  </answer></p>
 
<video name="chefVideo" youtube="B7UmUX68KtE" />
<callAction actionName="playVideo" target="$chefVideo" triggerWhen="$ans.creditAchieved = 1"/>

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

<video name="v1" youtube="49qilPR8Qpc" size="small" aspectRatio="16/9" />
 
<p>Video credit achieved: 
  <number displayDecimals="1">$v1.fractionWatched*100</number>%</p>
 
<answer hide name="v1Credit">
  <award credit="$v1.fractionWatched">
    <when>true</when>
  </award>
</answer>
 
<callAction triggerWith="$v1" target="$v1Credit" actionName="submitAnswer" />

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

<video name="v1" youtube="49qilPR8Qpc" width="300px"/>
<p><c>v1.size</c> = $v1.size</p>
 
<video name="v2" extend="$v1" width="700px"/>
<p><c>v2.size</c> = $v2.size</p>

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

<video name="v1" youtube="49qilPR8Qpc" size="small" aspectRatio="16/9"/>
 
<video extend="$v1" size="small" aspectRatio="9/16"/>

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

<p>A left video</p>  
<video 
  name="v1" 
  youtube="49qilPR8Qpc" 
  displayMode="block" 
  size="small" 
  horizontalAlign="left"
/>
 
<p>A centered video (default)</p>
<video extend="$v1" horizontalAlign="center"/>
 
<p>A right video </p>
<video extend="$v1" horizontalAlign="right"/>

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.