react的video播放函数

最新推荐文章于 2022-12-06 11:01:45 发布

原创最新推荐文章于 2022-12-06 11:01:45 发布 · 1k 阅读

0 ·

CC 4.0 BY-SA版权

文章标签：

#react.js #javascript #前端

前端学习专栏收录该内容

6 篇文章

订阅专栏

本文介绍了一个基于React的视频播放组件实现方法，通过自定义的Video类组件，利用video标签实现视频播放功能，并支持动态调用及前端渲染。该组件允许自定义样式、事件处理等，适用于多种应用场景。

react的video播放函数，可在其他.jsx文件中动态调用并渲染在前端界面，主要是对video标签的应用

/*
 * Copyright 2017-2020 The bjw Authors. All rights reserved.
 *
 * Use of this source code is governed by a MIT-style
 * license that can be found in the LICENSE file.
 * 
 * For more information, please visit: https://github.com/tengge1/ShadowEditor
 * You can also visit: https://gitee.com/tengge1/ShadowEditor
 */
import './css/Video.css';
import classNames from 'classnames/bind';
import PropTypes from 'prop-types';

/**
 * 视频查看器
 */
class Video extends React.Component {
    constructor(props) {
        super(props);

        this.handleClick = this.handleClick.bind(this, props.onClick);
        this.handleClickImage = this.handleClickVideo.bind(this);
    }

    render() {
        const {className, style, url} = this.props;

        return <div className={classNames('VideoMark', className)}
                    style={style}
                    onClick={this.handleClick}
        >
            <video src={url}
                   autoPlay={'autoplay'}
                   controls={'controls'}
                   onClick={this.handleClickVideo}
            />
        </div>;
    }

    handleClick(onClick, event) {
        onClick && onClick(event);
    }

    handleClickVideo(event) {
        event.stopPropagation();
    }
}

Video.propTypes = {
    className: PropTypes.string,
    style: PropTypes.object,
    url: PropTypes.string,
    onClick: PropTypes.func
};

Video.defaultProps = {
    className: null,
    style: null,
    url: null,
    onClick: null
};

export default Video;

对应的Video.css文件

.VideoMark {
    position: fixed;
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
    background: rgba(0, 0, 0, 0.8);
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 1300;
}

.VideoMark>video {
    height: 100%;
    max-width: 100%;
}