操做相關

在視頻中央顯示播放按鈕

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>