react搭配h5原生video標籤手寫網頁播放器

前言： 樓主也剛接觸react不久，項目寫的可能也不是很雅緻，只是做了就發出來給有需求的小夥伴參考參考。如果寫的不妥，還請小夥伴指正開導下。

搭建環境

本次開發，主要是用node做項目的依賴管理，同時使用webpack進行打包。請確保運行項目前已安裝這兩樣利器。

項目結構

深坑

整個項目過程還算流暢，唯獨在處理全屏狀態下監聽esc和f11按鍵的時候多花了點時間。網上很多方法我也都參考試了一下，可能是我打開的方式不對，or ？？？。還好功夫不負有心人，終於還是看到的了一種解決方法，下面直接給出方法：

  window.onresize = function(){
    if(!checkFull()){
    //要執行的動作
    } 
  }

function checkFull(){
  var isFull = document.fullscreenEnabled || window.fullScreen || document.webkitIsFullScreen || document.msFullscreenEnabled;

  //to fix : false || undefined == undefined
  if(isFull === undefined) isFull = false;
  return isFull;
}

tips

1. .vscode 目錄是我用的編輯器的配置文件，沒什麼關係，不用管
2. node_modules 目錄下是項目所需要的依賴包
3. src目錄下是項目源碼

項目地址

話不多說，傳送門：https://gitee.com/linxiaofen/react-video