沒有動手實操就不是你的知識！

需要日后留意的知識點：

1. 組件首字母 大寫 ！

2. Scss同樣可以使用 import ，在項目中通常這樣使用：通過一個scss文件用來作為全局的css樣式引入，這樣就不需要每一個樣式都引入一遍看著麻煩，例如：

@charset "UTF-8";

@import
  "mixin",
  "variable",
  "base/reset",
  "base/icon",
  "component/base64",
  "component/topbar",
  "component/navigator",
  "component/footer",
  "component/login",
  "views/lucky",
  "views/introducation",
  "views/a"

3. video標簽有話說，自身集合許多的接口、方法；有需要點擊參看

4. 蒙層使用 position:fixed——這個方法可以直接讓蒙層脫離文檔流，這樣寬高的100%就是相對屏幕。

5. React 的 refs 相關問題，目前講不明白，因為我也一知半解。。。（9月1號會寫一篇文檔專門講，先立FLAG！）

下面是我實現的方法：

Scss部分：

.litleCoverStyle{
  width:200px;
  height:133px;
  position: absolute;
  top: 100px;
  right: 400px;
  background: #000;
  opacity: .25;
}

.litleIcon{
  width: 50px;
  border-radius: 50%;
  background: #fff;
  top: 50%;
  left: 50%;
  position: absolute;
  margin-top: -25px;
  margin-left: -25px
}

.btnPic{
  position: absolute;
  top: 100px;
  right: 400px;
  width: 200px;
}

.videos{
    width: 624px;
    height: 368px;
    position:absolute;
    top:400px;
  }

.videoCover{
    width: 624px;
    height: 368px;
    position:absolute;
    top:0px;
    background:#000;
    opacity: .25;
    z-index: 998;
  }


.screenCover{
  background: #000;
  opacity: .25;
  position: fixed;
  top: 0;
  bottom: 0;
  left: 0;
  right: 0;
}
.cancel{
  width: 30px;
  position: absolute;
  right: 10px;
  top: 10px;
  z-index: 999
}

jsx部分：

class VideoPlay extends React.Component{
  constructor(props){
    super(props)

    this.hide = {
      display: "none",
      opacity: 0
    }

    this.show = {
      display: "block",
    }

    this.state = {

      videoOpen: this.hide,

      videoCover: this.show
    }

  }

  handleOpen(e){
    this.setState({
      videoOpen: this.show,
    })
  }

  handleVideoPlay(e){
    this.setState({
      videoCover: this.hide
    })
    this.video.play()
  }

  handleVideoCancel(e){
    this.setState({
      videoOpen: this.hide,
      videoCover: this.show
    })
    this.video.pause()
    this.video.load()
  }
  render(){
    return(
      
      <div>
        {/* 按鈕部分： */}
        <div className="videoBtn" onClick={this.handleOpen.bind(this)}>
          ![](按鈕視頻圖片)
          <div className="litleCoverStyle">
            ![](播放圖標)
          </div>
        </div>

        {/* 視頻部分： */}
        <div className="videos" style={this.state.videoOpen}>
          <div className="screenCover"  onClick={this.handleVideoCancel.bind(this)} ></div> 
          ![](右上角那個X)

          <div className="videoCover" style={this.state.videoCover} onClick={this.handleVideoPlay.bind(this)}>
            ![](播放圖標)
          </div>
          <video ref={video => this.video = video} src="http://hd.hclzx.cn/video/ad.mp4" controls="controls">ds</video>
        </div>
      </div>
    )
  }
}

點擊查看效果——這是僅做測試網站，公司官網是www.hclzx.com，歡迎登陸注冊哦！

THE END