遭遇したいくつかのブラウザ互換性の問題について簡単に説明します

<img class="loadingImage" src="url"/>
.loadingImage{
    幅: 100%;
    高さ: 100%;
    遷移: すべて 1 の緩和;
    オブジェクトフィット: カバー;
  }

<div class="loadingImage"></div>
.loadingImage{
    幅: 100%;
    高さ: 100%;
    背景サイズ: カバー;
    背景の位置: 中央;
    背景画像: url(url);
}

<ビデオクラス="ビデオ"></ビデオ>
。ビデオ {
  幅: 100%;
  高さ: 自動;
  位置: 相対的;
  左: 50%;
  上位: 50%;
  変換: translate(-50%, -50%);
  オブジェクトフィット: カバー;
}

<ビデオクラス="ビデオ"></ビデオ>
。ビデオ {
  幅: 100%;
  高さ: 自動;
  位置: 相対的;
  左: 50%;
  上位: 50%;
  変換: translate(-50%, -50%);
  オブジェクトフィット: 塗りつぶし;
}

<ビデオ id="ビデオ"></ビデオ>
ビデオを document.getElementById('ビデオ') に設定します。
ビデオの準備状態が 4 の場合
    console.log('完了!')
}

関数 checkTransitionEvent() {
  var el = document.createElement('div')
  var 遷移 = {
    '遷移':'遷移終了',
    'OTransition':'oTransitionEnd',
    'MozTransition':'遷移終了',
    'WebkitTransition':'webkitTransitionEnd'
  }

  for(t in transitions){
      if(el.style[t] !== 未定義){
          transitions[t]を返します。
      }
  }
}

サポート（） {
  let support = "onwheel" in document.createElement("div") ? "wheel" : // 最近のブラウザは "wheel" をサポートしています
    document.onmousewheel !== undefined ? "mousewheel" : // Webkit と IE は少なくとも "mousewheel" をサポートしています
    "DOMMouseScroll";
  返品サポート
},

var ホイール距離 = function(evt){
  if (!evt) evt = イベント;
  var w = evt.wheelDelta、d = evt.detail;
  もし（d）{
    if (w) return w/d/40*d>0?1:-1; // オペラ
    そうでない場合は -d/3 を返します。 // Firefox; TODO: OS X では /3 を実行しないでください。
  } else return w/120; // IE/Safari/Chrome TODO: Chrome OS X の場合は /3
};

var ホイール方向 = function(evt){
  if (!evt) evt = イベント;
  戻り値 (evt.detail<0) ? 1 : (evt.wheelDelta>0) ? 1 : -1;
};

cancelAnimationFrame = window.cancelAnimationFrame とします。 
  || window.mozCancelAnimationFrame 
  || 関数(id) { clearTimeout(id) };
requestAnimationFrame = window.requestAnimationFrame とします。 
  || window.mozRequestAnimationFrame || window.webkitRequestAnimationFrame 
  || window.msRequestAnimationFrame
  || 関数 (コールバック) { return setTimeout(コールバック, 1000 / 60) };