dmeo1.tsx

// @ts-ignore
import React, { useRef, useEffect } from 'react';
import Video from '../index';

const Demo1 = (props) => {
  const jessibuca = useRef(null);

  let JessibucaObj = {
    operateBtns: {
      // fullscreen: false,
      screenshot: false,
    },
    loadingText: '演示视频加载中',
    decoder: '/JessibucaVideo/decoder.js',
  };
  // 若是在子应用中，则需加上子应用名称，且兼容基座
  // 如下：
  // let _url = '/civ_energy/JessibucaVideo/decoder.js'
  // let JessibucaObj = {
  //   decoder: window.__POWERED_BY_QIANKUN__ ? '/civbase' + _url : _url
  // }
  let VideoInfo = {
    key: '1CEB209F-8BC7-44B5-9F6B-3D8FCB855E76',
    dataRate: `/2`,
    fullUrl: 'ws://172.16.19.19:8080/jessica/1CEB209F-8BC7-44B5-9F6B-3D8FCB855E76',
    useFullUrl: true,
    cameraName: `摄像头s8`,
  };

  useEffect(() => {
    // 事件 ，返回视频信息
    jessibuca.current.on('videoInfo', function (data) {
      console.log('width:', data.width, 'height:', data.width);
    });

    // 事件 ，播放视频之后的回调
    jessibuca.current.on('play', function (data) {
      console.log('play:', jessibuca);
    });

    // 事件 ，暂停视频之后的回调
    jessibuca.current.on('pause', function (data) {
      console.log('pause:', data);
    });

    // ******
    // 其他事件需查看在线文档
    // ******
  }, []);

  const stopVideo = () => {
    jessibuca.current.pause();
  };

  const startVideo = () => {
    if (jessibuca && jessibuca.current) {
      jessibuca.current.play();
      // console.log(jessibuca.current.isPlaying());
    }
  };
  const testVideo = () => {
    // console.log(jessibuca.current.isPlaying());
  };

  const destroyVideo = () => {
    jessibuca.current.destroy();
  };
  return (
    <div>
      <button onClick={stopVideo}>暂停</button>
      <button onClick={startVideo}>开始</button>
      <button onClick={testVideo}>测试</button>
      <button onClick={destroyVideo}>销毁</button>
      <Video {...{ JessibucaObj: JessibucaObj, VideoInfo: VideoInfo }} ref={jessibuca} />
    </div>
  );
};

export default Demo1;