Skip to content

Latest commit

 

History

History
171 lines (141 loc) · 8.51 KB

Video.md

File metadata and controls

171 lines (141 loc) · 8.51 KB
id title
video
Video

import PlatformTabs from '@theme/PlatformTabs';

​

Description

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

Example

import React from "react";
import { View, Button, Video, Scene, Prism } from "magic-script-components";

const VideoActions = {
  start: "start",
  pause: "pause",
  stop: "stop"
};

export default class MyApp extends React.Component {
  constructor(props) {
    super(props);
    this.state = {
      isLooping: false,
      action: VideoActions.pause,
      volume: 1.0,
      videoPath: require("../../assets/video.mp4")
    };
  }

  onStartPauseClick = () => {
    if (this.state.action === VideoActions.start) {
      this.setState({ action: VideoActions.pause });
    } else {
      this.setState({ action: VideoActions.start });
    }
  }

  onStopClick = () => {
    this.setState({ action: VideoActions.stop });
  }

  createButtonWithAction(action, position) {
    const title = action[0].toUpperCase() + action.substring(1);
    const onClickHandler =
      action === VideoActions.stop ? this.onStopClick : this.onStartPauseClick;
    return (
      <Button
        position={position}
        fontSize={0.1}
        width={0.3}
        height={0.12}
        onClick={onClickHandler}
      >
        {title}
      </Button>
    );
  }

  renderPlayOrPauseButton(position) {
    const { action } = this.state;
    if (action === VideoActions.start) {
      return this.createButtonWithAction(VideoActions.pause, position);
    } else {
      return this.createButtonWithAction(VideoActions.start, position);
    }
  }

  renderStopButton(position) {
    return this.createButtonWithAction(VideoActions.stop, position);
  }

  render() {
    const resolution = [1920, 1080];
    const widthInMeters = 1;
    const size = [
      widthInMeters,
      (resolution[1] * widthInMeters) / resolution[0]
    ];
    return (
      <Scene>
        <Prism size={[1.5, 1.5, 1]} >
          <View name="main-view" anchorPoint={'center-center'} position={this.props.position}>
            <Video
              position={[0, 0.4, 0]}
              looping={this.state.isLooping}
              width={resolution[0]}
              height={resolution[1]}
              screenSize={size}
              path={this.state.videoPath}
              viewMode={"full-area"}
              volume={this.state.volume}
              action={this.state.action}
            />

            {this.renderPlayOrPauseButton([-0.19, 0, 0])}
            {this.renderStopButton([0.19, 0, 0])}
          </View>
        </Prism>
      </Scene>
    );
  }
}

export { ExampleVideo };

Common Events

Common Properties

Create Properties

Name Type Default Value Required Description Lumin Android IOS
width number 512 N The surface resolution width. Supported values are between 1 and 2048. 👍 👍 👍
height number 512 N The surface resolution height. Supported values are between 1 and 2048. 👍 👍 👍
path string n/a Y The 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. 👍 👍 👍
viewMode string full-area N How 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. 👍
screenSize object n/a Y Sets size of the component 👍 👍 👍

Element Properties

Name Type Default Value Description Lumin Android IOS
volume number 1 Sets the volume of the node. The volume range is 0.0 - 1.0. 👍 👍 👍
looping boolean n/a Sets the looping mode of the player. 👍 👍 👍
timedTextPath string n/a Sets the timed text file. 👍 👍
videoUri string n/a Sets 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.
seekTo number n/a Seeks to the specified time position. 👍 👍
action string n/a Sets the current operation: start, stop, pause 👍 👍 👍

viewMode options:

  • full-area
  • left-right

action options:

  • pause
  • start
  • stop

Video EventData

Name Type Description
AffectedNodeId BigInt The ID of the video that was affected.
XPos number This is based on the event type.
YPos number This is based on the event type.
VideoEventType string This 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.