iis服务器助手广告广告
返回顶部
首页 > 资讯 > 前端开发 > JavaScript >React中使用react-player播放视频或直播的方法
  • 617
分享到

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

2024-04-02 19:04:59 617人浏览 独家记忆
摘要

业务中需要播放视频,寻来寻去,找到了React-player 初次点击,甚是眼熟,思来想去,竟是钉钉同款 如果使用react框架 先安装 npm install --save vid

业务中需要播放视频,寻来寻去,找到了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播放视频或直播内容请搜索编程网以前的文章或继续浏览下面的相关文章希望大家以后多多支持编程网!

--结束END--

本文标题: React中使用react-player播放视频或直播的方法

本文链接: https://www.lsjlt.com/news/163542.html(转载时请注明来源链接)

有问题或投稿请发送至: 邮箱/279061341@qq.com    QQ/279061341

本篇文章演示代码以及资料文档资料下载

下载Word文档到电脑,方便收藏和打印~

下载Word文档
猜你喜欢
  • React中使用react-player播放视频或直播的方法
    业务中需要播放视频,寻来寻去,找到了react-player 初次点击,甚是眼熟,思来想去,竟是钉钉同款 如果使用react框架 先安装 npm install --save vid...
    99+
    2024-04-02
  • React中使用react-player播放视频或直播的方法是什么
    React中使用react-player播放视频或直播的方法是什么,很多新手对此不是很清楚,为了帮助大家解决这个难题,下面小编将为大家详细讲解,有这方面需求的人可以来学习下,希望你能有所收获。业务中需要播放视频,寻来寻去,找到了react-...
    99+
    2023-06-28
  • react-native封装视频播放器react-native-video的使用
    目录前言react-native-orientation-lockerreact-native-video全屏实现方案(可参考)尾言前言 最近工作业务用到了react-native-...
    99+
    2023-01-31
    react native 视频播放器 react native video
  • react-player实现视频播放与自定义进度条效果
    环境 react.js   ant design pro 4.0 实现效果 代码 import React from 'react' import { Page...
    99+
    2024-04-02
  • react-player如何实现视频播放与自定义进度条效果
    这篇文章将为大家详细讲解有关react-player如何实现视频播放与自定义进度条效果,文章内容质量较高,因此小编分享给大家做个参考,希望大家阅读完这篇文章后对相关知识有一定的了解。环境react.js   ant de...
    99+
    2023-06-28
  • DPlayer.js视频播放插件使用方法
    DPlayer.js视频播放插件简单的使用 主要用到了实现了:视频播放 、监听开始、结束、暂停、播放时间、切换视频 官方文档:http://dplayer.js.org 效果图: ...
    99+
    2024-04-02
  • vue使用vue-video-player插件播放视频的步骤讲解
    目录前言官网文档步骤下载依赖和配置编写页面本人项目播放视频代码实际效果常用回调结语前言 在我的一个项目中,需要进行播放视频,于是进行研究,那么本次也是将我怎么用vue-video-p...
    99+
    2022-12-21
    vue视频播放器插件 vue-video-player播放视频 vue-video-player插件
  • 利用MAC中的QuickTime视频播放器来播放各种媒体视频
      QuickTime 是MAC中的视频播放器,但是很多新手用户并不清楚QuickTime 的使用技巧,或者是仅仅知道一部分。不过别担心,现在小编就为大家讲解一下如何利用 QuickTime 播放程式来播放各种媒体档案。...
    99+
    2023-06-10
    MAC QuickTime 媒体视频 播放器 媒体 视频
  • vue使用vue-video-player无法播放本地视频的问题及解决
    目录使用vue-video-player无法播放本地视频方法使用vue-video-player播放视频及遇到的问题安装引入使用vue-video-player无法播放本地视频 方法...
    99+
    2024-04-02
  • 使用vue-video-player实现直播的方式
    目录一、安装vue-video-player二、使用 vue-video-player课前准备:直播流协议https://www.cnblogs.com/yangchin9/p/14...
    99+
    2024-04-02
  • html无法播放视频的解决方法
    小编给大家分享一下html无法播放视频的解决方法,相信大部分人都还不怎么了解,因此分享这篇文章给大家参考一下,希望大家阅读完这篇文章后大有收获,下面让我们一起去了解一下吧!html无法播放视频的解决办法:首先打开相应的HTML代码文件;然后...
    99+
    2023-06-14
  • 基于HTML5的在线视频播放方法
    本文小编为大家详细介绍“基于HTML5的在线视频播放方法”,内容详细,步骤清晰,细节处理妥当,希望这篇“基于HTML5的在线视频播放方法”文章能帮助大家解决疑惑,下面跟着小编的思路慢慢深入,一起来学习新知识...
    99+
    2024-04-02
  • html5视频不自动播放的解决方法
    小编给大家分享一下html5视频不自动播放的解决方法,希望大家阅读完这篇文章之后都有所收获,下面让我们一起去探讨吧!解决方法:给视频标签video添加“autoplay”属性,autoplay属性规定一旦视...
    99+
    2024-04-02
  • Flutter中视频播放器插件如何使用
    这篇文章主要讲解了“Flutter中视频播放器插件如何使用”,文中的讲解内容简单清晰,易于学习与理解,下面请大家跟着小编的思路慢慢深入,一起来研究和学习“Flutter中视频播放器插件如何使用”吧!创建一个新的视频播放器在使用视频播放器插件...
    99+
    2023-06-29
  • 怎么在Android中使用GSYVideoPlayer播放视频器
    怎么在Android中使用GSYVideoPlayer播放视频器?很多新手对此不是很清楚,为了帮助大家解决这个难题,下面小编将为大家详细讲解,有这方面需求的人可以来学习下,希望你能有所收获。GSYVideoPlayerGSYVideoPla...
    99+
    2023-06-14
  • Android编程实现播放视频的方法示例
    本文实例讲述了Android编程实现播放视频的方法。分享给大家供大家参考,具体如下:播放视频文件其实并不比播放音频文件复杂,主要是使用 VideoView 类来实现的。这个 类将视频的显示和控制集于一身,使得我们仅仅借助它就可以完成一个简易...
    99+
    2023-05-30
    android 播放 视频
  • Python中怎么使用PyQT制作视频播放器
    本篇内容主要讲解“Python中怎么使用PyQT制作视频播放器”,感兴趣的朋友不妨来看看。本文介绍的方法操作简单快捷,实用性强。下面就让小编来带大家学习“Python中怎么使用PyQT制作视频播放器”吧!视频播放器先把已经完成的代码放出来。...
    99+
    2023-06-02
  • python中Pyqt5使用Qlabel标签进行视频播放
    目录一、简介二、基本用法2.1 QLabel控件   2.2 QLabel常用的信号(事件)三、QLabel播放视频 3.1 QTimer3....
    99+
    2024-04-02
  • 如何在HTML5中使用video.js视频播放插件
    本篇文章给大家分享的是有关如何在HTML5中使用video.js视频播放插件,小编觉得挺实用的,因此分享给大家学习,希望大家阅读完这篇文章后可以有所收获,话不多说,跟着小编一起来看看吧。看下默认例子:controls表示控制条,prload...
    99+
    2023-06-09
  • vue中使用h5video标签实现弹窗播放本地视频的方法
    目录1.弹窗的打开关闭2. 本地视频资源路径的引入3. 视频播放完毕自动关闭弹窗4. 视频在弹窗中自适应大小参考h5 < video >标签的用法 在开发过程中主要涉及到...
    99+
    2024-04-02
软考高级职称资格查询
编程网,编程工程师的家园,是目前国内优秀的开源技术社区之一,形成了由开源软件库、代码分享、资讯、协作翻译、讨论区和博客等几大频道内容,为IT开发者提供了一个发现、使用、并交流开源技术的平台。
  • 官方手机版

  • 微信公众号

  • 商务合作