---
title: 播放控制，设置poster
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 [uuid, setUuid] = useState(null);
  const [getSource, setSource] = useState('https://playtv-live.ifeng.com/live/06OLEGEGM4G_tv1.m3u8')

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

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

  const change = () => {
    setVisible(!visible)
  }

  const reset = () => {
    if (getSource) {
      setSource(undefined)
    } else {
      setSource('https://playtv-live.ifeng.com/live/06OLEGEGM4G_tv1.m3u8')
    }
  }
    return (
      <div>
      {
        visible && (

          <VideoPlayer
            // ref={$ref}
            isLive
            uuid={uuid}
            getSource={() => Promise.resolve({ url: getSource })}
            allowPtzControl
            defaultStep={1}
            autoplay={false}
            muted={true}
            allowAudioBroadcast
            onZoomChange={console.log}
            onRecordSend={console.log}
            onCommand={console.log}
            onInit={(player) => {
              $ref.current = player
              player.on('loaded', () => {
                console.log('load')
                })
              player.on('canplaythrough', function () {
                console.log('canplaythrough')
              });

            }}
            hasSpeed
            onPlaySpeedChange={(rate) => console.log(rate)}
            timeLineGroup={[
              {
                id: '123',
                content: 'adsd',
              },
            ]}
            onAddPreset={(values) => {
              console.log(values);
              return Promise.resolve(1);
            }}
            handleRangeOnChange={console.log}
          />
        )
      }
        <button onClick={play}>play</button>
        <button onClick={pause}>pause</button>
        <button onClick={change}>change visible</button>
        <button onClick={reset}>reset</button>
        <button onClick={() => {setUuid(Math.random())}}>uuid</button>
      </div>
    );
}

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