ビデオのフォントが素晴らしいアイコンがクリックしても機能しないのはなぜですか？

まず、HTMLstyle="..."属性をCSSファイルに配置するか、styleタグの間に配置します。

<link type="text/css" rel="stylesheet" href="https://use.fontawesome.com/releases/v5.8.1/css/all.css" />
<style type="text/css" media="all">
  /* NOTE: instead of using "<br />" use "margin-bottom" instead */
  video {width: 1000px; margin-bottom: 20px}
  i.fas {font-size: 36px}
</style>

注：linkとstyle要素に行くべきhead要素とintegrity＆crossorigin属性は必要ありませんので、私はそれらを削除しました。

次に、videoタグはフォームに入れられることは想定されていません。ビデオタグとそれに付随するbuttonタグを別の（セマンティック）コンテナに移動します。たとえばsection、次のようになります。

<p>Here is our dresses in 2019</p>
<section class="video-container">
  <video src="dresses fashion.mp4" id="mavideo"></video> 
  <button><i class="fas fa-play"></i></button>
  <button><i class="fas fa-pause"></i></button>
  <button><i class="fas fa-stop"></i></button>
  <button><i class="fas fa-caret-left"></i></button>
  <button><i class="fas fa-caret-right"></i></button>
</section>

ソース：dresses fashion.mp4はdresses_fashion.mp4、つまり、スペースの代わりにアンダースコアを使用する必要があります。これにより、これが実際にはファイルであり、のようなディレクトリ内のファイルではないことを簡単に識別できますdresses/fashion.mp4。

第三に、videoタグを次のように変更してみてください。

<video controls="true">
  <source src="path/to/video_name.mp4" type="video/mp4" />
  <source src="path/to/video_name.ogg" type="video/ogg" />
  <p class="fallback">Your browser does not support HTML5 videos.</p>
</video> 

最後に、JavaScriptイベントをHTMLからJavaScriptに移動します。

// select the video element
var lecture = document.querySelector("#mavideo");

// play the video
document.querySelector(".fa-play").addEventListener("click", function() {
  lecture.play();
});

// pause the video
document.querySelector(".fa-pause").addEventListener("click", function() {
  lecture.pause();
});

// stop the video
document.querySelector(".fa-stop").addEventListener("click", function() {
  lecture.pause();
  lecture.currentTime=0;
});

// skip backwards by 10 seconds
document.querySelector(".fa-caret-left").addEventListener("click", function() {
  if(lecture.currentTime < (lecture.duration - 11)) {
    lecture.currentTime += 10;
  }
});

// skip forwards by 10 seconds
document.querySelector(".fa-caret-right").addEventListener("click", function() {
  if(lecture.currentTime > 10) {
    lecture.currentTime -= 10;
  }
});

注：のdocument.getElementsByClassName("...")[0]代わりに使用することもできますdocument.querySelector。

注：addEventListenerメソッドを呼び出す代わりに、onclickプロパティをハンドラー関数に設定できます。

幸運を。