@nutui/nutui-react/dist/es/packages/video/video.js

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

import { _ as _object_spread } from "@swc/helpers/_/_object_spread";
import { _ as _object_spread_props } from "@swc/helpers/_/_object_spread_props";
import { _ as _object_without_properties } from "@swc/helpers/_/_object_without_properties";
import React, { useEffect, useRef } from "react";
import classNames from "classnames";
import { ComponentDefaults } from "../../utils/typings";
var defaultProps = _object_spread_props(_object_spread({}, ComponentDefaults), {
    source: {
        type: {},
        src: ''
    },
    options: {
        controls: true,
        muted: false,
        autoplay: false,
        poster: '',
        playsinline: false,
        loop: false
    }
});
var classPrefix = "nut-video";
export var Video = /*#__PURE__*/ React.forwardRef(function(props, ref) {
    var _ref = _object_spread({}, defaultProps, props), children = _ref.children, source = _ref.source, options = _ref.options, className = _ref.className, onPlay = _ref.onPlay, onPause = _ref.onPause, onPlayEnd = _ref.onPlayEnd, restProps = _object_without_properties(_ref, [
        "children",
        "source",
        "options",
        "className",
        "onPlay",
        "onPause",
        "onPlayEnd"
    ]);
    var rootRef = useRef(null);
    var classes = classNames(classPrefix, className);
    useEffect(function() {
        init();
    }, []);
    var init = function() {
        if (rootRef.current) {
            var videoRef = rootRef.current;
            if (options.autoplay) {
                setTimeout(function() {
                    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', function() {
                onPlay && onPlay(videoRef);
            });
            videoRef.addEventListener('pause', function() {
                onPause && onPause(videoRef);
            });
            videoRef.addEventListener('ended', function() {
                videoRef.currentTime = 0;
                onPlayEnd && onPlayEnd(videoRef);
            });
        }
    };
    var pause = function() {
        var _rootRef_current;
        rootRef === null || rootRef === void 0 ? void 0 : (_rootRef_current = rootRef.current) === null || _rootRef_current === void 0 ? void 0 : _rootRef_current.pause();
    };
    var play = function() {
        var _rootRef_current;
        rootRef === null || rootRef === void 0 ? void 0 : (_rootRef_current = rootRef.current) === null || _rootRef_current === void 0 ? void 0 : _rootRef_current.play();
    };
    React.useImperativeHandle(ref, function() {
        return {
            pause: pause,
            play: play
        };
    });
    return /*#__PURE__*/ React.createElement("div", _object_spread({
        className: classes
    }, restProps), /*#__PURE__*/ React.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
    }, /*#__PURE__*/ React.createElement("source", {
        src: source.src,
        type: source.type
    }), /*#__PURE__*/ React.createElement("track", {
        kind: "captions"
    })));
});
Video.displayName = 'NutVideo';