Video

Description

The Video component represents a simple 2D rectangle on which video resources can be played.

Example

import React from "react";
import { LinearLayout, Video, Button, Text } from "magic-script-components";
export default class MyApp extends React.Component {
state = {
playEnabled: false,
pauseEnabled: false,
stopEnabled: false,
status: 'Initializing',
action: undefined
}
onPlayHandler = (eventData) => {
this.setState({playEnabled: false, pauseEnabled: true, stopEnabled: true, action: 'start'});
}
onPauseHandler = (eventData) => {
this.setState({playEnabled: true, pauseEnabled: false, stopEnabled: true, action: 'pause'});
}
onStopHandler = (eventData) => {
this.setState({playEnabled: true, pauseEnabled: false, stopEnabled: false, action: 'stop'});
}
onEventHandler = (eventData) => {
console.log(`onEventHandler:`, eventData);
const videoEventType = eventData.VideoEventType;
if ( videoEventType === undefined
|| videoEventType === this.state.status) {
return;
}
if (videoEventType === 'buffering-update') {
this.setState({status: videoEventType});
} else if (videoEventType === 'completion') {
this.setState({playEnabled: true, pauseEnabled: false, stopEnabled: false, status: videoEventType});
} else if (videoEventType === 'error') {
this.setState({status: videoEventType});
this.setState({playEnabled: false, pauseEnabled: false, stopEnabled: false, status: videoEventType});
} else if (videoEventType === 'info') {
this.setState({status: videoEventType});
} else if (videoEventType === 'prepared') {
this.setState({playEnabled: true, pauseEnabled: false, stopEnabled: false, status: videoEventType});
} else if (videoEventType === 'seek-complete') {
this.setState({status: videoEventType});
} else if (videoEventType === 'video-size-changed') {
this.setState({status: videoEventType});
} else {
this.setState({status: 'unknown'});
}
}
render() {
const videoProps = {
videoUri: 'http://url/to/the/video/file',
width: 1920,
height: 1080,
onEvent: this.onEventHandler,
localScale: [0.960, 0.540, 0]
}
if (this.state.action !== undefined) {
videoProps.action = this.state.action;
}
return (
<LinearLayout
key='top-layout'
name='main-view'
defaultItemAlignment="center-left"
defaultItemPadding={[0.03, 0.03, 0.03, 0.03]}
localPosition={[-0.45, 0.45, 0]}
orientation='vertical'
>
<Video key='video' {...videoProps}/>
<LinearLayout
key='buttons-layout'
defaultItemAlignment="center-center"
defaultItemPadding={[0.02, 0.02, 0.02, 0.02]}
orientation='horizontal'
>
<Button key='play' type='icon' iconType="play" height={0.1}
enabled={this.state.playEnabled} onClick={this.onPlayHandler} />
<Button key='pause' type='icon' iconType="pause" height={0.1}
enabled={this.state.pauseEnabled} onClick={this.onPauseHandler}/>
<Button key='stop' type='icon' iconType="stop" height={0.1}
enabled={this.state.stopEnabled} onClick={this.onStopHandler} />
</LinearLayout>
<Text key='status' textSize={0.05} text={`Status: ${this.state.status}`}/>
</LinearLayout>
);
}
}

Common Events

Common Properties

Create Properties

NameTypeDefault ValueDescription
widthnumber512The surface resolution width. Supported values are between 1 and 2048.
heightnumber512The surface resolution height. Supported values are between 1 and 2048.
videoPathstringn/aThe path to the file to play. Preparation for playback begins synchronously after this property is set. The video is not ready to play until a VideoEvent of type VideoEventType 'prepared' is received.
viewModestringfull-areaHow the video is intended to be viewed within the video component. The full-area view mode renders video over the full area for both eyes (monoscopic). The left-right view mode renders video differently per eye (stereoscopic). The default view mode is full-area.

Element Properties

NameTypeDefault ValueDescription
volumenumber1Sets the volume of the node. The volume range is 0.0 - 1.0.
loopingbooleann/aSets the looping mode of the player.
timedTextPathstringn/aSets the timed text file.
videoUristringn/aSets the file URI to play. This is not implemented currently. Preparation for playback begins synchronously after this property is set. The video is not ready to play until a VideoEvent of type VideoEventType 'prepared' is received.
seekTonumbern/aSeeks to the specified time position.
actionstringn/aSets the current operation: start, stop, pause

viewMode options:

  • full-area
  • left-right

action options:

  • pause
  • start
  • stop

Video EventData

NameTypeDescription
AffectedNodeIdBigIntThe ID of the video that was affected.
XPosnumberThis is based on the event type.
YPosnumberThis is based on the event type.
VideoEventTypestringThis is the video event type.

VideoEventType values, XPos & YPos purpose:

  • buffering-update: X is the buffering percent, Y is unused.
  • completion
  • error: X is the type of fatal error, Y is the MediaError code.
  • info: X is the info or warning code, Y is an info code that provides more details.
  • prepared
  • seek-complete
  • video-size-changed: X is width, Y is height.