import
'./myVideo.css'
;
export
default
class
VideoPlayer
extends
React
.
Component
{
componentDidMount
(
)
{
this
.
props
=
{
autoplay
:
true
,
controls
:
true
,
sources
:
[
{
src
:
this
.
props
.
src
,
type
:
'application/x-mpegURL'
this
.
player
=
videojs
(
this
.
videoNode
,
this
.
props
,
function
onPlayerReady
(
)
{
console
.
log
(
'onPlayerReady'
,
this
)
;
}
)
;
this
.
player
.
play
(
)
;
componentWillUnmount
(
)
{
if
(
this
.
player
)
{
this
.
player
.
dispose
(
)
;
render
(
)
{
return
(
<
div data
-
vjs
-
player
>
<
video ref
=
{
node
=>
this
.
videoNode
=
node
}
className
=
"video-js vjs-default-skin video"
autoplay
=
"autoplay"
>
<
/
video
>
<
/
div
>
<
/
div
>
myVideo.css
.video{
width: 25%;
float: left;
.BigVideo{
width: 100%;
height: 500px;
这里主要写的是使用方法
import VideoPlayer from 'component/VideoPlayer/VideoPlayer';
import 'video.js/dist/video-js.min.css';
render() {
return (
<VideoPlayer src={this.state.videoUrl} ></VideoPlayer>
videojs官方文档
在交互式监视模式下启动测试运行程序。 有关更多信息，请参见关于的部分。
yarn build
构建生产到应用程序build文件夹。 它在生产模式下正确捆绑了React，并优化了构建以获得最佳性能。
最小化构建，文件名包含哈希。 您的应用已准备好进行部署！
有关更多信息，请参见有关的部分。
yarn eject
注意：这是单向操作。 eject ，您将无法返回！
如果您对构建工具和配置选择不满意，则可以随时eject 。 此命令将从项目中删除单个构建依赖项。
相反，它将所有配置文件和传递依赖项（webpack，Babel，ES
现在你的React项目中就可以使用VideoPlayer组件来实现FLV视频小屏播放，并且具备快进、快退和暂停播放功能。请确保将"your-video-url.flv"替换为你的FLV视频URL。url: 'your-video-url.flv', // 替换为你的FLV视频URL。2. 创建一个新的组件：在React项目中创建一个新的组件，比如VideoPlayer.js。<h1>FLV视频小屏播放</h1>
$ yarn add intro.js-react
确保已安装 ＆ Intro.js （它们是对等依赖项），并且Intro.js CSS定义已正确加载到您的项目中。
通常如下所示：
import 'intro.js/introjs.css' ;
两个组件可用于步骤和提示：
import { Steps , Hints } from 'intro.js-react' ;
注意：在此包装器中，步骤索引始终从0开始，而不是Intro.js中的1。
基本示例：
< Steps
React桌面
（以前称为node-webkit）是基于Chromium和Node.js的应用程序运行时，可让您直接从DOM调用Node.js模块，并提供了一种使用所有Web技术编写本机应用程序的新方式。
是一个用于构建用户界面JavaScript库。
是JavaScript应用程序的可预测状态容器。
是用于编写下一代JavaScript的编译器。
是围绕Node.js fs.watch和fs.watchFile的简洁包装。
react 中使用 video.js 播放 hls(m3u8)格式的视频
简介：公司业务需求，由于后端把 mp4 视频转码成 m3u8 视频供手机端播放，导致后台系统播放不了 m3u8 格式的视频(原来是直接用的原生 video 标签播放)。
项目主要依赖：（先安装，步骤略）
create-react-app：3.0.0
"react": "^16.11.0",
"react-rout...
一、videojs简介
我们项目中用的是angular开发的手机H5的app，今天有一个需求是js播放视频功能，就上网搜索了一下，找到了videoJs，Video.js是一款web视频播放器，支持html5和flash两种播放方式。
二、videojs初始化
video.js有两种初始化方式，一种是在video的html标签之中，一种是使用js来进行初始化。两种都需先引入video.js和video-js.css。建议直接下载到项目中进行引用。
<link href="//vjs.zencd
最近用react做的一个毕业展网站，需要播放老师寄语视频，之前做的一些pc端网站都用了videojs，想着react里面适不适用，问了一下度娘，发现也有使用，遂尝试继续使用videojs，可以正常使用
首先安装videojs
npm install video.js
页面中引入js和css
import videojs from 'video.js';
import 'video.js/dist/video-js.css';
html页面
<video-js id="myVideo" width
使用方法:
import React, { useEffect, useRef, useState } from 'react';
import videojs from 'video.js';
const videoDetailsDom = useRef();
const [flage,setFlage] = useState(true) //安卓12控制声音自动播放
let optiones
