javascript - 为什么我的超赞字体视频图标在单击时不起作用？

Question

以下代码为视频控件(例如播放、停止、暂停等)使用了超棒的字体图标，但是，当我运行以下代码时，它没有按预期工作。

var lecteur = document.getElementById("mavideo");

function lecture() {
  lecteur.play();
}
function pause() {
  lecteur.pause();
}
function stop() {
  lecteur.pause();
  lecteur.currentTime = 0;
}
function avancer() {
  lecteur.currentTime += 10;
}
function reculer() {
  lecteur.currentTime -= 10;
}

<link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.8.1/css/all.css" integrity="sha384-50oBUHEmvpQ+1lW4y57PTFmhCaXp0ML5d60M1M7uH2+nqUivzIebhndOJK28anvf" crossorigin="anonymous">

<p>Here is our dresses in 2019</p>
<form>
  <video src="dresses fashion.mp4" width="1000" id="mavideo" > </video> 
  <br />
  <button onclick="lecture()"><i class="fas fa-play" style="font-size:36px;"></i> </button>
  <button onclick="pause()"><i class="fas fa-pause" style="font-size:36px;"></i> </button>
  <button  onclick="stop()"><i class="fas fa-stop" style="font-size:36px;"> </i> </button>
  <button onclick="reculer()"><i class="fas fa-caret-left" style="font-size:36px;"></i> </button>
  <button onclick="avancer()"><i class="fas fa-caret-right" style="font-size:36px;"></i></button>
</form>

我做错了什么？

Answer 1

试试这段代码

<link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.8.1/css/all.css" integrity="sha384-50oBUHEmvpQ+1lW4y57PTFmhCaXp0ML5d60M1M7uH2+nqUivzIebhndOJK28anvf" crossorigin="anonymous">

<p> Here is our dresses in 2019</p>
<form>
  <video src="dresses fashion.mp4" width="1000" type="video/mp4" id="mavideo" > </video> 
  <br>
  <button onclick="lecture()"><i class="fas fa-play" style="font-size:36px;"></i> </button>
  <button onclick="pause()"><i class="fas fa-pause" style="font-size:36px;"></i> </button>
  <button  onclick="stop()"><i class="fas fa-stop" style="font-size:36px;"> </i> </button>
  <button onclick="reculer()"><i class="fas fa-caret-left" style="font-size:36px;"></i> </button>
  <button onclick="avancer()"><i class="fas fa-caret-right" style="font-size:36px;"></i></button>
</form>

<script type="text/javascript">
var lecteur = document.getElementById("mavideo");

function lecture(){
  lecteur.play();
}

function pause(){
    lecteur.pause();
}

function stop(){
  lecteur.pause();
  lecteur.currentTime=0;
}

function avancer(){
  lecteur.currentTime+=10;
}

function reculer(){
  lecteur.currentTime-=10;
}
</script>