React中使用react-player 播放视频或直播的方法

 更新时间:2022年01月24日 11:00:06   作者:skywa1ker  
这篇文章主要介绍了React中使用react-player 播放视频或直播,本文教大家如何使用react框架及创建实例的代码,本文内容简短给大家介绍的非常详细,需要的朋友可以参考下

业务中需要播放视频,寻来寻去,找到了react-player

初次点击,甚是眼熟,思来想去,竟是钉钉同款

如果使用react框架 先安装

npm install --save video-react react react-dom redux

1.引入video-react以及CSS

css一定不要忘记引用 否则会出现样式丢失和奇奇怪怪的情况 切记

import "video-react/dist/video-react.css";
import { Player, ControlBar } from 'video-react';
video-react提供了很多ControlBar组件 可以查看官方文档进行引用 比如倍速等等

2.创建实例

<Modal
            title="我是title"
            forceRender={true}
            visible={this.state.videoVisible}
            onOk={this.handleCancel}
            onCancel={this.handleCancel}>
            <Player
              ref={player => {
                this.player = player;
              }}
              preload='none'
            >
              <ControlBar autoHide={false} className="my-class" />
              <source src={this.state.source} />
            </Player>
          </Modal>

这里的source src是播放地址,可以动态更改,但一定要在渲染之前加载
其余的方法可以在官网查看文档

补充:react-player一个很好用的直播组件,可以播放视频等等

一个很好用的直播组件,可以播放视频等等

import React from 'react';
import ReactPlayer from 'react-player'
class LiveBroadcast extends React.Component {
    render() {
        return (
            <ReactPlayer
                className='react-player'
                url='....flv'
                width='100%'
                height='100%'
                playing={true}
                controls
            />
        )
    }
}
export default LiveBroadcast

到此这篇关于React中使用react-player 播放视频或直播的文章就介绍到这了,更多相关React播放视频或直播内容请搜索脚本之家以前的文章或继续浏览下面的相关文章希望大家以后多多支持脚本之家!

相关文章

  • react四种组件中DOM样式设置方式详解

    react四种组件中DOM样式设置方式详解

    这篇文章主要介绍了react之四种组件中DOM样式设置方式,通过示例代码给大家介绍的非常详细,对大家的学习或工作具有一定的参考借鉴价值,需要的朋友可以参考下
    2021-10-10
  • ahooks正式发布React Hooks工具库

    ahooks正式发布React Hooks工具库

    这篇文章主要为大家介绍了ahooks正式发布值得拥有的React Hooks工具库使用详解,有需要的朋友可以借鉴参考下,希望能够有所帮助,祝大家多多进步,早日升职加薪
    2022-07-07
  • React 路由传参的几种实现方法

    React 路由传参的几种实现方法

    React中传参方式有很多,通过路由传参的方式也是必不可少的一种,本文主要介绍了React路由传参的几种实现方法,具有一定的参考价值,感兴趣的可以了解一下
    2023-12-12
  • 详解React-Native全球化多语言切换工具库react-native-i18n

    详解React-Native全球化多语言切换工具库react-native-i18n

    这篇文章主要介绍了详解React-Native全球化语言切换工具库react-native-i18n,小编觉得挺不错的,现在分享给大家,也给大家做个参考。一起跟随小编过来看看吧
    2017-11-11
  • React如何实现Vue的watch监听属性

    React如何实现Vue的watch监听属性

    在 Vue 中可以简单地使用 watch 来监听数据的变化,还能获取到改变前的旧值,而在 React 中是没有 watch 的,今天通过本文给大家讲解React实现Vue的watch监听属性的方法,需要的朋友可以参考下
    2023-06-06
  • React Hook之使用State Hook的方法

    React Hook之使用State Hook的方法

    这篇文章主要为大家详细介绍了React使用State Hook的方法,文中示例代码介绍的非常详细,具有一定的参考价值,感兴趣的小伙伴们可以参考一下,希望能够给你带来帮助
    2022-03-03
  • 使用Electron构建React+Webpack桌面应用的方法

    使用Electron构建React+Webpack桌面应用的方法

    本篇文章主要介绍了使用Electron构建React+Webpack桌面应用的方法,小编觉得挺不错的,现在分享给大家,也给大家做个参考。一起跟随小编过来看看吧
    2017-12-12
  • react常见的ts类型实践解析

    react常见的ts类型实践解析

    这篇文章主要为大家介绍了react常见的ts类型实践解析,有需要的朋友可以借鉴参考下,希望能够有所帮助,祝大家多多进步,早日升职加薪
    2023-04-04
  • React中useCallback useMemo使用方法快速精通

    React中useCallback useMemo使用方法快速精通

    在React函数组件中,当组件中的props发生变化时,默认情况下整个组件都会重新渲染。换句话说,如果组件中的任何值更新,整个组件将重新渲染,包括没有更改values/props的函数/组件。在react中,我们可以通过memo,useMemo以及useCallback来防止子组件的rerender
    2023-02-02
  • React Native 使用Fetch发送网络请求的示例代码

    React Native 使用Fetch发送网络请求的示例代码

    本篇文章主要介绍了React Native 使用Fetch发送网络请求的示例代码,具有一定的参考价值,感兴趣的小伙伴们可以参考一下
    2017-12-12

最新评论