@nutui/nutui-react/dist/esm/Video.js

京东风格的轻量级移动端 React 组件库，支持一套代码生成 H5 和小程序

import { _ as __rest } from "./tslib.es6.js";
import React__default, { useRef, useEffect } from "react";
import classNames from "classnames";
import { C as ComponentDefaults } from "./typings.js";
const defaultProps = Object.assign(Object.assign({}, ComponentDefaults), { source: {
  type: {},
  src: ""
}, options: {
  controls: true,
  muted: false,
  // 默认不是静音
  autoplay: false,
  poster: "",
  playsinline: false,
  loop: false
} });
const classPrefix = `nut-video`;
const Video = (props) => {
  const _a = Object.assign(Object.assign({}, defaultProps), props), { children, source, options, className, onPlay, onPause, onPlayEnd } = _a, restProps = __rest(_a, ["children", "source", "options", "className", "onPlay", "onPause", "onPlayEnd"]);
  const rootRef = useRef(null);
  const classes = classNames(classPrefix, className);
  useEffect(() => {
    init();
  }, []);
  const init = () => {
    if (rootRef.current) {
      const videoRef = rootRef.current;
      if (options.autoplay) {
        setTimeout(() => {
          videoRef.play();
        }, 200);
      }
      if (options.playsinline) {
        videoRef.setAttribute("playsinline", String(options.playsinline));
        videoRef.setAttribute("webkit-playsinline", String(options.playsinline));
        videoRef.setAttribute("x5-video-player-type", "h5-page");
        videoRef.setAttribute("x5-video-player-fullscreen", "false");
      }
      videoRef.addEventListener("play", () => {
        onPlay && onPlay(videoRef);
      });
      videoRef.addEventListener("pause", () => {
        onPause && onPause(videoRef);
      });
      videoRef.addEventListener("ended", () => {
        videoRef.currentTime = 0;
        onPlayEnd && onPlayEnd(videoRef);
      });
    }
  };
  return React__default.createElement(
    "div",
    Object.assign({ className: classes }, restProps),
    React__default.createElement(
      "video",
      { className: "nut-video-player", muted: options.muted, autoPlay: options.autoplay, loop: options.loop, poster: options.poster, controls: options.controls, ref: rootRef, src: source.src },
      React__default.createElement("source", { src: source.src, type: source.type }),
      React__default.createElement("track", { kind: "captions" })
    )
  );
};
Video.displayName = "NutVideo";
export {
  Video as default
};