操做相关

在视频中央显示播放按钮

styled-components：

const ControlCenter = styled.img`
  position: absolute;　　//设置绝对位置
  left: 50%;
  top: 50%;　　//把图标放在距离左/上50%的位置
  margin-left: -20px;
  margin-top: -20px;　　//移动图标自身大小一半的距离，令它居中
  width: 40px;
  height: 40px;
`;

JSX：

<div style={{position:'relative'}}>　　//为内部设置相对位置
    <video />
    <ControlCenter src={ImgPlay} />
</div>

效果：

<video> 的一些属性

 点击视频时不显示聚焦的边框

outline: none;

设置视频预加载

preload="none"

<video> controls的一些用法

经过controlslist改变要显示的控件

nodownload 隐藏下载控件

nofullscreen 隐藏全屏控件

noremoteplayback 隐藏remote playback control

示例：

<video controls controlslist="nodownload" id="video" src=""></video>

隐藏下载选项、contorl显示等

播放视频时相关控制按钮的css类（支持基于webkit内核的Chrome浏览器）

隐藏画中画选项

video[0]['disablePictureInPicture'] = true;

onseeking 事件

在用户开始从新定位视频/音频时触发。在这里被用来解决移动进度条后自动暂停的问题……记得在JSX里不要搞错大小写！

<video onSeeking="myFunction()">

几个绑定函数

需求：

①暂停播放时显示播放按钮、点击播放按钮时开始播放

②仅当开始播放时显示contorl控件

③当一个视频开始播放，其余视频暂停播放

state：

state = {
    playingIndex:null,
}

绑定函数：

handleClick = (index) => {
  this.setState({
    playingIndex: index,
  })
  const videos = document.getElementsByTagName('video');
  videos[index].play();
}

handlePause = (index) => {
  if (this.state.playingIndex === index)
    this.setState({
      playingIndex: null,
    })
}

handlePlay = (index) => {
  this.setState({
    playingIndex: index,
  })
  const videos = document.getElementsByTagName('video');
  videos[index].disablePictureInPicture = true;
  for (let j = 0; j <= videos.length - 1; j += 1 ) {　　//其余视频暂停播放
    if (j !== index) videos[j].pause();
  }
}

render()：

VIDEO_ITEM.map((item,index) => (
  <div style={{position:'relative', margin: '0px 0px 40px 0px'}}>
    <video
      controls={this.state.playingIndex === index} 　　//仅当开始播放时显示contorl控件
      onPlay={()=>this.handlePlay(index)}
      onPause={()=>this.handlePause(index)} />
    {
      this.state.playingIndex !== index &&
        <ControlCenter onClick={()=>this.handleClick(index)} />
    }
  </div>
))

禁止在播放器上右键

在<video>之上的<container>内：

onContextMenu={this.handleRightClick}

handleRightClick：

handleRightClick = (e) => {
  if (e.button === 2) {　　//0为左键，1为中键，2为右键
    e.preventDefault();　　//不要执行与事件关联的默认动做
    e.returnValue = false;　　//同上，已被废弃
    return false;
  }
  return true;
}

一些参考

视频标签 video的一些特殊属性详解

<video>，<audio>