## 全景视频

### 示例

```tsx
import React, { useMemo, useRef, useState, useEffect } from "react";
import { Krpano, VideoScene, Events, videoSceneModel } from "@dage/krpano";
import { message } from "antd";
import classNames from "classNames";
import { observer } from "mobx-react";
import { CSSTransition } from "react-transition-group";
import "./index.less";

export default observer(() => {
  const timer = useRef(0);
  const [playIconVisible, setPlayIconVisible] = useState(false);

  const autoHidePlayIcon = () => {
    timer.current && clearTimeout(timer.current);
    timer.current = setTimeout(() => {
      setPlayIconVisible(false);
    }, 3000);
  };

  const togglePause = () => {
    if (videoSceneModel.playing) {
      videoSceneModel.pause();
    } else {
      videoSceneModel.play();
    }

    autoHidePlayIcon();
  };

  useEffect(() => {
    if (
      !window.ReactKrpanoActionProxy?.krpanoRenderer?.device.panovideosupport
    ) {
      // 可以通过 panovideosupport 判断浏览器是否支持全景视频
      message.error(
        "Sorry, but panoramic videos are not supported by your current browser!"
      );
    }

    videoSceneModel.event.on("Event.videoScene.ready", () => {
      message.success("视频准备就绪");
    });
  }, []);

  return (
    <div className="demo">
      <Krpano
        className="krpano"
        currentScene="videoPano"
        littlePlanetIntro={true}
        passQueryParameters={true}
      >
        <Events
          name="videoEvent"
          onClick={() => {
            setPlayIconVisible((pre) => !pre);
            autoHidePlayIcon();
          }}
        />

        <VideoScene
          name="videoPano"
          videointerfaceXmlUrl="./krpano/1.21/skin/videointerface.xml"
          videoplayerUrl="./krpano/1.21/plugins/videoplayer.js"
          sourceList={[
            {
              res: "1920x960",
              url: "./krpano/video/video-1920x960.mp4",
              poster: "./krpano/video/video-1920x960-poster.jpg",
            },
            {
              res: "1024x512",
              url: "./krpano/video/video-1024x512.mp4",
              poster: "./krpano/video/video-1024x512-poster.jpg",
            },
          ]}
          playRes="1920x960"
          onVisibility={() => {
            if (document.visibilityState === "visible") {
              setPlayIconVisible(true);
              autoHidePlayIcon();
            }
          }}
        />
      </Krpano>

      <CSSTransition timeout={200} in={playIconVisible} unmountOnExit={true}>
        {
          <div className="transition">
            <div
              className={classNames("play-icon", {
                pause: videoSceneModel.playing,
              })}
              onClick={togglePause}
            />
          </div>
        }
      </CSSTransition>
    </div>
  );
});
```

### API

<API hideTitle exports='["VideoScene"]' src='@dage/krpano/index.d.ts'></API>

### VideoSceneModel

| Name    | Description | Type                        | Default    |
| ------- | ----------- | --------------------------- | ---------- |
| event   | 事件        | [EventBus](/utils/eventbus) | `EventBus` |
| playing | 播放中      | `Boolean`                   | `true`     |
| play    | 播放视频    | `() => void`                | --         |
| pause   | 暂停视频    | `() => void`                | --         |

### EventMapper

| Name                      | Description  | Type                      |
| ------------------------- | ------------ | ------------------------- |
| Event.videoScene.ready    | 视频准备就绪 | `() => void`              |
| Event.videoScene.play     | 视频开始播放 | `() => void`              |
| Event.videoScene.paused   | 视频暂停播放 | `() => void`              |
| Event.videoScene.complete | 视频播放完成 | `() => void`              |
| Event.videoScene.error    | 视频发生错误 | `(error: string) => void` |
