---
title: Simple Usage
order: 1
---

本 Demo 演示一行文字的用法。

```jsx
import React, { Component, useRef, useEffect, useState } from 'react';
import ReactDOM from 'react-dom';
import VideoPlayer from 'iotx-videoplayer';

import '@alifd/next/index.css';

const App = () => {
  const $ref = useRef();
  const [visible, setVisible] = useState(true);

  const play = () => {
    $ref.current.play()
  }

  const pause = () => {
    $ref.current.pause()
  }

  const change = () => {
    setVisible(!visible)
  }
    return (
      <div>
      {
        visible && (

          <VideoPlayer
            getSource={() => Promise.resolve({ url: '//cloud.video.taobao.com/play/u/765956727/p/2/e/6/t/1/50006454678.mp4' })}
            autoplay={false}
            isLive={false}
            // allowPtzControl
            // allowAudioBroadcast
            muted={true}
          />
        )
      }
      </div>
    );
}

ReactDOM.render((
  <App />
), mountNode);
```