Javascript 为什么我的视频字体图标在点击时不起作用？

我写了一些代码，使用字体可怕的视频控制图标，如：播放，停止。。。我在头上复制了链接。但是，当我点击图标播放按钮，例如，它不工作

var-lector=document.getElementById（“mavideo”）；
函数讲座（）{
莱克托。play（）；
}
函数暂停（）{
暂停（）；
}
函数停止（）{
暂停（）；
当前时间=0；
}
函数avancer（）{
选择器。当前时间+=10；
}
函数递归器（）{
当前时间-=10；
}

这是我们2019年的礼服

试试这段代码

<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>

这是我们2019年的礼服



变量选择器=document.getElementById（“mavideo”）；
函数讲座（）{
莱克托。play（）；
}
函数暂停（）{
暂停（）；
}
函数停止（）{
暂停（）；
当前时间=0；
}
函数avancer（）{
选择器。当前时间+=10；
}
函数递归器（）{
当前时间-=10；
}

首先，将HTML

style=“…”

属性放在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>

来源：

dresses fashion.mp4

应该是

dresses\u fashion.mp4

，即使用下划线而不是空格，这样可以更容易地识别这实际上是一个文件，而不是目录中的文件，如

dresses/fashion.mp4

第三，尝试将

视频

标记更改为如下所示：

<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>

<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> 

您的浏览器不支持HTML5视频

最后，将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;
  }
});

//选择视频元素
var讲座=document.querySelector（“mavideo”）；
//播放视频
document.querySelector（“.fa play”）.addEventListener（“单击”，函数（）{
演讲。游戏（）；
});
//暂停视频
document.querySelector（“.fa pause”）.addEventListener（“单击”，函数（）{
演讲。暂停（）；
});
//停止录像
document.querySelector（“.fa stop”）.addEventListener（“单击”，函数（）{
演讲。暂停（）；
当前时间=0；
});
//向后跳10秒
document.querySelector（“.fa插入符号左”）.addEventListener（“单击”，函数（）{
if（讲座当前时间<（讲座持续时间-11））{
讲座时间+=10；
}
});
//向前跳10秒
document.querySelector（“.fa插入符号右”）.addEventListener（“单击”，函数（）{
如果（讲座时间>10）{
讲座时间-=10；
}
});

注意：您也可以使用

document.getElementsByClassName（“…”）[0]

而不是

document.querySelector

注意：您可以将

onclick

属性设置为处理函数，而不是调用

addEventListener

方法

---

祝你好运。

内联javascript从来都不是一个好方法，当你点击这些按钮时会触发一些事件，因为你的视频是在表单中，我不知道为什么，它不应该在表单中，所以你应该添加

event.preventDefault（）

来监听点击事件。我添加了一个示例视频供您检查方法。为单击事件使用id，并相应地执行功能

document.getElementById（“播放”）.onclick=函数（事件）{//单击事件
event.preventDefault（）//阻止任何其他操作
document.getElementById（“mavideo”）.play（）//按其id播放视频
}
document.getElementById（“暂停”）.onclick=函数（事件）{
event.preventDefault（）
document.getElementById（“mavideo”）.pause（）
}
document.getElementById（“停止”）.onclick=函数（事件）{
event.preventDefault（）
document.getElementById（“mavideo”）.pause（）
document.getElementById（“mavideo”）.currentTime=0；
}
document.getElementById（“avancer”）.onclick=函数（事件）{
event.preventDefault（）
document.getElementById（“mavideo”）.currentTime+=10；
}
document.getElementById（“reculer”）.onclick=函数（事件）{
event.preventDefault（）
document.getElementById（“mavideo”）.currentTime-=10；
}

这是我们2019年的礼服

上面的js代码是否在video.js文件中？什么不起作用？控制？字体真棒？我不确定您需要什么检查javascript文件地址，可能您没有输入正确的地址。我知道这完全脱离主题，但是

lectuer

的正确拼写是

teaching

。