一. 在react中引入
1. 下载视频插件
npm install –save video-react
2. 引入
import { Player } from 'video-react';
import "node_modules/video-react/dist/video-react.css";
3. 调用
<Player ref="player" videoId="video-1">
<source src={this.state.inputVideoUrl}/>
</Player>
二. 插件属性
网址https://video-react.js.org/components/player/
Player
Attributes
Name
Type
default
fluid
bool
true
它始终是100%宽的，通过视频的比率来计算高度。
width
number
视频的宽度值可以是数字或百分比，也可以是自动值。（只有将fluid设置为假），此属性才有效。
height
number
视频的高度值可以是数字或百分比，也可以是自动值。（只有将fluid设置为假），此属性才有效。
src
string
要嵌入的视频的URL。这是可选的，您可以使用播放器块中的< source>元素来指定嵌入的视频。
poster
string
指示海报框显示用户播放或搜索的URL。如果未指定此属性，则直到第一帧可用时才显示任何内容；然后第一帧显示为海报帧。
preload
枚举
none: 指示不应预装视频。
metadata:指示仅获取视频元数据（例如长度）。
auto:指示可以下载整个视频文件，即使用户不希望使用它。
muted
bool
false
指示视频中包含的音频的默认设置。如果设置，音频将被初步沉默。它的默认值为false，意味着音频将在播放视频时播放。
playsInline
bool
false
HTML5视频是否在线播放或使用本机全屏控制器。
aspectRatio
string
auto
纵横比是视频的宽度除以它的高度.
auto ,16:9，4:3
autoPlay
bool
false
如果指定视频可以自动播放，只要它可以这样做，而不停止完成加载数据。
startTime
number
在特定时间搜索视频
Properties
Name
playbackRate
设置或返回视频回放的速度
<Player ref="player">
<source src="https://media.w3.org/2010/05/sintel/trailer_hd.mp4" /> </Player>
// access the player object by ref
// set playbackRate to 2
this.refs.player.playbackRate = 2;
muted
设置或返回视频是否静音
volume
设置或返回视频的音量
videoWidth
返回视频的宽度
videoHeight
返回视频的高度
video
返回视频组件对象
Methods
Name
getState()
获取状态
const { player } = this.refs.player.getState();
console.log(player.currentTime);
// print current time
Play()
开始
Pause()
暂停
Load()
更改视频源并重新加载视频
addTextTrack()
向视频添加新的的文本轨迹
canPType()lay
检查浏览器是否可以播放不同类型的视频：
Seek(time)
按时间（秒）查找视频
forward(seconds)
向前跳多少秒
replay(seconds)
跳回多少秒
toggleFullscreen()
输入或存在全屏
subscribeToStateChange(listener)
Subscribe to the player state changes.
componentDidMount() { // subscribe state change this.refs.player.subscribeToStateChange(this.handleStateChange.bind(this)); } handleStateChange(state, prevState) { // copy player state to this component's state this.setState({ player: state, currentTime: state.currentTime }); }
player
currentSrc
返回当前视频的URL
duration
返回当前视频的长度（以秒为单位）
currentTime
返回视频中的当前播放位置（以秒为单位）
seekingTime
返回视频中的当前查找位置（以秒为单位）
buffered
返回表示视频缓冲区的TimeRanges对象
waiting
返回播放器是否需要缓冲下一帧
seeking
返回用户当前是否正在视频中搜索
paused
返回播放器是否已暂停。
autoPaused
返回玩家是否已被玩家自己暂停
ended
返回视频的播放是否结束
playbackRate
返回视频回放的速度
muted
返回视频是否静音
volume
返回视频的音量
readyState
返回视频的当前就绪状态
networkState
返回视频的当前网络状态
videoWidth
返回视频宽度
videoHeight
返回视频高度
hasStarted
返回视频是否已启动
userActivity
返回用户是否处于活动状态。
isActive
返回玩家是否处于活动状态。
isFullscreen
返回播放器是否处于全屏状态。
videoId
设置id
